한입크기로 잘라먹는 타입스크립트- 소개 및 개론- [인프런]

https://ts.winterlood.com/6c9bf87f-6a8f-4e96-95b4-5e12d9f82165

Hello TS World - 타입스크립트 개론

섹션 0 강의 소개

 

섹션 1 타입스크립트 개론

타입스크립트를 소개합니다

자바스크립트의 한계점과 타입스크립트

프로그램이 비정상적으로 종료된다. 하지만 실행은 된다.

 

 

타입스크립트의 동작 원리

즉, 프로그램 실행결과에는 아무런 영향을 미치지 않는다.

 

 

타입스크립트 컴파일러 옵션 설정하기

 

 

 

타입스크립트의 컴파일러 옵션은 패키지 루트 폴더 아래에 tsconfig.json이라는 파일에 설정할 수 있다.

컴파일러 옵션을 설정하는 가장 쉽고 빠른 방법은 자동 생성 도구를 이용하는 방법 입니다.

 

터미널에 다음 명령어를 입력하면 자동으로 기본 설정이 완료된 tsconfig.json 파일이 생성됩니다.

tsc --init

 

 

 

include 옵션

include 옵션은 tsc에게 컴파일 할 타입스크립트 파일의 범위와 위치를 알려주는 옵션입니다.

 

 

{

  "include": ["src"]

}

이렇게 설정하면 이제 tsc 명령어만 입력해도 src 폴더 아래의 모든 타입스크립트 파일이 동시에 컴파일됩니다.

 

 

target 옵션

다음으로 살펴볼 옵션은 컴파일 결과 생성되는 자바스크립트 코드의 버전을 설정하는 target 옵션입니다.

 

다음과 같이 target 옵션을 설정합니다.

Copy

{

  "compilerOptions": {

    "target": "ES5"

  },

  "include": ["src"]

}

이제 tsc를 이용해 컴파일 하면 타입스크립트 코드가 ES5 버전의 자바스크립트 코드로 변환됩니다. 

target 옵션을 이용하면 생성되는 자바스크립트 코드의 버전을 우리가 마음대로 조정할 수 있습니다.

 

module 옵션

다음으로는 변환되는 자바스크립트 코드의 모듈 시스템을 설정하는 module 옵션에 대해 살펴보겠습니다.

다음과 같이 tsconfig.json에 module 옵션을 추가하고 값으로 CommonJS를 설정합니다.

 

commonjs 방식과 ES모델 시스템 방식

 

Copy

{

  "compilerOptions": {

    "target": "ESNext",

"module": "CommonJS"

  },

  "include": ["src"]

}

 

결과를 확인하면 require나 exports 등의 CommonJS 문법으로 코드가 변환된 것을 확인할 수 있습니다. 앞

서 module 옵션을 CommonJS로 설정해 두었기 때문입니다.

 

 

outDir 옵션

{

  "compilerOptions": {

    "target": "ESNext",

    "module": "ESNext",

    "outDir": "dist"

  },

  "include": ["src"]

}

tsc를 이용해 컴파일 하면 이제 컴파일 결과가 dist 폴더에 생성됩니다.

 

 

strict 옵션

다음으로 살펴 볼 옵션은 타입스크립트 컴파일러의 타입 검사 엄격함 수준을 정하는 strict 옵션입니다. 

 

다음과 같이 strcit 옵션을 true로 설정합니다.

strict는 엄격한 타입 검사를 의미하는 옵션인데요 이 옵션을 true로 설정하면 이제 코드를 아주 엄격하게 검사하게 됩니다.

타입스크립트에서는 특별히 매개변수의 타입은 프로그래머가 직접 지정하도록 권장 하는 데요.

구체적인 이유는 나중에 다루겠지만 대략적으로만 소개하자면 타입스크립트는 함수 매개변수의 타입을 자동 추론할 수 없기 때문에 타입을 프로그래머가 직접 지정하지 않을 경우 엄격한 타입 검사 모드에서는 오류가 발생하게 됩니다.

이때 반대로 strict 를 끄면 엄격하지 않게 타입을 검사하기 때문에 오류가 사라지게 됩니다.

 

ModuleDetection 옵션

타입스크립트의 모든 파일은 기본적으로 전역 파일(모듈)로 취급됩니다.

따라서 다음과 같이 a.ts와 b.ts 두 타입스크립트 파일을 만들고 동일한 이름의 변수를 선언하면 오류가 발생하게 됩니다.

이럴 때에는 각 파일에 모듈 시스템 키워드(export, import)를 최소 하나 이상 사용해 해당 파일을 전역 모듈이 아닌

로컬(독립) 모듈로 취급되도록 만들어야 하는데 이를 자동화 하는 옵션이 바로 moduleDetection 옵션입니다.

 

다음과 같이 moduleDection 옵션을 force로 설정할 경우 자동으로 모든 타입스크립트 파일이 로컬 모듈(독립 모듈)로 취급됩니다.

Copy

{

  "compilerOptions": {

    "target": "ESNext",

    "module": "ESNext",

    "outDir": "dist",

"moduleDetection": "force"

  },

  "include": ["src"]

}

 

 

ts-node 옵션

마지막으로 살펴 볼 옵션은 ts-node 옵션입니다.

moduleDetection 옵션을 활성화 하고 타입스크립트 파일에서 모듈 시스템을 사용하게 되면 ts-node로 실행시 오류가 발생하게 됩니다.

이 때 다음과 같이 ts-node의 옵션을 설정하면 ts-node로 타입스크립트 모듈을 실행할 수 있게 됩니다.

Copy

{

  "compilerOptions": {

    "target": "ESNext",

    "module": "ESNext",

    "outDir": "dist",

"moduleDetection": "force"

  },

"ts-node": {

"esm": true                 기본적으로 ts-node는  commonjs 방식이여서 따로 옵션에 추가

},

  "include": ["src"]

}