TypeScript Visual Studio 코드에서 저장에 자동 컴파일

이 게시물에 두 가지 문제를 해결할 것 이다: 1) 명령 “TSC” 대 통합된 터미널 코드에서 인식 되지 않습니다., 그리고 2) 컴파일 작동 하지 않습니다 자동으로 파일을 저장할 때 “.TS” (형식 스크립트).

소개

그냥 contextualize 하, o Typescript 강력한 형식의 구조를 사용 하 여 코드를 작성 하 고이 컴파일된 코드 순수 자바 스크립트를 수 있습니다.. 이미는 Visual Studio 코드 다중 에디터 마이크로 소프트에서 만든.

// 이 게시물에 사용 하는 버전:
- Visual Studio (VS) 코드: 버전 1.14.1
- Typescript: 버전 2.4.1

이것은 쉬운 팁, 하지만 당신이 무슨 일을 하는지 모르는 경우에 문제가 있을 수 있습니다.: 내 경우에는 :(D)

Node.js TypeScript 설치

Node.js의 패키지 관리자를 통해는 TypeScript 설치 하는 방법 중 하나는 (고궁 박물원 – 노드 패키지 관리자), 하지만 그것을 사용 하 여, 먼저 설치는 Node.js.

노드를 설치한 후, 터미널을 열으십시오 (명령) 다음 명령을 실행 하 고 설치는 TypeScript:

NPM 설치 -g typescript

Windows 터미널 (또는 리눅스), 설치 된 버전을 확인 하 여는 TypeScript의 테스트 실행을 할. 명령 “TSC” TypeScript 컴파일러에 대 한 약자입니다..

TSC -v

문제

문제는 명령 “TSC” 일반적으로 Windows 터미널에 작용, 하지만 통합된 터미널에는 Visual Studio 코드 내 (VS 코드), 다음 오류 표시:

' tsc ' 인식 되지 않는  내부 또는 외부 명령,실행할 수 있는 프로그램 또는 배치 파일 파일.

또한, 명령을 실행 하 고 싶지 않 았 어 “TSC” 각 시간에 대 한 나 파일 하 고 싶 었 “.TS” (TypeScript 확장). 그래서, 자동 빌드 하기 어떻게 (CTRL + S)? 우리가 더 볼 것 이다.

기타 erros

이 문제를 해결 하고자, 내가 발견 말을 사용 하는 게시물은 compileOnSave, 하지만 이것은 Visual Studio에서 지원만 2015 TypeScript와 > = 1.8.4 그리고 원자 typescript 플러그인. IE, 사용 하 여 아무 소용이 compileOnSave 에서 “tsconfig json” Visual Studio 코드, 아래 코드는 작동 하지 않습니다.:

{
   "compileOnSave": true,
   "compilerOptions": {
       "noImplicitAny" : true
   }
}

솔루션

TSC는 vs에서 통합 터미널 코드

첫째, 우리는 문제를 해결 TSC Visual Studio 통합 터미널 코드에서 인식 되지 않습니다 (VS 코드).

일부 게시물 제안 PATH 환경 변수에 tsc 또는 npm의 경로 넣어, 하지만이 문제를 해결 하는 쉬운 방법을 하 고 있 었는 설치는 “Typescript Visual Studio에 대 한, 그것은 VS 코드 호환.

이제 예, 설치 후, 오픈 Visual Studio 통합 터미널 코드, 입력:

// 바로 가기 키는 Visual Studio 통합 터미널 코드:
CTRL 키+`
// 또는 메뉴를 사용 하 여 Visual Studio 코드에서 터미널을 열고:
보기 > 통합된 터미널

확인 하는 시도 TypeScript 버전 통합된 터미널 코드 대 직접 (윈도우 터미널에), 그리고 아마 일 것입니다:

TSC -v

파일을 저장할 때 자동 컴파일 .TS

터미널 코드 스크립트 디렉터리에 대 서 (.TS), 예를 들어:

CD C:\wamp64wwwts

파일 만들기 tsconfig json 코드 대 터미널에 입력 하 여:

TSC --초기화

참고 파일 “tsconfig json” 만든 것입니다. “(C):\wamp64wwwts” (현재 디렉터리).

열기는 tsconfig json 옵션을 사용 하 고 “sourceMap”: true, 수정 저장, 따라서:

  "compilerOptions": {
    /* 기본 옵션 */
    "target": "es5",                          /* ECMAScript 대상 버전 지정: ' 버팔로 ' (기본), ' ES5 ', ' ES2015 ', ' ES2016 ', ' ES2017 ', 또는 'ESNEXT'. */
    "module": "commonjs",                     /* 모듈 코드 생성을 지정: ' commonjs ', ' amd ', ' 시스템 ', ' umd ', ' es2015 ', 또는 'ESNext'. */
    // "lib": [],                             /* 편집에 포함 될 라이브러리 파일 지정:  */
    // "allowJs": true,                       /* 자바 파일을 컴파일할 수 허용. */
    // "checkJs": true,                       /* .Js 파일에서 오류를 보고. */
    // "jsx": "preserve",                     /* JSX 코드 생성을 지정: ' 유지 ', ' 반응-기본 ', '반응' 또는. */
    // "declaration": true,                   /* 해당 생성 '. d.ts' 파일. */
    "sourceMap": true,                     /* 해당 '.map' 파일 생성. */
    // "outFile": "./",                       /* 연결 및 출력을 단일 파일로 내보내기. */
    // "outDir": "./",                        /* 디렉터리로 리디렉션 출력 구조. */
    // "rootDir": "./",                       /* 입력된 파일의 루트 디렉토리를 지정. 제어-outDir과 출력 디렉터리 구조를 사용 하 여. */
    ... 계속 ...

준비, 그러 니 é só ir 없음 터미널 VS 코드 e digitar o에 할:

TSC -w

에스테에 봐 monitorando (ou 배가, 그래서 “w” 드 시계) aplicação e 또는 개정 없이 의심 .TS, 가 일제 사격, 상업적 잘못 compilação em .js.

그거에요!

총 조회 수: 1127

응답을 남기다

귀하의 이메일 주소가 게시 되지 것입니다. 필수 항목으로 표시 됩니다. *