비주얼 스튜디오 코드에서 TypeScript를 사용하는 방법은?

Q1: 비주얼 스튜디오 코드(VS Code)에서 TypeScript 개발을 시작하려면 어떻게 하나요?
A1: VS Code를 설치한 후, Node.js가 설치되어 있는지 확인하세요. 그런 다음, 터미널에서 `npm install -g typescript` 명령어로 TypeScript 컴파일러(tsc)를 전역 설치합니다. VS Code에서 `.ts` 확장자 파일을 생성해 코드 작성이 가능합니다.

Q2: TypeScript 프로젝트를 VS Code에서 어떻게 설정하나요?
A2: 프로젝트 루트 폴더에서 `tsconfig.json` 파일을 생성하여 컴파일 옵션을 지정합니다. 터미널에서 `tsc --init` 명령어를 실행하면 기본 `tsconfig.json`이 생성되며, 이 파일을 통해 컴파일 대상, 모듈 시스템, strict 모드 등을 설정할 수 있습니다.

Q3: VS Code에서 TypeScript 자동완성 및 IntelliSense 기능을 사용하려면?
A3: VS Code는 내장된 TypeScript 언어 서버를 사용하여 자동완성, 오류 표시, 타입 검사 등을 지원합니다. 별도 플러그인 설치 없이 `.ts` 파일을 열면 자동으로 관련 기능이 활성화됩니다.

Q4: Typescript 코드를 실시간으로 컴파일하는 방법은?
A4: `tsconfig.json`에 `watch` 모드를 활성화하거나, 터미널에서 `tsc --watch` 명령어를 실행하면 코드 저장 시마다 자동으로 트랜스파일이 실행됩니다. 이를 통해 실시간 컴파일 결과를 확인할 수 있습니다.

Q5: 디버깅 TypeScript 코드를 VS Code에서 하려면?
A5: `launch.json` 파일을 생성해 디버거 설정을 추가합니다. Node.js 환경에서 실행할 경우 `"type": "node"`로 설정한 뒤 소스맵(sourcemap) 옵션을 활성화하면 TS 코드에서 직접 브레이크포인트 설정과 디버깅이 가능합니다.
Q6: 외부 라이브러리의 TypeScript 타입 정의를 추가하려면?
A6: 외부 JS 라이브러리를 사용할 때 타입을 제공하지 않는다면, DefinitelyTyped에서 관리하는 `@types` 패키지를 설치하세요. 예를 들어 `npm install --save-dev @types/lodash` 처럼 설치하면 됩니다.

Q7: VS Code에서 타입 오류를 빠르게 확인하려면?
A7: VS Code 하단의 문제 패널이나 코드 내 빨간 밑줄로 오류를 즉시 확인할 수 있습니다. 또한, `Ctrl + Shift + M` 단축키를 사용해 문제(Errors/Warnings) 창을 열 수 있습니다.

Q8: VS Code에 TypeScript 관련 플러그인이 필요한가요?
A8: 기본적으로 TypeScript 지원이 내장되어 있어 필수 플러그인은 없습니다. 다만, ESLint 같은 코드 규칙 검사, Prettier 같은 코드 포맷터를 사용하면 개발 효율성을 높일 수 있습니다.

Q9: TypeScript 버전을 VS Code에서 어떻게 변경하나요?
A9: VS Code 좌측 하단 상태바에서 현재 사용 중인 TypeScript 버전 번호를 클릭하면 설치된 다른 버전으로 전환할 수 있습니다. 로컬 프로젝트에 설치된 특정 버전을 사용하도록 설정도 가능합니다.

Q10: VS Code에서 TypeScript와 JavaScript를 함께 사용하는 방법은?
A10: `tsconfig.json`에서 `"allowJs": true` 옵션을 추가하면 프로젝트 내 JS 파일도 함께 컴파일 대상이 됩니다. VS Code는 TypeScript와 JS 파일 모두에서 IntelliSense와 타입 지원 기능을 제공합니다.

Visual Studio Code(이하 VSCode)는 TypeScript 개발을 위한 강력한 IDE입니다.

TypeScript는 JavaScript의 상위 집합으로, 정적 타입을 지원하여 코드의 안정성과 가독성을 높여줍니다.

VSCode에서 TypeScript를 사용하는 방법에 대해 단계별로 설명하겠습니다.

1. VSCode 설치 먼저, VSCode를 설치해야 합니다.

[VSCode 공식 웹사이트](https://code.visualstudio.com/)에서 운영 체제에 맞는 설치 파일을 다운로드하고 설치합니다.



2. Node.js 및 TypeScript 설치 TypeScript를 사용하기 위해 Node.js가 필요합니다.

Node.js는 JavaScript 런타임으로, TypeScript 컴파일러를 설치하는 데 사용됩니다.

1. [Node.js 공식 웹사이트](https://nodejs.org/)에서 LTS 버전을 다운로드하고 설치합니다.



2. 설치가 완료되면, 터미널(명령 프롬프트 또는 PowerShell)을 열고 다음 명령어를 입력하여 Node.js와 npm이 제대로 설치되었는지 확인합니다.

```bash node -v npm -v ```

3. TypeScript를 전역으로 설치합니다.

다음 명령어를 입력합니다.

```bash npm install -g typescript ```

4. TypeScript가 제대로 설치되었는지 확인합니다.

```bash tsc -v ```

3. VSCode에서 TypeScript 프로젝트 생성 1. 새로운 프로젝트 폴더를 생성합니다.

예를 들어, `my-typescript-project`라는 폴더를 생성합니다.



2. VSCode를 열고, `File -> Open Folder`를 선택하여 생성한 폴더를 엽니다.



3. 터미널을 열고(단축키: `` Ctrl + ` ``) 다음 명령어를 입력하여 `package.json` 파일을 생성합니다.

```bash npm init -y ```

4. TypeScript 설정 파일인 `tsconfig.json`을 생성합니다.

다음 명령어를 입력하여 기본 설정을 생성합니다.

```bash tsc --init ```

4. TypeScript 코드 작성 1. VSCode에서 `src`라는 폴더를 생성하고, 그 안에 `index.ts`라는 파일을 생성합니다.



2. `index.ts` 파일에 TypeScript 코드를 작성합니다.

예를 들어: ```typescript function greet(name: string): string { return `Hello, ${name}!`; } const user = "World"; console.log(greet(user)); ```

5. TypeScript 코드 컴파일 TypeScript 코드를 JavaScript로 컴파일하려면, 터미널에서 다음 명령어를 입력합니다.

```bash tsc ``` 이 명령어를 실행하면 `src` 폴더 내의 모든 `.ts` 파일이 컴파일되어 같은 위치에 `.js` 파일이 생성됩니다.



6. JavaScript 코드 실행 TypeScript로 작성한 코드를 JavaScript로 변환한 후, Node.js를 사용하여 실행할 수 있습니다.

다음 명령어를 입력하여 `index.js` 파일을 실행합니다.

```bash node src/index.js ```

7. VSCode 확장 프로그램 설치 VSCode는 TypeScript 개발을 위한 다양한 확장 프로그램을 제공합니다.

다음과 같은 확장을 설치하면 개발 효율을 높일 수 있습니다.

- ESLint : 코드 품질을 유지하는 데 도움을 주는 정적 분석 도구입니다.

- Prettier : 코드 포맷팅 도구로, 일관된 코드 스타일을 유지하는 데 유용합니다.

- TypeScript Hero : TypeScript 개발을 위한 다양한 기능을 제공하는 확장입니다.



8. 자동 컴파일 설정 TypeScript 코드를 수정할 때마다 수동으로 컴파일하는 것은 번거로울 수 있습니다.

이를 해결하기 위해 `tsc` 명령어에 `--watch` 플래그를 추가하여 자동으로 컴파일하도록 설정할 수 있습니다.

```bash tsc --watch ``` 이 명령어를 실행하면 TypeScript 컴파일러가 파일 변경을 감지하고 자동으로 컴파일을 수행합니다.



9. 디버깅 설정 VSCode는 TypeScript 코드를 디버깅할 수 있는 강력한 기능을 제공합니다.

다음과 같은 설정을 통해 디버깅을 할 수 있습니다.

1. VSCode의 왼쪽 사이드바에서 "Run and Debug" 아이콘을 클릭합니다.



2. "create a launch.json file"을 선택하고, "Node.js"를 선택합니다.



3. 생성된 `launch.json` 파일에서 `program` 경로를 `src/index.js`로 설정합니다.

이제 디버깅을 시작할 준비가 되었습니다.

F5 키를 눌러 디버깅을 시작할 수 있습니다.



10. 이제 VSCode에서 TypeScript를 사용하는 기본적인 방법을 익혔습니다.

TypeScript는 JavaScript의 강력한 기능을 확장하며, VSCode는 이를 위한 훌륭한 개발 환경을 제공합니다.

프로젝트의 규모가 커질수록 TypeScript의 타입 시스템과 VSCode의 다양한 기능들이 큰 도움이 될 것입니다.