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

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
tsc --help

또 다른 옵션은 프로젝트에 TypeScript 컴파일러를 로컬로 설치하는 것입니다(npm install --save-dev typescript). 이렇게 하면 다른 TypeScript 프로젝트와의 잠재적 충돌을 방지하는 이점이 있습니다.

컴파일러 대 언어 서비스

VS Code의 TypeScript 언어 서비스는 설치된 TypeScript 컴파일러와 별개라는 점을 명심하는 것이 중요합니다. TypeScript 파일을 열 때 언어 상태 표시줄 항목에서 VS Code의 TypeScript 버전을 볼 수 있습니다.

TypeScript version displayed in the language status in the Status Bar.

팁

상태 표시줄의 *고정* 아이콘을 사용하여 TypeScript 버전을 고정할 수 있습니다.

이 문서의 뒷부분에서는 VS Code가 사용하는 TypeScript 언어 서비스 버전을 변경하는 방법에 대해 논의할 것입니다.

tsconfig.json

일반적으로 모든 새 TypeScript 프로젝트의 첫 번째 단계는 tsconfig.json 파일을 추가하는 것입니다. tsconfig.json 파일은 컴파일러 옵션 및 포함해야 할 파일과 같은 TypeScript 프로젝트 설정을 정의합니다. 이를 수행하려면 소스를 저장하려는 폴더를 열고 tsconfig.json이라는 새 파일을 추가하십시오. 이 파일에서는 IntelliSense(⌃Space (Windows, Linux Ctrl+Space))가 도움이 될 것입니다.

tsconfig.json IntelliSense

ES5, CommonJS 모듈 및 소스 맵의 경우 간단한 tsconfig.json은 다음과 같습니다.

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

이제 프로젝트의 일부로 .ts 파일을 만들면 풍부한 편집 환경과 구문 유효성 검사를 제공합니다.

TypeScript를 JavaScript로 변환

VS Code는 통합 태스크 실행기를 통해 tsc와 통합됩니다. 이를 사용하여 .ts 파일을 .js 파일로 변환할 수 있습니다. VS Code 태스크를 사용하는 또 다른 이점은 문제 패널에 통합된 오류 및 경고 감지가 제공된다는 것입니다. 간단한 TypeScript Hello World 프로그램을 변환하는 과정을 살펴보겠습니다.

1단계: 간단한 TS 파일 만들기

빈 폴더에서 VS Code를 열고 helloworld.ts 파일을 만든 다음 해당 파일에 다음 코드를 배치합니다...

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

TypeScript 컴파일러 tsc가 올바르게 설치되었는지, 그리고 작동하는 Hello World 프로그램이 있는지 테스트하려면 터미널을 열고 tsc helloworld.ts를 입력하십시오. VS Code에서 직접 통합 터미널(⌃` (Windows, Linux Ctrl+`))을 사용할 수 있습니다.

이제 변환된 helloworld.js JavaScript 파일을 볼 수 있습니다. Node.js가 설치되어 있다면 node helloworld.js를 입력하여 실행할 수 있습니다.

build and run Hello World

2단계: TypeScript 빌드 실행

전역 **터미널** 메뉴에서 **빌드 태스크 실행**( ⇧⌘B (Windows, Linux Ctrl+Shift+B))을 실행합니다. 이전 섹션에서 tsconfig.json 파일을 생성했다면 다음 피커가 표시됩니다.

TypeScript Build

tsc: build 항목을 선택합니다. 이렇게 하면 작업 영역에 HelloWorld.js 및 HelloWorld.js.map 파일이 생성됩니다.

tsc: watch를 선택하면 TypeScript 컴파일러가 TypeScript 파일의 변경 사항을 감시하고 변경 시마다 변환기를 실행합니다.

내부적으로 TypeScript 컴파일러를 태스크로 실행합니다. 사용하는 명령은 다음과 같습니다: tsc -p .

3단계: TypeScript 빌드를 기본값으로 만들기

TypeScript 빌드 태스크를 기본 빌드 태스크로 정의하여 **빌드 태스크 실행**( ⇧⌘B (Windows, Linux Ctrl+Shift+B))을 트리거할 때 직접 실행되도록 할 수도 있습니다. 이렇게 하려면 전역 **터미널** 메뉴에서 **기본 빌드 태스크 구성**을 선택합니다. 그러면 사용 가능한 빌드 태스크가 있는 피커가 표시됩니다. TypeScript **tsc: build**를 선택하면 .vscode 폴더에 다음 tasks.json 파일이 생성됩니다.

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

태스크에 group JSON 객체가 있어 태스크 kind를 build로 설정하고 기본값으로 만든다는 점에 유의하십시오. 이제 **빌드 태스크 실행** 명령을 선택하거나 (⇧⌘B (Windows, Linux Ctrl+Shift+B))를 누르면 태스크를 선택하라는 메시지가 표시되지 않고 컴파일이 시작됩니다.

팁: VS Code의 실행/디버그 기능을 사용하여 프로그램을 실행할 수도 있습니다. VS Code에서 Node.js 애플리케이션을 실행하고 디버깅하는 방법에 대한 자세한 내용은 Node.js 튜토리얼을 참조하십시오.

4단계: 빌드 문제 검토

VS Code 태스크 시스템은 문제 메이커를 통해 빌드 문제를 감지할 수도 있습니다. 문제 메이커는 특정 빌드 도구를 기반으로 빌드 출력을 구문 분석하고 통합된 문제 표시 및 탐색을 제공합니다. VS Code는 많은 문제 메이커와 함께 제공되며 위에서 tasks.json에 있는 $tsc는 TypeScript 컴파일러 출력에 대한 문제 메이커입니다.

예를 들어, TypeScript 파일에 간단한 오류(console.log에 여분의 'g')가 있다면 tsc에서 다음과 같은 출력을 얻을 수 있습니다.

HelloWorld.ts(3,17): error TS2339: Property 'logg' does not exist on type 'Console'.

이것은 터미널 패널(⌃` (Windows, Linux Ctrl+`))에 표시되며 터미널 보기 드롭다운에서 **Tasks - build tsconfig.json**을 선택합니다.

상태 표시줄에서 오류 및 경고 수를 볼 수 있습니다. 오류 및 경고 아이콘을 클릭하면 문제 목록을 가져와 해당 문제로 이동할 수 있습니다.

Error in Status Bar

키보드를 사용하여 목록을 열 수도 있습니다 ⇧⌘M (Windows, Linux Ctrl+Shift+M).

팁: 태스크는 다양한 작업에 대한 풍부한 지원을 제공합니다. 구성 방법에 대한 자세한 내용은 태스크 토픽을 확인하십시오.

JavaScript 소스 맵 지원

TypeScript 디버깅은 JavaScript 소스 맵을 지원합니다. TypeScript 파일에 대한 소스 맵을 생성하려면 --sourcemap 옵션으로 컴파일하거나 tsconfig.json 파일에서 sourceMap 속성을 true로 설정하십시오.

인라인 소스 맵(소스 맵의 내용이 별도 파일 대신 데이터 URL로 저장됨)도 지원되지만, 인라인 소스는 아직 지원되지 않습니다.

생성된 파일의 출력 위치

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

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

파생된 JavaScript 파일 숨기기

TypeScript 작업을 할 때 파일 탐색기나 검색 결과에서 생성된 JavaScript 파일이 표시되는 것을 원하지 않을 때가 많습니다. VS Code는 files.exclude 작업 영역 설정으로 필터링 기능을 제공하며 해당 파생 파일을 숨기기 위한 식을 쉽게 만들 수 있습니다.

**/*.js: { "when": "$(basename).ts" }

이 패턴은 모든 JavaScript 파일(**/*.js)과 일치하지만 이름이 같은 TypeScript 파일이 있는 경우에만 일치합니다. 파일 탐색기에는 동일한 위치로 컴파일되는 경우 더 이상 JavaScript의 파생 리소스가 표시되지 않습니다.

Hiding derived resources Hiding derived resources

작업 영역 루트의 .vscode 폴더에 있는 작업 영역 settings.json 파일에 필터와 함께 files.exclude 설정을 추가하십시오. 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 **Preferences: Open Workspace Settings (JSON)** 명령을 통해 작업 영역 settings.json을 열 수 있습니다.

.ts 및 .tsx 소스 파일 모두에서 생성된 JavaScript 파일을 제외하려면 이 식을 사용하십시오.

"files.exclude": {
    "**/*.js": { "when": "$(basename).ts" },
    "**/**.js": { "when": "$(basename).tsx" }
}

이것은 약간의 트릭입니다. 검색 glob 패턴이 키로 사용됩니다. 위의 설정은 두 개의 다른 glob 패턴을 사용하여 두 개의 고유한 키를 제공하지만 검색은 동일한 파일을 일치시킵니다.

최신 TypeScript 버전 사용

VS Code는 TypeScript 언어 서비스의 최신 안정 버전을 제공하며 기본적으로 작업 영역에서 IntelliSense를 제공하기 위해 이를 사용합니다. TypeScript의 작업 영역 버전은 *.ts 파일을 컴파일하는 데 사용하는 TypeScript 버전과 독립적입니다. 대부분의 일반적인 경우 IntelliSense를 위해 VS Code의 내장 TypeScript 버전을 걱정 없이 사용할 수 있지만, 때로는 VS Code가 IntelliSense에 사용하는 TypeScript 버전을 변경해야 할 수도 있습니다.

이렇게 하는 이유는 다음과 같습니다.

  • TypeScript 야간 빌드(typescript@next)로 전환하여 최신 TypeScript 기능을 사용해 봅니다.
  • 코드를 컴파일하는 데 사용하는 TypeScript 버전과 IntelliSense에 사용하는 TypeScript 버전이 동일한지 확인합니다.

활성 TypeScript 버전 및 해당 설치 위치는 TypeScript 파일을 보면서 상태 표시줄에서 언어 상태 표시줄의 버전 번호를 고정한 경우 상태 표시줄에 표시될 수 있습니다.

TypeScript status bar version

작업 영역에서 TypeScript의 기본 버전을 변경하려면 몇 가지 옵션이 있습니다.

TypeScript의 작업 영역 버전 사용

작업 영역에 특정 TypeScript 버전이 있는 경우 TypeScript 또는 JavaScript 파일을 열고 상태 표시줄의 TypeScript 버전 번호를 클릭하여 VS Code 기본 버전과 작업 영역 버전을 전환할 수 있습니다. 메시지 상자가 나타나 VS Code가 어떤 TypeScript 버전을 사용해야 하는지 묻습니다.

TypeScript version selector

이를 사용하여 VS Code와 함께 제공되는 TypeScript 버전과 작업 영역의 TypeScript 버전 간에 전환할 수 있습니다. **TypeScript: Select TypeScript Version** 명령을 트리거하여 TypeScript 버전 선택기를 실행할 수도 있습니다.

VS Code는 작업 영역 루트의 node_modules 아래에 설치된 작업 영역 TypeScript 버전을 자동으로 감지합니다. 사용자 또는 작업 영역 설정에서 typescript.tsdk를 구성하여 VS Code에 사용할 TypeScript 버전을 명시적으로 지시할 수도 있습니다. typescript.tsdk 설정은 TypeScript tsserver.js 파일이 포함된 디렉토리를 가리켜야 합니다. npm list -g typescript를 사용하여 TypeScript 설치 위치를 찾을 수 있습니다. tsserver.js 파일은 일반적으로 lib 폴더에 있습니다.

예를 들어,

{
  "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
}

팁: 특정 TypeScript 버전을 얻으려면 npm 설치 중에 @version을 지정하십시오. 예를 들어, TypeScript 3.6.0의 경우 npm install --save-dev typescript@3.6.0을 사용합니다. TypeScript의 다음 버전을 미리 보려면 npm install --save-dev typescript@next를 실행하십시오.

이러한 예에서 typescript.tsdk는 typescript 내의 lib 디렉토리를 가리키지만, typescript 디렉토리는 TypeScript package.json 파일을 포함하는 전체 TypeScript 설치여야 한다는 점에 유의하십시오.

특정 작업 영역에서 특정 TypeScript 버전을 사용하도록 VS Code에 지시할 수도 있습니다. tsserver.js 파일의 디렉토리를 가리키는 typescript.tsdk 작업 영역 설정을 추가합니다.

{
  "typescript.tsdk": "./node_modules/typescript/lib"
}

typescript.tsdk 작업 영역 설정은 작업 영역 버전의 TypeScript가 존재한다는 것만 VS Code에 알립니다. IntelliSense에 작업 영역 버전을 실제로 사용하려면 **TypeScript: Select TypeScript Version** 명령을 실행하고 작업 영역 버전을 선택해야 합니다.

TypeScript 야간 빌드 사용

VS Code에서 최신 TypeScript 기능을 사용해 보는 가장 쉬운 방법은 JavaScript 및 TypeScript Nightly 확장을 설치하는 것입니다.

이 확장은 VS Code의 내장 TypeScript 버전을 최신 TypeScript 야간 빌드로 자동 교체합니다. **TypeScript: Select TypeScript Version** 명령으로 TypeScript 버전을 구성한 경우 VS Code의 TypeScript 버전을 사용하도록 다시 전환해야 합니다.

혼합 TypeScript 및 JavaScript 프로젝트

TypeScript 및 JavaScript가 혼합된 프로젝트를 가질 수 있습니다. TypeScript 프로젝트 내에서 JavaScript를 사용하려면 tsconfig.json에서 allowJs 속성을 true로 설정할 수 있습니다.

팁: tsc 컴파일러는 jsconfig.json 파일의 존재를 자동으로 감지하지 않습니다. tsc가 jsconfig.json 파일을 사용하도록 하려면 -p 인수를 사용하십시오. 예: tsc -p jsconfig.json.

대규모 프로젝트 작업

수백 또는 수천 개의 TypeScript 파일이 있는 코드베이스에서 작업하는 경우 VS Code의 편집 환경과 명령줄의 컴파일 시간을 모두 개선하기 위해 취할 수 있는 몇 가지 단계가 있습니다.

tsconfig가 관심 있는 파일만 포함하도록 하십시오.

프로젝트의 tsconfig.json에서 include 또는 files를 사용하여 프로젝트가 프로젝트의 일부여야 하는 파일만 포함하도록 하십시오.

프로젝트의 tsconfig.json 구성에 대한 추가 정보.

프로젝트를 프로젝트 참조로 분할

소스 코드를 단일 대규모 프로젝트로 구성하는 대신 프로젝트 참조를 사용하여 더 작은 프로젝트로 분할하여 성능을 향상시킬 수 있습니다. 이를 통해 TypeScript는 전체 코드를 로드하는 대신 한 번에 코드베이스의 하위 집합만 로드할 수 있습니다.

프로젝트 참조를 사용하는 방법과 이를 사용하는 모범 사례에 대한 자세한 내용은 TypeScript 설명서를 참조하십시오.

다음 단계

자세한 내용은 계속 읽어보세요.

자주 묻는 질문

TypeScript "외부 모듈을 컴파일할 수 없습니다" 오류를 어떻게 해결하나요?

해당 오류가 발생하면 프로젝트의 루트 폴더에 tsconfig.json 파일을 만들어 해결하십시오. tsconfig.json 파일은 Visual Studio Code가 TypeScript 코드를 컴파일하는 방법을 제어할 수 있도록 합니다. 자세한 내용은 tsconfig.json 개요를 참조하십시오.

VS Code에서 컴파일할 때 TypeScript 프로젝트를 컴파일할 때와 다른 오류 및 경고가 발생하는 이유는 무엇입니까?

VS Code는 TypeScript 언어 서비스의 최신 안정 버전을 제공하며, 컴퓨터에 전역적으로 설치된 TypeScript 버전 또는 작업 영역에 로컬로 설치된 버전과 일치하지 않을 수 있습니다. 이로 인해 컴파일러 출력과 활성 TypeScript 언어 서비스에서 감지된 오류 간에 차이가 있을 수 있습니다. 일치하는 TypeScript 버전을 설치하는 방법에 대한 자세한 내용은 최신 TypeScript 버전 사용을 참조하십시오.

VS 2022와 함께 제공되는 TypeScript 버전을 사용할 수 있습니까?

아니요, Visual Studio 2019 및 2022와 함께 제공되는 TypeScript 언어 서비스는 VS Code와 호환되지 않습니다. npm에서 별도의 TypeScript 버전을 설치해야 합니다.

일부 오류가 경고로 보고되는 이유는 무엇입니까?

기본적으로 VS Code TypeScript는 코드 스타일 문제를 오류 대신 경고로 표시합니다. 다음 항목에 적용됩니다.

  • 선언되었지만 사용되지 않는 변수
  • 선언되었지만 해당 값이 읽히지 않는 속성
  • 실행할 수 없는 코드 감지됨
  • 사용되지 않는 레이블
  • switch 문의 fall through case
  • 모든 코드 경로가 값을 반환하지 않음

이러한 항목을 경고로 처리하는 것은 TSLint와 같은 다른 도구와 일관됩니다. 명령줄에서 tsc를 실행하면 이러한 항목이 오류로 표시됩니다.

사용자 설정에서 "typescript.reportStyleChecksAsWarnings": false를 설정하여 이 동작을 비활성화할 수 있습니다.

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