타입스크립트 설정

타입스크립트를 실행하기 위해서는 nodejs가 설치되어 있어야 한다. 그리고 원하는 폴더로 가서 설정을 시작한다.

npm init -y

그리고 typescript를 설치해준다.

npm i typescript

그리고 ts를 node에서 실행하게 해주는 ts-node를 설치한다.

npm i -D ts-node

엄밀히 말하면 ts를 node에서 실행하는게 아니라 ts-node가 ts를 js파일로 컴파일하고 그 js 파일을 node에서 실행시켜주는 것이다.

그리고 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

모든 엄격한 타입 검사 옵션을 활성화한다. 이것을 false로 해놓으면 TypeScript를 사용하는 의미가 퇴색된다. 그러므로 true로 하는게 좋다!

module

타입스크립트 소스코드가 컴파일되어 만들어진 ES5 자바스크립트는 코드는 웹 브라우저와 Node 양쪽에서 모두 동작해야한다. 그런데 웹 브라우저와 노드제이에스는 물리적으로 동작하는 방식이 달라서 여러 개의 파일로 분할된 자바스크립트 코드 또한 웹 브라우저와 Node 양쪽에서 각각 다르게 동작한다.

웹브라우저에서 동작: amd
Node에서 동작: commonjs

moduleResolution

module 키의 값이 commonjs면 node로 설정하고 amd이면 classic으로 설정한다.

lib

lib에는 몇버전까지의 자바스크립트를 사용할 수 있게 할지 적는다.

target

target키에는 트랜스파일할 대상 자바스크립트의 버전을 설정한다. 타입스크립트의 코드가 해당 버전으로 트랜스파일 된다. 대부분 ES5로 설정한다.

outDir

outDir 키는 baseUrl 설정값을 기준으로 했을 때 하위 디렉터리의 이름이다. ./dist로 설정했음으로 dist 디렉터리에 빌드된 결과가 들어간다.

esModuleInterop

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

예를 들어 react는 export default가 없어서

import * as React from 'react;

으로 사용해야한다. 하지만 exModuleInterop을 true로 하면

import React from 'react;

로 사용할 수 있다.

include exclude

include는 src/*/은 src 디렉터리는 물론 src의 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미이다.
exclude는 컴파일 대상에서 제외한다는 것이다.

이제 src파일을 생성하고 test.ts를 만든다.

test.ts

console.log("테스트입니다.");

npx tsc

를 하게 되면 dist 폴더에 test.js가 생기게 된다. npx는 global로 typescript를 설치하지 않아도 npx tsc로 명령어를 실행할 수 있게 해준다.

그러면 이런식으로 폴더 구조가 된다. 타입스크립트 설정이 끝났으니 다음엔 타입스크립트의 타입들에 대해서 알아볼 것이다.