[타입스크립트] 타입스크립트 프로젝트 시작하는 방법

 

---

타입스크립트를 프로젝트에 적용하기 전에 몇 가지 설정을 거쳐야 합니다.

1. TSC 2. 설정파일 크게 이렇게 두 가지를 미리 준비해놓고 본격적으로 시작하면 됩니다.

1. TSC 실행

타입스크립트로 작성된 파일은 컴파일 과정을 거쳐 JS 파일로 변환됩니다.

이를 위해서 typescript 라이브러리를 설치하고 TSC(타입스크립 컴파일)을 실행해보겠습니다.

라이브러리를 설치하기 전, node.js가 설치되어있는지 버전을 확인해줍니다. 터미널에 다음과 같이 입력합니다.

 

 

node -v

 

 

node.js 버전이 확인되었다면 typescript 라이브러리를 설치합니다. 터미널에 다음과 같이 입력합니다.

 

 

npm i typescript -g

 

 

라이브러리 설치가 완료되면 .ts 확장자를 갖는 index.ts를 생성하고 타입스크립트 코드를 작성합니다.

터미널에 tsc(타입스크립트컴파일) index.ts 와 같이 명령어를 입력합니다.

 

 

tsc index.ts

 

 

tsc 명령어를 입력하면, 프로젝트 폴더에 동일한 이름의 자바스크립트 파일(.js 확장자를 갖는 파일)이 생성됩니다.

 

📌웹팩과 같은 웹 태스크 매니저를 통해서 명령어를 자동화할 수 있는데, 타입스크립트 파일을 컴파일하는

tsc 명령어를 자동으로 실행할 수 있습니다. 따라서 웹팩의 강의를 듣거나 문서를 살펴보면 도움이 됩니다.

(강의제공자님이 공유해주신 강의 및 자료는 하단에 적어놓겠습니다!)

2. 설정 파일

타입스크립트의 옵션을 설정할 때는 tsconfig.json 파일을 생성합니다.

자주 쓰이는 설정은 다음과 같습니다.

 

 

 

 

1. allowJs: 자바스크립트 파일을 허용하는 옵션

2. checkJs: 자바스크립트 파일에서 타입 검사 및 오류 보고를 지원하는 옵션

3. noImplicitAny: 암시적으로 타입을 Any로 설정하지 않도록 하는 옵션

 

이외에도 자주 쓰이거나 프로젝트에 필요한 설정이 있을 때마다

타입스크립트 공식문서 -> Tools -> References에서 확인할 수 있습니다.

https://www.typescriptlang.org/tsconfig

3. 플레이그라운드

추가적으로, 타임스크립트 공식 문서의 플레이그라운드(Playground) 페이지에서

작성한 타입스크립트 코드를 즉석에서 컴파일링 결과를 확인할 수 있습니다.

 

 

 

 

https://www.typescriptlang.org/play

---

마지막으로 강의제공자이신 캡틴판교님의 유용한 자료들을 공유하면서 마무리하겠습니다.

프로젝트 첫 설정하는 방법은 언제나 낯선 것 같습니다. 그래서 스스로 두고두고 찾아볼 수 있도록

기록을 남기는 중인데, 저처럼 헤매는 분들에게도 조금이나마 도움이 되면 좋겠습니다.

 

이상 나를 위한 일이 타인에게도 가치있기를 바라는 엘리제이였습니다.😎

 

프론트엔드 개발자를 위한 웹팩: Node.js와 NPM 부분은 무료로 수강할 수 있습니다.

Node.js와 NPM 핸드북

 

NPM 설치 명령어 핸드북

---

인프런의 유료 강의 '타입스크립트 입문 - 기초부터 실전까지'를 수강하고 작성하는 글입니다.

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의

(강의 제공자이신 캡틴판교 님의 타입스크립트 핸드북도 같이 참고하면 좋습니다.😇)