TypeScript 를 VsCode 로 편집 합 니 다.

TypeScript 는 자바 script 의 초 집합 으로 클래스, 모듈, 인 터 페 이 스 를 제공 하여 강력 한 구성 요 소 를 구축 하 는 데 도움 을 줍 니 다.이곳 에서 언어 규범 을 찾 을 수 있다.
VS Code 에서 TypeScript 는 두 가지 다른 모드 에서 실행 할 수 있 습 니 다.
파일 범위: 이 모드 에서 VsCode 에서 열 린 TypeScript 파일 은 독립 된 셀 로 간 주 됩 니 다.A. ts 가 b. ts (디 렉 터 리 나 추가 모듈 을 사용 / / 참조) 를 명확 하 게 인용 하지 않 으 면 두 파일 은 일반적인 항목 컨 텍스트 가 없습니다.
명시 적 항목: typescript 항목 은 tsconfig. json 을 통 해 정의 되 었 습 니 다.이 파일 은 ts 프로젝트 루트 디 렉 터 리 를 지정 하고 프로젝트 에 속 하 는 파일 과 컴 파일 옵션 을 보 여 줍 니 다.tsconfig. json 에 대한 자세 한 정보 입 니 다.
알림: 파일 범위 모드 대신 명시 적 항목 모드 를 사용 하 는 것 을 권장 합 니 다.하나의 항목 언어 에 속 하 는 모든 파일 을 표시 하기 때문에 모든 참조 Shift + F12 를 찾 을 때 항목 범위 만 파일 범위 가 아 닌 것 을 고려 합 니 다.
tsconfig.json
보통 새 항목 의 첫 번 째 단 계 는 tsconfig. json 파일 을 추가 하 는 것 입 니 다.컴 파일 옵션 과 포 함 된 파일 같은 ts 프로젝트 설정 을 정의 합 니 다.
이 를 위해 자원 을 저장 하고 싶 은 폴 더 에 tsconfig. json 이라는 파일 을 추가 합 니 다.그리고 지능 감 지 는 효력 이 발생 한다.
tsconfig. json 의 예 는 es5, comonJs 모듈, soumap 임 을 나타 낸다.

{    "compilerOptions": {        "target": "es5",        "module": "commonjs",        "sourceMap": true
    }
}

이제. ts 파일 을 프로젝트 의 일부분 으로 만 들 면 풍부 한 편집 체험 과 문법 검증 을 제공 할 것 입 니 다.
type: script 을 자 바스 크 립 트 로 변환
vscode 는 작업 실행 기 를 통 해 tsc 와 통합 되 었 습 니 다.우 리 는 이 도 구 를 사용 하여 ts 파일 을 js 파일 로 변환 할 수 있다.간단 한 type: script hello World 프로그램 을 찾 아 보 겠 습 니 다.
STEP 1: 간단 한 Ts 파일 만 들 기
빈 폴 더 에 vscode 를 열 고 helloworld. ts 파일 을 만 들 고 코드 를 파일 로 바 꿉 니 다.

class Startup {
    public static main(): number {
        console.log('Hello World');        return 0;
    }
}

Startup.main();

STEP 2: task. json 만 들 기
첫 번 째 단 계 는 task 설정 을 만 드 는 것 입 니 다. ctrl + shift + p 를 사용 하여 명령 팔레트 를 열 고 configure task Runner 를 입력 하고 리 턴 을 누 르 십시오.
템 플 릿 이 있 는 선택 상 자 를 보 여 줍 니 다.
type: script - tsconfig. json 을 선택 하 십시오.작업 영역. vscode 폴 더 에 tasks. json 파일 을 만 듭 니 다.
task. json 파일 내용 이 이렇게 보 입 니 다:

{    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",    "command": "tsc",    "isShellCommand": true,    "args": ["-p", "."],    "showOutput": "silent",    "problemMatcher": "$tsc"}

알림: 템 플 릿 은 유 니 버 설 설정 을 만 드 는 데 도움 이 되 지만 스마트 알림 도 task. json 파일 에 유효 합 니 다.ctrl + space 를 사용 하면 사용 가능 한 설정 을 볼 수 있 습 니 다.
표지 아래 에서, 우 리 는 tsc 를 외부 작업 실행 기로 사용 합 니 다. 이것 은 하나의 작업 만 노출 합 니 다. typescript 을 javascript 파일 로 컴 파일 합 니 다.명령 은: tsc - p.
팁: typescript 컴 파일 러 를 설치 하지 않 았 다 면 이것 을 클릭 할 수 있 습 니 다.
STEP 3: 구축 작업 실행
이것 은 파일 의 유일한 작업 이기 때문에 ctrl + shift + b (구축 작업 실행) 를 누 르 면 실행 할 수 있 습 니 다.이와 동시에 파일 목록 에 추가 helloword. js 파일 을 보 여 줍 니 다.
이 type: script 파일 은 컴 파일 에 문제 가 없 기 때문에 hello World. js 와 hello World. js. map 파일 이 만 들 어 졌 습 니 다.
node. js 가 설치 되 어 있 으 면 hello World 예 를 들 어 터미널 을 열 고 실행 할 수 있 습 니 다.

node HelloWorld.js

 
알림: 이 프로그램 을 실행 할 수 있 습 니 다. vscode 의 실행 / 디 버 깅 기능 을 사용 할 수 있 습 니 다. vscode 에서 실행 하고 디 버 깅 node 응용 에 대한 자세 한 내용 은 여기 서 볼 수 있 습 니 다.
STEP 4: 구축 문제 회고
불행 하 게 도 대부분의 build 는 순 조 롭 지 않 았 고 결 과 는 보통 추가 적 인 정 보 를 가지 고 있 었 다.예 를 들 어 type: script 파일 에 오류 가 있 으 면 tsc 에서 다음 출력 을 얻 을 수 있 습 니 다.

HelloWorld.ts(3,17): error TS2339: Property 'logg' does not exist on type 'Console'.

 
이것 은 출력 창 에 표 시 됩 니 다. (ctrl + shift + u 로 열 수 있 습 니 다) 이 출력 을 분석 한 다음 작업 표시 줄 에 이 문 제 를 강조 합 니 다.
너 는 그 아이콘 을 클릭 해서 문제 목록 을 얻 고 그들 을 찾 을 수 있다.
이 목록 을 단축 키 cril + shift + m 로 열 수 있 습 니 다.
팁: 많은 풍부 한 행동 에 지원 하 는 작업 입 니 다.그들 을 어떻게 설정 하 는 지 에 대한 더 많은 정 보 는 '작업' 화 제 를 보십시오.
점프 마크 & 모든 태그 보 여주 기
 ctrl + shift + o: 현재 열 리 고 탐색 할 수 있 는 모든 정의 기 호 를 보 여 줍 니 다.
ctrl + T: 현재 항목 이나 파일 범위 에 정 의 된 모든 표 시 를 검색 합 니 다.편집기 에 typescript 파일 이 열 려 있어 야 합 니 다.
포맷 코드
shift + alt + f: 전체 문 서 를 포맷 합 니 다.ctrl + k ctrl + f: 현재 선택 한 자원 코드 를 포맷 합 니 다.
 JSDoc 지지 하 다.
VsCode 는 typescript 에 대한 JSdoc 지원 을 제공 합 니 다.문법 색 을 칠 하 는 것 외 에 도 우 리 는 당신 이 JsDoc 주석 을 입력 하 는 것 을 도 울 것 입 니 다.입력 / * * 그 는 자동 으로 끝 자 를 삽입 합 니 다 * / jsDoc 블록 에 리 턴 을 입력 하면 다음 줄 로 들 어가 자동 으로 삽입 합 니 다 *.
JavaScript 소스 맵 지원
typescript 디 버 깅 은 JavaScript source map 를 지원 합 니 다. 프로젝트 실행 프로필 launch. json 에서 sourceMaps true 로 설정 합 니 다.또한, type: script 파일 을 만들어 program 속성 을 사용 할 수 있 습 니 다.
type: script 파일 의 sourcemaps 를 만 들 려 면 -- sourcemap 옵션 을 컴 파일 하거나 tsconfig. json 파일 의 sourcemap 속성 을 true 로 설정 하 십시오.줄 내 자원 지도 도 지 원 됩 니 다. (하나의 내용 은 하나의 파일 이 아 닌 url 에 저 장 된 자원 지도) 줄 내 자원 은 지원 되 지 않 지만.
파일 생 성 을 위 한 다른 outFiles 설정
생 성 된 (접 힌) 자바 스 크 립 트 파일 이 원본 파일 옆 에 없 으 면 launch 설정 에 있 는 outfiles 속성 도움말 vs 코드 디 버 거 를 통 해 그들 을 찾 을 수 있 습 니 다.
언제든지 원본 코드 에 정지점 을 설정 하면 vscode 는 oufiles 에서 glob 모드 에서 지정 한 파일 을 통 해 생 성 된 자원 을 찾 으 려 고 시도 합 니 다.
생 성 된 자 바스 크 립 트 파일 숨 기기
type: script 을 사용 할 때 자원 관리자 나 검색 결과 에 생 성 된 자바 script 파일 을 보고 싶 지 않 습 니 다.vscode 는 필터 기능 을 제공 합 니 다. files. exclude 작업 영역 설정 (파일 - > 참조 - > 설정) 은 생 성 된 파일 을 숨 기 는 표현 식 을 간단하게 만 들 수 있 습 니 다.

"**/*.js": { "when": "$(basename).ts"}

 
 이 모드 는 자 바스 크 립 트 파일 (* * /. js) 과 일치 하지만 같은 이름 의 type: script 파일 만 존재 합 니 다.파일 관리 자 는 생 성 된 자 바스 크 립 트 자원 을 보 여주 지 않 습 니 다. 같은 위치 에서 편집 되면.
. ts 와. tsx 자원 파일 에서 생 성 된 자 바스 크 립 트 파일 을 제거 하려 면 다음 표현 식 을 사용 하 십시오.

"**/*.js": { "when": "$(basename).ts" },"**/**.js": { "when": "$(basename).tsx" }

 
이것 은 작은 기술 입 니 다. glob 모드 를 검색 하 는 것 이 관건 입 니 다. 위의 설정 은 두 가지 서로 다른 glob 모드 를 사용 하여 두 개의 유일한 키 를 제공 하지만 검색 결 과 는 같 습 니 다.
혼 합 된 typscript 와 JavaScript 프로젝트
이제 헷 갈 리 는 ts 와 js 프로젝트 가 있 습 니 다. 자 바스 크 립 트 를 ts 프로젝트 에 존재 시 키 려 면 allowJs 속성 을 true 로 설정 할 수 있 습 니 다. tsconfig. json 에 있 습 니 다.
알림: tsc 컴 파일 러 는 jsconfig. json 파일 의 존 재 를 자동 으로 감지 하지 않 습 니 다.- p 인 자 를 사용 하여 tsc 가 jsconfig. json 파일 을 사용 하도록 합 니 다.예, tsc - p jsconfig. json.
새 버 전의 type: script 사용 하기
vscode 는 최근 안정 적 인 버 전의 typescript 언어 서 비 스 를 추가 합 니 다. 현재 컴퓨터 에 설 치 된 typescript 버 전과 일치 하지 않 을 수도 있 습 니 다.ts 나 js 파일 을 탐색 할 때 type: script 현재 유효한 버 전 은 상태 표시 줄 에 표 시 됩 니 다.
vscode 에서 tsc 버 전과 활동 하 는 ts 언어 서비스 버 전이 다 르 게 감지 되면 한 메 시 지 는 "version mismatch! global tsc (2.1.5)! = vscode 's languge service (2.2.1). inconsistent copiler errors might occur" 를 보 여 줍 니 다. 이 메 시 지 는 사용자 컴 파일 러 와 활동 하 는 언어 서비스의 차 이 를 알 리 는 데 목적 을 둡 니 다.
이 검 사 를 숨 길 수 있 습 니 다.

 "typescript.check.tscVersion": false

 
 다른 옵션 은 작업 영역 에 일치 하 는 typescript 버 전 (npm install -- save - dev typscript) 을 설치 하거나 현재 컴퓨터 전역 설치 (npm install) 입 니 다. -g type: script). 로 컬 에 type: script 을 설치 하여 다른 ts 프로젝트 와 의 대화 문 제 를 피 하 는 것 을 권장 합 니 다.
알림: 지정 한 버 전의 ts 를 소요 하여 @ version 을 사용 합 니 다. ts 2.2.1 의 예 를 들 어 npm install -- save - dev 를 사용 할 것 입 니 다[email protected].다음 버 전의 ts 를 미리 보 려 면 npm install 을 실행 하 십시오. --save-dev typescript@next.
 vscode 가 후속 컴 파일 버 전에 서 type: script 언어 서 비 스 를 업데이트 할 때 일치 하지 않 는 메 시 지 를 다시 볼 수 있 습 니 다. type: script 버 전 을 업데이트 할 수 있 습 니 다.
기본적으로 다른 버 전의 typescript 버 전 을 사용 하려 면 사용자 설정 에 typescript. tsdk 를 설정 하고 tsserver. js 파일 을 포함 하 는 디 렉 터 리 를 지정 하 십시오. npm list - g typescript 명령 을 사용 하여 typescript 설치 위 치 를 찾 을 수 있 습 니 다. tsserver. js 파일 은 보통 lib 폴 더 에 있 습 니 다.
예 를 들다

{   "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"}

 
작업 영역 에 특수 한 typescrit 버 전이 있다 면 작업 영역의 ts 버 전과 vscode 에서 기본적으로 사용 하 는 버 전 으로 전환 할 수 있 습 니 다. 방법 은 작업 영역 에서 typescript 이나 js 파일 을 열 고 상태 표시 줄 에 있 는 typescript 버 전 번 호 를 누 르 는 것 입 니 다. 메시지 상자 가 나타 날 것 입 니 다. 그 버 전의 ts 코드 를 사용 하 시 겠 습 니까?
 ts 버 전 을 전환 하거나 typescript. tsdk 파일 을 변경 한 후 vscode 를 다시 시작 해 야 유효 합 니 다. vscode 에 첨부 된 ts 버 전 으로 전환 할 수 있 습 니 다.
 타 입 스 크 립 트 확장
vscode 는 많은 ts 상 자 를 열 때 사용 할 수 있 는 기능 을 제공 합 니 다. 내 장 된 내용 을 제외 하고 확장 기능 을 설치 하여 더욱 강력 한 기능 을 실현 할 수 있 습 니 다.