Typescript 동작 확인
12888 단어 TypeScriptVSCode
Visual Studio Code 설치
· 공식에서 다운로드하여 설치
htps : // 여기.ゔぃすあ lsつぢお。 코m/
・일본어 설정
1. 'Command Palette' 열기
메뉴 바에서 View > Command Palette를 클릭하거나 Ctrl+Shift+P를 누릅니다.
2. "Configure Display Language"를 선택
Command Palette에 Configure Display Language를 입력하고 클릭
![](https://s1.md5.ltd/image/43d0589ff0dd0b69fdd0e517ee6adbf8.png)
3. "Install additional languages"를 선택
Configure Display Language를 클릭하여 표시되는 Install additional languages를 클릭합니다.
![](https://s1.md5.ltd/image/11bc5f402e44cc627de40a2a42dbb067.png)
4. "Japanese Language Pack for Visual Studio Code"설치
![](https://s1.md5.ltd/image/628a9fce5e2d533f675fa1b6bf6e6f06.png)
5. 재기동하여 일본어로 되어 있는지 확인
![](https://s1.md5.ltd/image/7165597fcf4e2fabbdf358eb0f7f666e.png)
Node.js 설치
· 공식에서 다운로드하여 설치
htps : // 그래서 js. 오 rg/엔/
1. 설치 확인
Node.js command prompt에 node --version을 입력하고 버전이 표시되면 OK
"Node.js command prompt"는 작업 표시줄에서 검색하면 나온다
![](https://s1.md5.ltd/image/faf8940ef0ee30c007cd1e82f2914ef3.png)
TypeScript 설치
1. 명령 프롬프트에 "npm install -g typescript"를 입력하고 실행
![](https://s1.md5.ltd/image/cc73813ed1ff1b68d9d6ff2f361634b3.png)
2. 설치 확인
명령 프롬프트에 "tsc-v"를 입력하고 버전이 표시되면 OK
![](https://s1.md5.ltd/image/f29fe7ba3ae217542226bb98a8de1e5b.png)
동작 확인
1. 소스 저장용 폴더 만들기
![](https://s1.md5.ltd/image/729029edc127aa150b114b53e4372b00.png)
2. "tsconfig.json"파일 만들기
만든 폴더의 디렉토리로 이동하여
명령 프롬프트에 tsc -init을 입력하여 tsconfig.json 파일을 만듭니다.
![](https://s1.md5.ltd/image/d28c52f4955a64121b1101ceef5423d6.png)
2.TypeScript 파일 만들기
작성한 소스 보존용 폴더 바로 아래에 파일명 「samole.ts」로 작성(typescript의 확장자는 「.ts」)
![](https://s1.md5.ltd/image/0bd4155b769576e484ebe89b1733ea88.png)
3.TypeScript 파일을 컴파일(실행 가능한 파일로 한다)
명령 프롬프트에 tsc를 입력하고 컴파일
![](https://s1.md5.ltd/image/5cd6dcb0cb872038bfcbc4510891f627.png)
컴파일 성공으로 JavaScript 파일 생성
![](https://s1.md5.ltd/image/a9f7b295b319030fdb9287e7056b4f9d.png)
4. 파일 실행
명령 프롬프트에 "node sample.js"를 입력하고 TypeScript 파일에 설명한 "test"가 표시되면 OK
![](https://s1.md5.ltd/image/b479418b9a4b741bd2059baca1b48966.png)
동작 확인 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
설정한 브레이크 포인트의 위치에서 일시 정지하는 것도 확인
![](https://s1.md5.ltd/image/a685ce1a3c5264e63365d90784bae863.png)
Reference
이 문제에 관하여(Typescript 동작 확인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ishibe-m/items/af8762cd7eb9034c8273텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)