이 출시되었습니다! 11월의 새로운 기능 및 수정 사항을 읽어보세요.

Visual Studio Code에서 TypeScript 튜토리얼

TypeScript는 일반 JavaScript로 컴파일되는 JavaScript의 타입이 지정된 슈퍼셋입니다. 클래스, 모듈, 인터페이스를 제공하여 강력한 컴포넌트를 구축할 수 있도록 돕습니다.

TypeScript 컴파일러 설치

Visual Studio Code에는 TypeScript 언어 지원이 포함되어 있지만 TypeScript 컴파일러인 tsc는 포함되어 있지 않습니다. TypeScript 소스 코드를 JavaScript로 트랜스파일하려면 TypeScript 컴파일러를 전역 또는 작업 영역에 설치해야 합니다 (tsc HelloWorld.ts).

TypeScript를 설치하는 가장 쉬운 방법은 Node.js 패키지 관리자인 npm을 통하는 것입니다. npm이 설치되어 있다면, 다음 명령어로 컴퓨터에 TypeScript를 전역으로 (-g) 설치할 수 있습니다.

npm install -g typescript

버전을 확인하여 설치를 테스트할 수 있습니다.

tsc --version

Hello World

간단한 Hello World Node.js 예제로 시작해 봅시다. 새 폴더 HelloWorld를 만들고 VS Code를 실행합니다.

mkdir HelloWorld
cd HelloWorld
code .

파일 탐색기에서 helloworld.ts라는 새 파일을 만듭니다.

create new file

이제 다음 TypeScript 코드를 추가하세요. TypeScript 키워드 let과 string 타입 선언을 볼 수 있습니다.

let message: string = 'Hello World';
console.log(message);

TypeScript 코드를 컴파일하려면 통합 터미널(⌃` (Windows, Linux Ctrl+`))을 열고 tsc helloworld.ts를 입력합니다. 이렇게 하면 컴파일되어 새 helloworld.js JavaScript 파일이 생성됩니다.

compiled hello world

Node.js가 설치되어 있다면 node helloworld.js를 실행할 수 있습니다.

run hello world

helloworld.js를 열면 helloworld.ts와 크게 다르지 않다는 것을 알 수 있습니다. 타입 정보가 제거되었고 let은 이제 var가 되었습니다.

var message = 'Hello World';
console.log(message);

IntelliSense

VS Code에서는 구문 강조 및 괄호 일치와 같은 언어 기능을 볼 수 있습니다. 편집기에서 입력하는 동안 IntelliSense, 즉 VS Code와 TypeScript 언어 서버에서 제공하는 스마트 코드 완성 및 제안 기능을 보셨을 것입니다. 아래에서 console의 메서드를 볼 수 있습니다.

IntelliSense

메서드를 선택하면 매개변수 도움말을 볼 수 있으며 항상 호버 정보를 얻을 수 있습니다.

parameter help

tsconfig.json

지금까지 이 튜토리얼에서 TypeScript 컴파일러의 기본 동작을 사용하여 TypeScript 소스 코드를 컴파일했습니다. tsconfig.json 파일을 추가하여 TypeScript 컴파일러 옵션을 수정할 수 있습니다. 이 파일은 TypeScript 프로젝트 설정을 정의하며, 컴파일러 옵션 및 포함할 파일 등이 포함됩니다.

중요: 이 튜토리얼의 나머지 부분에서 tsconfig.json을 사용하려면 입력 파일 없이 tsc를 호출하세요. TypeScript 컴파일러는 프로젝트 설정 및 컴파일러 옵션을 위해 tsconfig.json을 찾습니다.

ES5로 컴파일하고 CommonJS 모듈을 사용하도록 옵션을 설정하는 간단한 tsconfig.json을 추가하세요.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS"
  }
}

tsconfig.json을 편집할 때 IntelliSense(⌃Space (Windows, Linux Ctrl+Space))가 도와줄 것입니다.

tsconfig.json IntelliSense

기본적으로 files 속성이 포함되지 않으면 TypeScript는 현재 폴더 및 하위 폴더의 모든 .ts 파일을 포함하므로 helloworld.ts를 명시적으로 나열할 필요가 없습니다.

빌드 출력 변경

TypeScript 소스와 같은 폴더에 생성된 JavaScript 파일을 두면 대규모 프로젝트에서는 빠르게 복잡해질 수 있으므로 outDir 속성을 사용하여 컴파일러의 출력 디렉토리를 지정할 수 있습니다.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out"
  }
}

helloworld.js를 삭제하고 옵션 없이 tsc 명령을 실행합니다. 이제 helloworld.js가 out 디렉토리에 배치된 것을 볼 수 있습니다.

TypeScript 언어 서비스의 다른 기능과 VS Code에서 직접 빌드를 실행하기 위해 작업을 사용하는 방법에 대해 알아보려면 TypeScript 컴파일을 참조하세요.

오류 검사

TypeScript는 강력한 타입 검사를 통해 일반적인 프로그래밍 실수를 방지하는 데 도움이 됩니다. 예를 들어 message에 숫자를 할당하면 TypeScript 컴파일러가 **'error TS2322: Type '2' is not assignable to type 'string'' 오류를 발생시킵니다. VS Code에서는 편집기(빨간색 물결선과 호버 정보)와 문제 패널(⇧⌘M (Windows, Linux Ctrl+Shift+M))에서 타입 검사 오류를 볼 수 있습니다. [ts] 접두사는 이 오류가 TypeScript 언어 서비스에서 온 것임을 알려줍니다.

incorrect type error

빠른 수정

TypeScript 언어 서비스는 일반적인 코딩 문제를 찾는 강력한 진단 세트를 보유하고 있습니다. 예를 들어 소스 코드를 분석하여 편집기에서 흐리게 표시되는 도달할 수 없는 코드를 감지할 수 있습니다. 소스 코드 줄에 호버하면 설명하는 호버가 표시되고 줄에 커서를 놓으면 빠른 수정 전구 모양이 나타납니다.

unreachable code detected

전구 모양을 클릭하거나 ⌘. (Windows, Linux Ctrl+.)를 누르면 빠른 수정 메뉴가 나타나 **도달할 수 없는 코드 제거** 수정을 선택할 수 있습니다.

또한, Code Action Widget: Include Nearby Quick Fixes (editor.codeActionWidget.includeNearbyQuickFixes) 설정은 기본적으로 활성화되어 있으며, 커서가 해당 줄의 어느 곳에 있든 상관없이 ⌘. (Windows, Linux Ctrl+.) (명령 ID editor.action.quickFix)에서 가장 가까운 빠른 수정을 활성화합니다.

이 명령은 리팩토링되거나 빠른 수정을 통해 수정될 소스 코드를 강조 표시합니다. 일반 코드 작업 및 수정이 아닌 리팩토링은 여전히 커서 위치에서 활성화할 수 있습니다.

디버깅

VS Code에는 TypeScript 디버깅을 위한 내장 지원이 있습니다. 실행 중인 JavaScript 코드와 함께 TypeScript를 디버깅하려면 VS Code는 디버거가 원본 TypeScript 소스 코드와 실행 중인 JavaScript 간의 매핑을 수행하도록 소스 맵에 의존합니다. tsconfig.json에서 "sourceMap": true를 설정하여 빌드 중에 소스 맵을 생성할 수 있습니다.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

tsc를 실행하여 다시 빌드하면 이제 out 디렉토리에서 helloworld.js 옆에 helloworld.js.map 파일이 생성된 것을 볼 수 있습니다.

편집기에서 helloworld.ts를 연 상태에서 F5를 누릅니다. 다른 디버거 확장이 설치되어 있다면 드롭다운에서 **Node.js**를 선택해야 합니다.

디버거가 세션을 시작하고 코드를 실행하며 디버그 콘솔 패널에 "Hello World" 메시지를 표시합니다.

debug console output

helloworld.ts에서 편집기의 왼쪽 여백을 클릭하여 중단점을 설정합니다. 중단점이 설정되면 빨간색 원이 표시됩니다. F5를 다시 누릅니다. 중단점이 히트하면 실행이 중지되고 **실행 및 디버그** 보기(⇧⌘D (Windows, Linux Ctrl+Shift+D))에서 변수 값 및 호출 스택과 같은 디버깅 정보를 볼 수 있습니다.

debug breakpoint

VS Code의 TypeScript 내장 디버깅 지원과 프로젝트 시나리오에 맞게 디버거를 구성하는 방법에 대해 자세히 알아보려면 TypeScript 디버깅을 참조하세요.

다음 단계

이 튜토리얼은 VS Code를 TypeScript 개발에 사용하는 방법에 대한 빠른 소개였습니다. VS Code의 TypeScript 컴파일 및 디버깅 지원 사용에 대해 자세히 알아보려면 계속 읽어보세요.

자주 묻는 질문

해당 JavaScript를 찾을 수 없어 프로그램을 시작할 수 없습니다.

tsconfig.json에서 "sourceMap": true를 설정하지 않았을 가능성이 높으며 VS Code Node.js 디버거는 TypeScript 소스 코드를 실행 중인 JavaScript에 매핑할 수 없습니다. 소스 맵을 켜고 프로젝트를 다시 빌드하세요.

12/10/2025
English 한국어 中文(简体)
© . This site is unofficial and not affiliated with Microsoft.