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

Visual Studio Code의 TypeScript

TypeScript는 일반 JavaScript로 컴파일되는 JavaScript의 형식화된 슈퍼셋입니다. 클래스, 모듈, 인터페이스를 제공하여 강력한 구성 요소를 구축하는 데 도움을 줍니다.

Working with TypeScript in Visual Studio Code

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

또 다른 옵션은 TypeScript 컴파일러를 프로젝트에 로컬로 설치하는 것입니다 (npm install --save-dev typescript). 이렇게 하면 다른 TypeScript 프로젝트와의 잠재적인 상호 작용을 피할 수 있다는 장점이 있습니다.

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

IntelliSense는 지능형 코드 완성, 호버 정보, 시그니처 도움말을 제공하여 코드를 더 빠르고 정확하게 작성할 수 있도록 합니다.

TypeScript small completions for String type

VS Code는 개별 TypeScript 파일뿐만 아니라 TypeScript tsconfig.json 프로젝트에 대해서도 IntelliSense를 제공합니다.

호버 정보

TypeScript 기호를 호버하여 타입 정보와 관련 문서를 빠르게 볼 수 있습니다.

Hover for a lodash function

⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) 키보드 단축키를 사용하여 현재 커서 위치에서 호버 정보를 표시할 수도 있습니다. (⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I))

시그니처 도움말

TypeScript 함수 호출을 작성할 때 VS Code는 함수 시그니처에 대한 정보를 표시하고 현재 완료 중인 매개변수를 강조 표시합니다.

Signature help for the lodash capitalize function

함수 호출 내에서 ( 또는 ,를 입력하면 시그니처 도움말이 자동으로 표시됩니다. ⇧⌘Space (Windows, Linux Ctrl+Shift+Space) 키보드 단축키를 사용하여 수동으로 시그니처 도움말을 트리거할 수 있습니다. (⇧⌘Space (Windows, Linux Ctrl+Shift+Space))

코드 조각

스마트 코드 완성 외에도 VS Code에는 입력 시 제안되는 기본적인 TypeScript 스니펫이 포함되어 있습니다.

TypeScript 'for' snippet suggestions

확장을 설치하여 추가 스니펫을 얻거나 TypeScript에 대한 사용자 정의 스니펫을 정의할 수 있습니다. 자세한 내용은 사용자 정의 스니펫을 참조하십시오.

팁: "none"으로 설정 파일의 editor.snippetSuggestions을 설정하여 스니펫을 비활성화할 수 있습니다. 스니펫을 보고 싶다면 제안과 상대적인 순서를 지정할 수 있습니다. 상단("top"), 하단("bottom"), 또는 알파벳순으로 인라인("inline")으로 표시됩니다. 기본값은 "inline"입니다.

오류 및 경고

TypeScript 언어 서비스는 코딩 문제를 분석하고 오류 및 경고를 보고합니다.

  • 상태 표시줄에는 모든 오류 및 경고 수의 요약이 표시됩니다.
  • 요약을 클릭하거나 ⇧⌘M (Windows, Linux Ctrl+Shift+M) 키보드 단축키를 눌러 문제 패널을 표시하고 현재 오류 목록을 볼 수 있습니다. (⇧⌘M (Windows, Linux Ctrl+Shift+M))
  • 오류나 경고가 있는 파일을 열면 텍스트 내와 개요 눈금자에 렌더링됩니다.

Error in the editor and Problems panel

현재 파일에서 오류나 경고를 순환하려면 F8 또는 ⇧F8 (Windows, Linux Shift+F8) 키를 누르면 됩니다. 이렇게 하면 문제와 가능한 코드 액션(사용 가능한 경우)을 자세히 설명하는 인라인 영역이 표시됩니다. (F8 또는 ⇧F8 (Windows, Linux Shift+F8))

Error inline in the editor

코드 탐색

코드 탐색 기능을 통해 TypeScript 프로젝트를 빠르게 탐색할 수 있습니다.

  • 정의로 이동 F12 - 기호 정의의 소스 코드로 이동합니다.
  • 정의 보기 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - 기호 정의를 보여주는 보기 창을 엽니다.
  • 참조로 이동 ⇧F12 (Windows, Linux Shift+F12) - 기호에 대한 모든 참조를 표시합니다.
  • 타입 정의로 이동 - 기호를 정의하는 타입으로 이동합니다. 클래스 인스턴스의 경우 인스턴스가 정의된 위치가 아닌 클래스 자체를 표시합니다.
  • 구현으로 이동 ⌘F12 (Windows, Linux Ctrl+F12) - 인터페이스 또는 추상 메서드의 구현으로 이동합니다.

기호로 이동 명령을 사용하여 기호 검색을 통해 탐색할 수 있습니다. 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서.

  • 파일 내 기호로 이동 ⇧⌘O (Windows, Linux Ctrl+Shift+O)
  • 작업 영역 내 기호로 이동 ⌘T (Windows, Linux Ctrl+T)

서식

VS Code에는 합리적인 기본값으로 기본적인 코드 서식을 제공하는 TypeScript 서식 지정 기능이 포함되어 있습니다.

typescript.format.* 설정을 사용하여 중괄호를 자체 줄에 표시하는 등 내장 서식 지정 기능을 구성할 수 있습니다. 또는 내장 서식 지정 기능이 방해가 된다면 "typescript.format.enable"을 false로 설정하여 비활성화하십시오.

더 전문적인 코드 서식 스타일을 원하시면 VS Code Marketplace에서 서식 지정 확장 프로그램을 설치해 보세요.

리팩터링

VS Code에는 함수 추출 및 상수 추출과 같은 유용한 TypeScript 리팩터링 기능이 포함되어 있습니다. 추출하려는 소스 코드를 선택한 다음, 여백의 전구 아이콘을 클릭하거나 ⌘. (Windows, Linux Ctrl+.) 키보드 단축키를 눌러 사용 가능한 리팩터링을 확인하세요. (⌘. (Windows, Linux Ctrl+.))

TypeScript refactoring

리팩터링 및 개별 리팩터링에 대한 키보드 단축키 구성 방법에 대한 자세한 내용은 TypeScript 리팩터링을 참조하십시오.

이름 변경

가장 간단한 리팩터링 중 하나는 메서드 또는 변수 이름을 바꾸는 것입니다. F2 키를 눌러 커서 아래의 기호를 TypeScript 프로젝트 전체에서 이름 바꿀 수 있습니다. (F2)

Renaming a method

디버깅

VS Code는 소스맵 지원을 포함하여 TypeScript에 대한 훌륭한 디버깅 지원을 제공합니다. 중단점을 설정하고, 개체를 검사하고, 호출 스택을 탐색하고, 디버그 콘솔에서 코드를 실행할 수 있습니다. 자세한 내용은 TypeScript 디버깅 및 전체 디버깅 주제를 참조하십시오.

클라이언트 측 디버깅

내장된 Edge 및 Chrome 디버거 또는 Firefox 디버거와 같은 브라우저 디버거를 사용하여 클라이언트 측 코드를 디버그할 수 있습니다. (내장 Edge 및 Chrome 디버거)

서버 측 디버깅

내장 디버거를 사용하여 VS Code에서 Node.js를 디버그합니다. 설정이 간단하며 도움을 줄 수 있는 Node.js 디버깅 튜토리얼이 있습니다.

debug data inspection

린터

Linter는 의심스러운 코드를 검사하여 경고를 제공합니다. VS Code에는 내장 TypeScript 린터가 없지만, TypeScript 린터 확장 프로그램은 Marketplace에서 사용할 수 있습니다.

ESLint는 TypeScript도 지원하는 인기 있는 린터입니다. ESLint 확장 프로그램은 ESLint를 VS Code에 통합하여 편집기에서 바로 린팅 오류를 확인하고 많은 오류를 빠른 수정으로 신속하게 수정할 수 있습니다. ESLint 플러그인 가이드는 TypeScript 프로젝트에 대한 ESLint를 구성하는 방법을 자세히 설명합니다.

TypeScript 확장

VS Code는 기본적으로 TypeScript를 위한 많은 기능을 제공합니다. 내장된 기능 외에도 더 많은 기능을 위해 확장을 설치할 수 있습니다.

팁: 위에 있는 확장 프로그램 타일을 클릭하여 설명과 리뷰를 읽고 자신에게 가장 적합한 확장을 결정하세요. Marketplace에서 더 많은 정보를 확인하세요.

다음 단계

자세히 알아보려면 다음을 참조하세요.

자주 묻는 질문

VS 2022와 함께 제공되는 TypeScript 버전을 사용할 수 있나요?

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

최신 TypeScript 베타를 VS Code에서 사용하려면 어떻게 해야 하나요?

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

VS Code를 특정 TypeScript 버전으로 구성할 수도 있습니다.

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