[typescript] 타입스크립트 시작 및 옵션 설정

이번 프로젝트에서 타입스크립트를 적용하기 위해 처음 공부를 시작한다

항상 자바스크립트를 쓰면서 더 안정성있는 타입스크립트를 배우고 싶었는데 이제야 마음먹고 시작한다!

 

실습환경 구성

npm init  // node.js 패키지 초기화

// nodejs의 내장 기능들에 대한 타입 정보
// console과 같은 node.js의 기본 기능에 대한 타입을 알기위해 필요
npm i @types/node  

npm i typescript -g   // typescript 컴파일러 (전역으로 설치)

tsc -v   // 컴파일러 버전 확인

 

 

컴파일

.ts 파일은 컴파일을 하면 결과물이 .js 파일로 나온다.

아래와 같이  index.ts를 컴파일 하면 같은 의미를 가진 index.js 파일로 변환된다.

이렇게 컴파일하는 과정에서 미리 type을 체크하기 때문에, 결과물로 만들어진 js파일은 타입오류가 일어날 확률이 적다.

 

따라서 ts 파일을 실행시키려면 아래의 과정을 거쳐야 한다.

tsc src/index.ts  => index.js로 변환

node src/index.js  => index.js 실행

 

 

그러나 항상 위와 같이 ts 코드를 js로 바꿔서 확인하는 과정을 거칠 수는 없으니 ts-node를 사용한다.

npm i ts-node -g

ts-node는 typescript 컴파일러와 node.js가 같이 있는 것으로, 바로 typescript 파일을 실행할 수 있다. 

ts-node src/index.ts  =>  바로 index.ts 실행

 

 

컴파일러 옵션

얼마나 엄격하게 타입 오류를 검사할지, js 코드의 버전은 어떻게 할지 등등

세부적인 컴파일러 옵션을 설정할 수 있다.

 

 

ts 컴파일러 옵션은 node.js 패키지 단위로 설정할 수 있다.

먼저 아래의 명령어로 컴파일러의 기본적인 옵션파일을 생성할 수 있다.

tsc --init    // tsconfig.json 생성

 

아래는 자주 쓰는 옵션들이다

 

{

  // ts -> js 변환과정 or 타입 검사 등의 상세 옵션 설정

  "compilerOptions": {  

    "target": "ESNext",  // 컴파일 결과 생성되는 js 버전 - ESNext : js 최신버전

    "module": "ESNext",  //  CommonJS 등 모듈 시스템 지정

    "outDir": "dist",   // 컴파일 결과물이 생성되는 폴더

    "strict": true,   // 엄격한 타입 검사 옵션

    "moduleDetection": "force"

  },

  "ts-node": {

    "esm": true // ts-node가 es모듈 시스템으로 동작하게 함

  },

  "include": ["src"],  // 해당 폴더의 파일 모두 컴파일 -> tsc 명령어만으로 컴파일 가능

}

 

여기서 ESNext는 js의 최신버전을 가리킨다.

 

moduleDetection 옵션

이 옵션은 파일을 어떤 모듈로 감지할 것인가를 결정하는 옵션이다.

아래의 예시를 보면 서로 다른 타입스크립트 파일에 같은 변수가선언된 경우 오류가 발생한다.

오류 : 동일한 이름의 변수를 똑같은 scope에 두번 선언했다는 뜻이다. (여기서 scope란 이름이 공유된 공간이다.)

 

이유는 ts는 모든 파일을 전역 모듈로 보기 때문에 다른 파일이더라도 전역적으로 같은 공간에 있다고 취급하기 떄문이다.

(js는 각각의 파일이 개별 모듈로 취급받기 때문에, 아래와 같은 오류가 발생하지 않는다.)

여기서 두가지 해결방법이 있다.

 

1. 파일안에 export나 import와 같은 모듈시스템을 사용하는 키워드를 한번이라도 작성하면 각각의 파일은 그 순간부터 개별 모듈로 취급반는다. 그러므로 일일이 모든 파일에 export와 같은 키워드를 작성하는 방법을 쓸 수 있다.

 

2. 더 쉬운 방법으로는 moduleDetection 옵션을 "force"로 하는 것이다. 이렇게 하면 1번의 방법을 컴파일 과정에서 자동으로 해준다.

실제로 옵션을 설정하면 위의 예시에서 오류가 사라지고, 해당 파일들을 컴파일 해보면 아래와 같이 js파일에 자동으로 export 키워드가 들어가 있는 것을 볼 수 있다.

 

 

ts-node 오류 설정

이렇게 옵션을 설정하고 아래와 같이 ts-node 명령어를 실행하면 오류가 난다.

에러 메세지에 나와있듯 package.js에 type을 module이라고 설정해주면 된다.

 

출처

한 입 크기로 잘라먹는 타입스크립트 - 이정환

한 입 크기로 잘라먹는 타입스크립트 대시보드 - 인프런 | 강의 (inflearn.com)

한 입 크기로 잘라먹는 타입스크립트 - 인프런 | 강의