Typescript 세팅

* npm이 설치되어 있단 가정하에 진행하겠습니다.

* 설명용이 아닌 기록용이니 많은 설명은 없이 코드에 대해서만 적어두었습니다.

 

npm을 통한 typescript 설치

# 로컬 설치
> npm i -D typescript

# 전역 설치
> npm i -g typescript

설치 확인

# 로컬 설치했을 경우 npm을 붙여서 tsc(typescript compiler)를 실행한다.
> npm tsc -v

# 전역 설치 했을 경우
> tsc -v

typescript 설정 파일(tsconfig.json) 생성

>  npx tsc --init

tsconfig.json 일부 내용

{
  "compilerOptions": {
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "commonjs",                                /* Specify what module code is generated. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

target은 tsc를 통해 js파일을 만들어낼 때, javascript에 대한 버전을 표시합니다.

ts파일 생성 후 compile 해보기

ts 파일 생성 후 코드 작성

// 타입스크립트는 javascript와 다르게 타입을 지정할 수 있다.
const hello = (message: string) => {
    console.log(message);
};

let message: string = "웰컴~!";
hello(message);

컴파일 진행

> tsc ts1.ts

컴파일 후 js파일이 생성되며, 해당 파일 내용을 보면 javascript 문법으로 compile된 것을 볼 수 있다.

*브라우저나 Node.js 환경에서는 타입 어노테이션은 문법 오류로 인식되기 때문에 컴파일 과정에서 제거가 되는 것입니다.

*** js 코드 버전

위 js 파일의 내용에서 아주 중요한 부분은 ts파일에 작성한 함수의 최근 문법 '()=>'가 'function()'으로, 그리고 'let'이 'var'로 compile된 것을 볼 수 있을 것입니다. 이는 'tsconfig.json'파일의 옵션 중 'target'옵션의 설정을 구 버전의 js를 적용했기 때문입니다.

 default로 'es2016'이 되어 있는 것은 브라우저 호환성 때문이라고 합니다. 이 옵션 값을 'esnext'로 설정한다면 가장 최신 버전으로 설정이 됩니다.

 

module(tsconfig.json내용 참고)

하단은 commonjs 모듈로 컴파일되었을 때의 내용

하단은 es6 모듈로 컴파일 했을 때의 모습

> npx tsc --strict --module es6  .\ts1.ts .\ts1_1.ts

commonjs는 구식 버전이며, 현재 표준 버전은 es버전이라고 하니 신규 개발에 대해서는 es버전을 적용하여 compile하는 것이 좋을 듯 하다.

 

모든 옵션을 변경한 후의 tsconfig.json파일 내용

{
  "compilerOptions": {
    "target": "es6",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "es6",                                /* Specify what module code is generated. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}