본문으로 건너뛰기

TypeScript 시작하기

· 약 7분
David Lee

안녕하세요, 교양있는 개발자 데이비드입니다.

nodejs나 reactjs 개발자가 아니더라도, 요즘에는 필수 교양으로 스크립트 언어 하나는 다룰 수 있어야 하잖아요?

오늘은 TypeScript를 준비했으니 한 번 구경하고 가세요.

준비물#

  • 맥북
note

Windows로 설명하려니 귀찮습니다. 그냥 macOS 기준으로 설명하겠습니다.

사전 작업#

tip

이미 되어 있으면 다음으로 넘어갑니다.

homebrew 설치#

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

nvm 설치#

NVM은 여러 버전의 Node를 설치해놓고 전환할 수 있는 Node Version Manager입니다.

brew install nvm

nvm 환경변수 추가#

echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc
echo '[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm' >> ~/.bashrc
echo '[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion' >> ~/.bashrc

node.js 설치#

nvm install 16
info

다른 버전이 필요하면 해당 버전을 입력하면 됩니다.

nvm install 14.17.6

npm 업그레이드#

npm install -g npm

yarn 업그레이드#

npm install -g yarn

프로젝트 초기화#

디렉터리 생성#

mdkir <프로젝트>cd <프로젝트>

git 저장소 초기화#

git init

프로젝트 초기화#

yarn init

질문에 적절히 답변합니다.

typescript 설치#

yarn add typescript --dev

typescript 초기화#

yarn tsc --init

tsconfig.json 파일이 생성됩니다.

tsconfig.json 설정#

tsc --init을 실행하면 tsconfig.json 파일이 생성됩니다.

TypeScript 프로젝트를 어떻게 빌드할지 설정하는 파일입니다.

info

각 옵션 필드의 내용은 TSConfig Reference 소개를 참조하십시오.

저는 tsconfig.json과 tsconfig.prod.json를 각각 선언해서 사용합니다.

tsconfig.json
{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "outDir": "./lib",    "rootDir": "./src",    "strict": true,    "moduleResolution": "node",    "esModuleInterop": true,    "experimentalDecorators": true,    "emitDecoratorMetadata": true,    "resolveJsonModule": true,    "skipLibCheck": true,    "forceConsistentCasingInFileNames": true  }}
tsconfig.prod.json
{  "extends": "./tsconfig.json",  "include": ["src/**/*.ts"],  "exclude": ["src/**/*.test.ts"]}

각각 어떤 설정인지 한 번 알아보세요.

tip

compilerOptions.target은 node.js 런타임의 버전에 따라 지정합니다.

info

node.js 16.x는 현재 ECMA2021까지 구현하고 있습니다.

빌드하기#

note

tsc 컴파일러는 ts 파일을 js 파일과 d.ts 파일로 변환합니다.

tsconfig.json 사용해서 빌드#

현재 디렉터리의 tsconfig.json을 기본값으로 사용해서 빌드합니다.

tsc --build --force

별도의 설정을 사용해서 빌드#

만약 다른 설정 파일을 사용해서 빌드하려면 명시적으로 입력해줍니다.

tsc --build --force tsconfig.prod.json
tip

package.json 파일의 scripts 항목에 선언해 놓으면 다음에 사용하기 편합니다.

{    "scripts": {        "build": "tsc --build --force",        "build:prod": "tsc --build --force tsconfig.prod.json",        ...    },    ...}

실행하기#

note

tsconfig.json에서 compilerOptions.outDir에 ./lib 경로를 지정했기 때문에, 해당 경로에 js, d.ts 파일이 생성됩니다.

경로를 지정하면 해당 디렉터리에 있는 index.js를 먼저 실행합니다.

node lib/

index.js 대신 다른 파일을 실행하려면 파일 이름을 명시적으로 지정합니다.

$ node lib/server.js
tip

package.json 파일의 main 항목을 지정하면 다음에 사용하기 편합니다.

{    "main": "lib/index.js",    ...}

그러면 이렇게 사용할 수 있습니다.

node .

빌드와 실행을 한방에 하기#

일일이 빌드, 실행 과정을 수동으로 반복하는 것은 괴롭습니다.

아예 ts 파일을 js 파일처럼 읽어서 바로 실행해주는 ts-node 모듈이 있습니다.

ts-node 설치#

yarn add ts-node --dev

이제 그냥 이렇게 하면 됩니다.

ts-node src/index.ts
info

자세한 내용은 ts-node 공식 문서를 참조하세요.

Watch#

파일의 업데이트를 감지하여 자동으로 빌드를 재실행하는 기능을 watch라고 합니다.

ts-node-dev라는 모듈을 사용해보겠습니다.

note

ts-node-dev = ts-node + node-dev

ts-node-dev 설치#

yarn add ts-node-dev --dev

이런 식으로 사용하면 됩니다.

ts-node-dev --respawn ./src
tip

package.json 파일의 scripts 항목에 선언해 놓으면 다음에 사용하기 편합니다.

{    "scripts": {        "debug": "ts-node-dev --respawn ./src",        ...    },    ...}

잘 되나요?#

src/index.ts
console.log('Hello, World!')

실행 결과#

$ yarn debug
Hello, World!

그럼 앞으로 즐거운 TypeScript 코딩하시기 바랍니다.