Typescript 동작 확인

Visual Studio Code 설치

· 공식에서 다운로드하여 설치
htps : // 여기.ゔぃすあ lsつぢお。 코m/

・일본어 설정
1. 'Command Palette' 열기
메뉴 바에서 View > Command Palette를 클릭하거나 Ctrl+Shift+P를 누릅니다.

2. "Configure Display Language"를 선택
Command Palette에 Configure Display Language를 입력하고 클릭


3. "Install additional languages"를 선택
Configure Display Language를 클릭하여 표시되는 Install additional languages를 클릭합니다.


4. "Japanese Language Pack for Visual Studio Code"설치


5. 재기동하여 일본어로 되어 있는지 확인

Node.js 설치

· 공식에서 다운로드하여 설치
htps : // 그래서 js. 오 rg/엔/

1. 설치 확인
Node.js command prompt에 node --version을 입력하고 버전이 표시되면 OK
"Node.js command prompt"는 작업 표시줄에서 검색하면 나온다

TypeScript 설치

1. 명령 프롬프트에 "npm install -g typescript"를 입력하고 실행


2. 설치 확인
명령 프롬프트에 "tsc-v"를 입력하고 버전이 표시되면 OK

동작 확인

1. 소스 저장용 폴더 만들기


2. "tsconfig.json"파일 만들기
만든 폴더의 디렉토리로 이동하여
명령 프롬프트에 tsc -init을 입력하여 tsconfig.json 파일을 만듭니다.


2.TypeScript 파일 만들기
작성한 소스 보존용 폴더 바로 아래에 파일명 「samole.ts」로 작성(typescript의 확장자는 「.ts」)


3.TypeScript 파일을 컴파일(실행 가능한 파일로 한다)
명령 프롬프트에 tsc를 입력하고 컴파일

컴파일 성공으로 JavaScript 파일 생성


4. 파일 실행
명령 프롬프트에 "node sample.js"를 입력하고 TypeScript 파일에 설명한 "test"가 표시되면 OK

동작 확인 2

1. 소스 저장용 폴더 만들기
2. "tsconfig.json""package.json"파일 만들기
만든 소스 저장 폴더로 이동합니다.
명령 프롬프트에 tsc -init를 입력하여 tsconfig.json 파일을 만듭니다.
명령 프롬프트에 npm init -y를 입력하여 package.json 파일을 만듭니다.

3. "tsconfig.json"파일 수정
"sourceMap": true의 주석(//) 제거

tsconfig.json

{
  "compilerOptions": {
    // ... 略 ...

    /* Emit */
    // "declaration": true,            /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    // "declarationMap": true,         /* Create sourcemaps for d.ts files. */
    // "emitDeclarationOnly": true,    /* Only output d.ts files and not JavaScript files. */
    "sourceMap": true,                 /* Create source map files for emitted JavaScript files. */

    // ... 略 ...
  }
}

4. "tasks.json"파일 추가
VSCode 메뉴 터미널 > 기본 빌드 작업 구성을 선택한 후 tsc:빌드-tsconfig.json을 선택합니다.
아래의 "tasks.json"파일이 생성됩니다.

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "label": "tsc: ビルド - tsconfig.json"
        }
    ]
}

5. 'launch.json' 파일 추가
VSCode 메뉴 실행 > 구성 추가를 선택한 후 Node.js를 선택합니다.
아래의 "launch.json"파일이 생성됩니다.

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${file}"
        }
    ]
}

6.TypeScript 파일 만들기

sample.ts

let msg:string =  "test";
console.log(msg);

7. 디버그 실행
VSCode의 메뉴 「실행」>「디버그의 개시」(F5)로부터 디버그 실행해 동작하면 OK
설정한 브레이크 포인트의 위치에서 일시 정지하는 것도 확인