타입스크립트를 실행하기 위해서는 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/**/*"]
}
모든 엄격한 타입 검사 옵션을 활성화한다. 이것을 false로 해놓으면 TypeScript를 사용하는 의미가 퇴색된다. 그러므로 true로 하는게 좋다!
타입스크립트 소스코드가 컴파일되어 만들어진 ES5 자바스크립트는 코드는 웹 브라우저와 Node 양쪽에서 모두 동작해야한다. 그런데 웹 브라우저와 노드제이에스는 물리적으로 동작하는 방식이 달라서 여러 개의 파일로 분할된 자바스크립트 코드 또한 웹 브라우저와 Node 양쪽에서 각각 다르게 동작한다.
웹브라우저에서 동작: amd
Node에서 동작: commonjs
module 키의 값이 commonjs면 node로 설정하고 amd이면 classic으로 설정한다.
lib에는 몇버전까지의 자바스크립트를 사용할 수 있게 할지 적는다.
target키에는 트랜스파일할 대상 자바스크립트의 버전을 설정한다. 타입스크립트의 코드가 해당 버전으로 트랜스파일 된다. 대부분 ES5로 설정한다.
outDir 키는 baseUrl 설정값을 기준으로 했을 때 하위 디렉터리의 이름이다. ./dist로 설정했음으로 dist 디렉터리에 빌드된 결과가 들어간다.
true로 설정 해놓으면 export default가 없는 라이브러리도 * as 를 사용하지 않고 불러올 수 있다.
예를 들어 react는 export default가 없어서
import * as React from 'react;
으로 사용해야한다. 하지만 exModuleInterop을 true로 하면
import React from 'react;
로 사용할 수 있다.
include는 src/*/은 src 디렉터리는 물론 src의 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미이다.
exclude는 컴파일 대상에서 제외한다는 것이다.
이제 src파일을 생성하고 test.ts를 만든다.
console.log("테스트입니다.");
npx tsc
를 하게 되면 dist 폴더에 test.js가 생기게 된다. npx는 global로 typescript를 설치하지 않아도 npx tsc로 명령어를 실행할 수 있게 해준다.
그러면 이런식으로 폴더 구조가 된다. 타입스크립트 설정이 끝났으니 다음엔 타입스크립트의 타입들에 대해서 알아볼 것이다.