개발 환경 설정

타입스크립트 학습에서 의외로 많은 시간이 소모되는 구간이 바로 개발 환경 설정입니다.

명령어는 맞게 입력했는데 컴파일이 안 되거나, 에디터에서는 정상인데 터미널에서만 오류가 나는 상황이 자주 발생하기 때문입니다.

초보 단계에서는 이 문제를 내 코드가 틀렸다고 오해해 불필요한 디버깅에 빠지기 쉽습니다.

이 절은 단순 설치 절차를 나열하는 대신, 왜 이 단계가 필요한지와 어디서 어긋나기 쉬운지를 함께 설명합니다.

특히 전역 설치와 프로젝트 로컬 설치의 차이, 컴파일 설정 파일의 역할을 명확히 이해하면 이후 학습 속도가 훨씬 안정됩니다.

지금 환경을 정확하게 잡아두면, 다음 절부터는 문법 학습과 실습에 집중할 수 있습니다.

Node.js와 npm/yarn 설치하기

타입스크립트는 자바스크립트의 상위 집합이며, 결국 자바스크립트로 변환되어 실행됩니다.

이 절의 npm·tsc 명령을 실행하기 위해 Node.js 환경을 준비합니다. 타입스크립트 학습 자체가 반드시 개인 PC의 전역 설치를 요구하는 것은 아니며, 제공된 클라우드 환경에 도구가 있으면 그 도구를 먼저 확인합니다.

Node.js는 자바스크립트를 웹 브라우저 밖에서도 실행할 수 있게 해주는 런타임입니다.

node -v
npm -v

npm install -g yarn
yarn -v

타입스크립트 컴파일러 설치하기

Node.js와 npm(또는 yarn)이 준비되었다면, 이제 타입스크립트 코드를 자바스크립트로 변환해 줄 타입스크립트 컴파일러를 설치할 차례입니다.

이 컴파일러는 tsc라는 명령어로 실행되며, 여러분이 작성한 .ts 파일을 .js 파일로 바꿔주는 역할을 합니다.

터미널에서 다음 명령어를 입력하여 타입스크립트 컴파일러를 전역으로 설치합니다.

npm install -g typescript
# 또는
# yarn global add typescript

설치가 완료되면 다음 명령어로 타입스크립트 컴파일러(tsc)의 버전을 확인해보세요.

tsc -v

버전 정보가 출력된다면 타입스크립트 컴파일러 설치도 성공적으로 완료된 것입니다.

입문 단계에서는 전역 설치가 이해하기 쉽지만, 실무에서는 프로젝트마다 타입스크립트 버전을 고정하기 위해 로컬 설치를 더 많이 사용합니다.

팀 프로젝트에서 버전 차이로 빌드 결과가 달라지는 일을 줄이려면 devDependencies에 typescript를 넣고 npx tsc로 실행하는 방식이 안전합니다.

이 절의 명령 실습은 전역 tsc를 사용합니다. 상단 그림의 협업용 흐름을 적용하려면 프로젝트에 typescript를 개발 의존성으로 설치하고 lockfile을 보관한 뒤, 에디터도 workspace 버전을 선택합니다. npx tsc -p . --noEmit으로 검사하고 npx tsc -p . --noEmitOnError로 오류가 없는 경우에만 산출물을 생성할 수 있습니다.

코드 에디터 준비하기: VS Code 추천

타입스크립트 개발을 위해 어떤 코드 에디터를 사용해야 할까요?

시중에는 다양한 코드 에디터가 있지만, 타입스크립트 개발에 있어서는 단연 Visual Studio Code (VS Code)를 강력히 추천합니다.

• 타입스크립트 개발에 최적화: VS Code는 마이크로소프트에서 개발했으며, 타입스크립트와의 궁합이 매우 좋습니다. 별도의 설정 없이도 타입스크립트 코드를 작성할 때 강력한 자동 완성, 오류 검사, 리팩터링 기능을 기본으로 제공합니다.
• 풍부한 확장 생태계: 다양한 확장(Extension)을 통해 기능을 확장할 수 있으며, 이는 개발 생산성을 크게 향상시킵니다.
• 경량성과 강력함의 조화: 비교적 가볍게 동작하면서도, 필요한 모든 기능을 제공하는 강력한 에디터입니다.

첫 타입스크립트 프로젝트 시작하기

이제 타입스크립트 코드를 작성하고 실행할 개발 환경이 준비되었습니다.

첫 번째 타입스크립트 코드를 작성해보며 환경 설정을 마무리해봅시다.

mkdir my-ts-project
cd my-ts-project
code . # 현재 폴더를 VS Code로 엽니다.

tsc --init

function greet(name: string): string {
  return `Hello, ${name}! Welcome to TypeScript!`;
}

let userName: string = "TypeScript Learner";
console.log(greet(userName));

// 의도적으로 오류를 만들어봅시다.
// let age: number = "twenty"; // 오류: 'string' 형식은 'number' 형식에 할당될 수 없습니다.

tsc

function greet(name) {
  return `Hello, ${name}! Welcome to TypeScript!`;
}
let userName = "TypeScript Learner";
console.log(greet(userName));
// let age = "twenty"; // 타입스크립트의 타입 정보는 사라지고 자바스크립트로 변환됩니다.

node index.js

이제 타입스크립트 개발 환경을 준비했습니다.

다음 절부터는 기본 타입, 함수, 객체 타입, 컴파일 흐름을 순서대로 다룹니다.

명시적인 작은 프로젝트로 다시 확인하기 기존 my-ts-project와 구별되는 새 폴더를 사용하면 다른 실습 파일이나 이전 출력과 혼동하지 않습니다. 이미 Node.js와 컴파일러가 있는 학습 환경에서는 설치를 반복하지 말고 먼저 node -v, tsc -v를 확인하세요.

새 폴더 ts-first-isolated에 다음 두 설정 파일과 앞의 index.ts만 둡니다. 여기서는 Node에서 CommonJS로 실행하고 결과를 dist 폴더로 출력하는 경로를 선택합니다.

{
    "private": true,
    "type": "commonjs"
}

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "NodeNext",
        "moduleResolution": "NodeNext",
        "strict": true,
        "noEmitOnError": true,
        "outDir": "dist"
    },
    "include": ["index.ts"]
}

target은 출력 JavaScript의 문법 기준, module과 package.json의 type은 모듈 해석, strict는 검사 강도, outDir은 출력 위치입니다. include가 이번에 검사할 파일을 지정하므로 다른 실습 파일의 오류가 섞이지 않습니다.

# ts-first-isolated 폴더에서 실행합니다.
tsc -p . --noEmit
tsc -p .
node dist/index.js

검사에 성공하면 보통 진단 문구가 없고, 두 번째 명령 뒤 dist/index.js가 생깁니다. 마지막 실행은 앞의 Hello, TypeScript Learner! Welcome to TypeScript! 한 줄입니다. node index.js는 다른 위치의 옛 파일을 실행할 수 있으므로 이번 경로에서는 dist/index.js를 지정합니다.

협업용으로 이 새 프로젝트에 컴파일러를 로컬 설치하려면 npm install --save-dev --save-exact typescript로 설치 버전을 기록하고 package-lock.json도 보관합니다. 설치한 뒤에는 위 명령의 tsc를 npx tsc로 바꾸고 npx tsc -v로 선택된 버전을 확인합니다. 재현할 때는 보관한 의존성·lockfile에 맞춰 npm ci를 사용합니다. npx라는 이름만으로 설치 버전이 고정되는 것은 아닙니다.

스스로 확인하기 이 새 폴더의 index.ts에서 원문의 age 오류 주석을 해제하고 tsc -p . --noEmit, tsc -p .을 차례로 실행하면 진단과 출력은 어떻게 되나요? 이미 성공한 dist/index.js가 있다면 그것을 실행해도 수정본의 성공 증거가 되나요?

파일 지정과 프로젝트 지정의 차이는 공식 tsconfig 안내, 출력 위치는 공식 outDir 설명에서 확인할 수 있습니다. VS Code에서는 공식 컴파일 안내의 workspace TypeScript 선택을 참고하세요.