Type Script 디버깅을 수행하기 전에 vscode에서 F5 키를 누릅니다.

Type Script 디버깅을 수행하기 전에 vscode에서 F5 키를 누릅니다.
하고 싶은 일

vscode를 통한 Type Script 개발 환경 구축

F5(F5+Ctrl)를 눌러 디버깅(실행)

하지 않는 일

Type Script 변압기의 사용자 정의.단, 디버깅 실행과 관련된 것은 제외됩니다.

디버깅과 같은 맞춤형 구성 수행

tasks.json, settings.json, launch.제작 json

eslint,prettier 가져오기

전제 조건

창에서 실시

vscode

설치

node.js 설치

node.js의 설치 참조Windows에 NodeJS 설치

릴리즈
vscode 버전은 1.63.2입니다.

node --version
v16.13.1

절차.
1. 명령줄에서 전송, node로 실행
1-1. 적당한 폴더를 만들고 vscode로 열기
여기는 프로젝트입니다.folder 생성
1-2. tsc 설치

PS C:\project_folder> npm install typescript

프로젝트folder 이하 nodemodule 폴더를 만들었는지 확인
1-3. tsc 설치 확인

PS C:\project_folder> .\node_modules\.bin\tsc --version
Version 4.5.4

1-4. 적당한 코드를 쓰다
project_folder 아래에서 파일을 만들고 적당한 코드를 작성합니다. (여기 "hello.ts"파일을 만듭니다.)
hello.ts

class User {
    private name: string;
    constructor(name: string) {
        this.name = name;
    }

    public SayHello = () => {
        console.log("Hello,", this.name);
    };
}

const u = new User("やまだたろう");
u.SayHello();

1-5. 변압기

PS project_folder> .\node_modules\.bin\tsc ./hello.ts

실행 후, Hello.ts와 같은 폴더에 hello입니다.제이스 제작을 확인했습니다.
1-6. 규정에 따라 집행하지 않다

PS project_folder> node hello.js
Hello, やまだたろう

2. F5(F5+Ctrl)를 사용하여 디버깅 수행
2-1. tsconfig.json 만들기
전송 시 디버그 실행에 필요한 SourceMap 출력
프로젝트folder 아래 tsconfig.제이슨 제작을 확인했습니다.

PS project_folder> .\node_modules\.bin\tsc --init

Created a new tsconfig.json with:                                                                                       
                                                                                                                     TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig.json

2-2. tsconfig.json 수정
"sourceMap"에서 시작하는 행의 주석 삭제

//修正前
    //"sourceMap": true,  
//修正後
    "sourceMap": true,  

2-3. 변압기
tsc 명령으로 파일을 지정하면 tsconfig입니다.json에서 읽을 수 없는 모양이기 때문에 다음 명령으로 실행합니다
프로젝트folder 이하 hello.파일과 Hello.js.맵 파일이 생성되었는지 확인

PS project_folder> .\node_modules\.bin\tsc -p tsconfig.json

2-4. 디버그 실행
hello.ts 열기
hello.ts의 적당한 위치에서 인터럽트를 설정하고 F5 키를 누르십시오
환경 선택을 표시할 때는 node입니다.js 선택

향후 추진 방법
전송할 때 js 파일의 출력 목적지 등→tsconfig를 변경하려고 합니다.변경 json
실행하기 전에 자동으로 궤도를 바꾸려고 합니다 → launch.json, tasks.만들다
실행하고 싶은 사용자 정의 등→setting.만들다
코드 성형 등→prettier,eslint 가져오기