타입스크립트란?

타입스크립트란 MS에서 만든 자바스크립트의 상위호환 언어입니다.

자바스크립트의 경우는 타입의 안정성이 보장되지 않는데

타입스크립트는 이러한 단점을 보완하기 위해 만들어졌으며

정적 타입 언어로써 타입의 안정성을 보장하기 때문에 프로그램의 안정성의 상승되는 효과가 있습니다.

자바스크립트의 문법에 type을 지정하는 것이 타입스크립트의 전부(?)인데,

함수, 인자, 리턴값 등의 타입을 지정할 수 있습니다.

어떤 인자에 어떤 값이 들어갈 예정이고, 어떤 값을 리턴하는 타입을 명시해야 하기 때문에 디버깅 면에서도 좋은 면이 있습니다.

게다가 바벨을 대체할 수 있다는 점도 너무 매력적입니다.

타입스크립트 설치 및 설정

타입스크립트를 설치하고 설정해보도록 하겠습니다.

타입스크립트의 기본 흐름은

tsconfig.json 설정 => ts 확장자 파일 작성 => js파일로 컴파일

위의 흐름입니다.

$ npm init-y
$ npm i -g typescript
$ npm i typescript -D

그리고 node에서 ts를 실행하게 하기 위해 ts-node를 설치하겠습니다.

$ npm i -D ts-node

타입스크립트 설치가 끝났으면,

tsconfig.json 파일을 생성하고 타입스크립트의 설정을 해보도록 합시다.

tsconfig.json 파일은 타입스크립트의 설정을 지정할 수 있습니다.

tsc --init 으로도 tsconfig.json 파일을 생성할 수 있습니다.

컴파일러 옵션

{
    "compilerOptions": {
        "strict": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "lib": ["es2015","es2016","es2017","es2018","es2019","es2020"],
        "target": "ES5",
        "outDir": "./dist",
        "esModuleInterop": true
    },
    "exclude": ["node_modules"],
    "include": ["src/**/*"]
}

우선 컴파일러 옵션들을 살펴보겠습니다.

• strict
  말 그대로 엄격하게 타입을 검사합니다. true로 해야 타입스크립트를 쓰는 이유가 있으니 true해줍시다.

• module
  웹브라우저에서 동작 시는 amd
  Node에서 동작 시는 commonjs입니다.

• moduleResolution
  module 키의 값이 commonjs면 node로 설정하고 amd이면 classic으로 설정합니다.

• lib
  lib에는 몇 버전까지의 자바스크립트를 사용할 수 있게 할지 적습니다.(이런 기능 덕분에 바벨 대신 ts를 쓰면 됩니다.)
  따로 설정하지 않아도 되는 거 같긴 합니다

• target
  해당 버전으로 트랜스파일 됩니다. 대부분 ES5로 설정합니다.

• outDir
  outDir에선 타입스크립트가 자바스크립트로 컴파일될때 저장되는 폴더의 url 설정 합니다.
  ex, tsc 명령어를 입력하면 ./dist 폴더에 변환된 js 파일들이 생깁니다.

• esModuleInterop
  true로 설정 해놓으면 export default가 없는 라이브러리도 * as 를 사용하지 않고 불러올 수 있습니다.

  import * as React from 'react;
  본래 이런 방식에서
  import React from 'react;
  이렇게 사용 가능합니다.

• include exclude
  include는 컴파일 대상, exclude는 컴파일에 제외되는 대상을 말합니다.
  src/**/*.ts은 src 디렉터리는 물론 src의 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미

타입스크립트 실행

예제로 index.ts 파일을 만들어보고 자바스크립트로 컴파일해보겠습니다.

{
    "compilerOptions": {
        "strict": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "target": "ES5",
        "outDir": "./dist",
        "esModuleInterop": true
    },
    "exclude": ["node_modules"],
    "include": ["index.ts"]
}

index.ts를 컴파일 대상으로 삼고,

자바스크립트 파일로 컴파일하도록 하겠습니다.

index.ts

console.log("Hello, typeWorld")

$ tsc

npx를 활용하면 글로벌로 typescript를 설치하지 않아도 됩니다. ex) npx tsc

dist 폴더에

index.js 파일이 생기면 성공입니다!