Visual Studio Code로 TypeScript 설정하기

Visual Studio Code(VSCode)는 TypeScript 개발에 대한 탁월한 지원을 제공하는 강력하고 인기 있는 코드 편집기입니다. 이 가이드는 VSCode에서 TypeScript를 설정하는 단계를 안내하여 효과적으로 코딩을 시작하는 데 필요한 모든 것을 갖추도록 합니다.

Visual Studio Code 설치

아직 Visual Studio Code를 설치하지 않았다면 다음 단계를 따르세요.

공식 VSCode 웹사이트로 가세요.
운영체제에 맞는 설치 프로그램을 다운로드하세요.
설치 프로그램을 실행하고 화면의 지시에 따라 설치를 완료하세요.

Node.js 및 npm 설치

TypeScript는 Node.js가 필요한 npm(Node Package Manager)을 통해 관리됩니다. Node.js와 npm을 설치하려면:

공식 Node.js 웹사이트를 방문하세요.
npm이 포함된 Node.js LTS 버전을 다운로드하여 설치하세요.
터미널을 열고 node -v과 npm -v을 실행하여 Node.js와 npm의 버전을 확인하여 설치를 확인하세요.

TypeScript 설치

Node.js와 npm이 설치되었으므로 이제 전역적으로 TypeScript를 설치할 수 있습니다. 터미널을 열고 다음 명령을 실행합니다.

npm install -g typescript

이 명령은 TypeScript를 전역적으로 설치하므로 tsc 명령을 사용하여 시스템의 어디에서나 TypeScript 파일을 컴파일할 수 있습니다.

TypeScript 프로젝트 설정

새로운 TypeScript 프로젝트를 시작하려면 다음 단계를 따르세요.

프로젝트에 대한 새 디렉토리를 만들고 해당 디렉토리로 이동합니다.

mkdir my-typescript-project
cd my-typescript-project

새로운 npm 프로젝트를 초기화합니다.

npm init -y

개발 종속성으로 TypeScript를 설치합니다.

npm install --save-dev typescript

TypeScript 구성 파일을 생성합니다.

npx tsc --init

이 명령은 TypeScript 컴파일러에 대한 구성 설정을 포함하는 tsconfig.json 파일을 프로젝트 디렉토리에 생성합니다.

TypeScript를 위한 VSCode 구성

VSCode에는 TypeScript 지원이 기본 제공되지만 편집기를 구성하여 개발 경험을 더욱 향상시킬 수 있습니다.

프로젝트 열기

VSCode에서 TypeScript 프로젝트를 엽니다.

VSCode를 실행합니다.
파일 > 폴더 열기...를 선택하고 프로젝트 디렉토리를 선택합니다.

TypeScript 확장 프로그램 설치

VSCode는 기본적으로 뛰어난 TypeScript 지원을 제공하지만, 기능을 향상시키기 위해 추가 확장 기능을 설치할 수 있습니다.

TypeScript 확장: TypeScript 언어 지원과 IntelliSense, 코드 탐색 등의 기능을 제공합니다.
Prettier: 일관된 코드 스타일을 보장하는 코드 서식 지정 확장 기능입니다.

TypeScript 컴파일러 구성

tsconfig.json 파일을 열어 TypeScript 컴파일러 설정을 구성합니다. 다음은 구성 예입니다.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

이 구성은 대상 ECMAScript 버전을 ES6으로 설정하고, CommonJS 모듈 형식을 지정하고, 엄격한 유형 검사를 활성화하고, 출력 디렉토리를 ./dist로 설정합니다. 또한 디버깅을 더 쉽게 하기 위해 소스 맵도 포함합니다.

TypeScript 코드 작성 및 실행

src 디렉토리에 새 TypeScript 파일을 만듭니다.

mkdir src
touch src/index.ts

index.ts에 TypeScript 코드를 추가합니다.

const message: string = "Hello, TypeScript!";
console.log(message);

TypeScript 코드를 컴파일하려면 다음을 실행하세요.

npx tsc

이 명령은 TypeScript 파일을 컴파일하고 JavaScript 파일을 dist 디렉토리에 출력합니다.

컴파일된 JavaScript 코드를 실행하려면 다음을 사용하세요.

node dist/index.js

결론

Visual Studio Code로 TypeScript를 설정하는 것은 필요한 도구를 설치하고, 프로젝트를 구성하고, VSCode의 강력한 기능을 사용하는 간단한 프로세스입니다. 이 가이드를 따르면 완벽하게 작동하는 TypeScript 개발 환경이 생기고 TypeScript로 강력한 애플리케이션을 빌드할 준비가 됩니다.

타입스크립트 비주얼 스튜디오 코드 설정 노드js npm 구성 프로젝트 tsconfig 확장 컴파일러 소스 맵 코드 디버깅 타입스크립트 확장