[Typescript] Typescript 환경을 구성해보자

2022. 7. 10. 17:07·⭐FE

💡Typescript는 Javascript에 type을 입힌 언어이며 Typescript로 작성한 code를 javascript로 compile해 그 결과물을 프로젝트에서 사용한다. compile할 때 compile 옵션을 설정해야 하며 이런 option은 tsconfig.json이라는 파일에서 설정이 가능하다. 


 

🚀지금부터 기본적인 Typescript 환경을 구성해보려고 한다. 

 

1. 타입 스크립트를 설치한다. 

-> npm install typescript [ --save or --save-dev or -g ]  

 

2. tsconfig.json 생성 및 compile 옵션 설정 ( ts -> js 로 compile시 옵션을 tsconfig.json에 작성 )

->  참고 ) 프로젝트 최상단에 tsconfig.json을 생성하는 것이 좋다

 

 

//tsconfig.json
{
    "compilerOptions":{
        "allowJs": true,
        // ts compile시 js file이 있을 시 js도 그대로 쓰겠다는 옵션
        "target":"ES6",
        // ts -> js로 변환시 js es6문법 사용
        "outDir": "built",
        // ts -> js로 변환된 결과물이 어디에 생성될 지 경로 지정 
        "moduleResolution": "Node",
        // moduleResolution 은 가장 typescript community에서 흔히 사용되는 resolution
        // default 값인 node 이며 , classic 이라는 옵션도 존재 
        "lib": ["ES2015","DOM","DOM.Iterable"],
        // 타입스크립트 파일을 자바스크립트로 컴파일 할 때 포함될 라이브러리
        // Promise를 사용하기 위해서 ES2015이상의 library 사용 필요  
        "noImplicitAny": true,
        // true 로 할 시 type이 정해지지 않았을 때 error 표기
    },
    "include": ["src/**/*"],
    // src 하위 폴더의 file만 compile 하겠다
    // 다른 예시) src폴더 하위 .ts파일만 compile하겠다.
    "exclude": ["node_modules","bower_components","jspm_packages","outDir"]
    // compile 제외할 폴더 설정 
    // 명시하지 않으면 default 값은 node_modules,bower_components,jspm_packages,outDir 이다
}

 

※다양한 compilerOptions 알고 싶다면 아래 공식페이지를 참조하자

https://www.typescriptlang.org/docs/handbook/compiler-options-in-msbuild.html 

 

3. terminal에 명령어 입력을 통해 compile 진행 

tsc

참고) tsc -v : typescript version확인 

참고) 하단에 PowerShell extension이 안깔려 있을 경우 compile이 진행 안될 수 있다.

 

4. 결과 확인하기 

src/ts/ 에 작성한 ts file 3개가 js로 compile 된 뒤 ourtdir에서 설정한 경로로 생성된 것을 볼 수 있다.

'⭐FE' 카테고리의 다른 글

useMemo 이해하기  (0) 2023.11.19
storybook 파악하기  (0) 2023.09.17
[Javascript] es6 import, export 예시  (0) 2022.07.10
[Javascript] Prototype, __proto__  (0) 2022.07.09
[React] React Form library Formik 학습  (0) 2022.06.24
'⭐FE' 카테고리의 다른 글
  • useMemo 이해하기
  • storybook 파악하기
  • [Javascript] es6 import, export 예시
  • [Javascript] Prototype, __proto__
devWarrior
devWarrior
  • devWarrior
    devWarrior
    devWarrior
  • 전체
    오늘
    어제
    • 🧩Dev (263)
      • ⭐FE (34)
      • 🔒Algorithm (155)
      • ➕Etc. (11)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
    • 글쓰기
    • 관리
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    그리디
    티스토리챌린지
    react
    BFS
    코딩테스트
    FE
    실버3
    js
    자스
    dp
    nodejs
    실버4
    DFS
    node.js
    실버2
    실버1
    골드5
    자바스크립트
    javascript
    Easy
    Algorithm
    구현
    Lv2
    알고리즘
    프로그래머스
    leetcode
    코테
    백준
    프론트엔드
    오블완
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
devWarrior
[Typescript] Typescript 환경을 구성해보자
상단으로

티스토리툴바