VSCode에서 TypeScript 자동 컴파일 구성

青灯夜游
풀어 주다: 2021-11-02 09:31:29
앞으로
4238명이 탐색했습니다.

VSCode에서 TypeScript 자동 컴파일 구성

관련 권장 사항: "vscode 튜토리얼"

TypeScript 컴파일러 설치

Visual Studio Code에는 TypeScript 언어 지원이 포함되어 있지만 TypeScript 컴파일러 tsc는 포함되어 있지 않습니다. TypeScript 소스 코드를 JavaScript(tsc HelloWorld.ts)로 변환하려면 TypeScript 컴파일러를 전역으로 설치하거나 작업 공간에 설치해야 합니다.

TypeScript를 설치하는 가장 쉬운 방법은 Node.js 패키지 관리자인 npm을 사용하는 것입니다.-g는 전역 설치를 의미합니다.-g表示全局安装。

安装

npm install -g typescript
로그인 후 복사

检查版本-安装成功会输出版本信息

tsc --version
로그인 후 복사
xm@xm-Vostro-3670:~/project$ tsc --version Version 3.3.3333
로그인 후 복사

新建HelloWorld文件夹和hello_world.ts文件

mkdir HelloWorld
로그인 후 복사
const text:string = 'hello world'; console.log(text);
로그인 후 복사

VSCode에서 TypeScript 자동 컴파일 구성

新建Tsconfig.json

{ "compilerOptions": { "target": "es5", "module": "commonjs", "outDir": "out", "sourceMap": true } }
로그인 후 복사

新增任务

Tenimal->Run Task

VSCode에서 TypeScript 자동 컴파일 구성

选择tsc:build-tsconfig.json

VSCode에서 TypeScript 자동 컴파일 구성

配置完成

按下F5

发现目录下多了一个out文件夹配置的是"outDir": "out",DEBUG CONSOLE输出hello world

VSCode에서 TypeScript 자동 컴파일 구성

修改text保存按下F5

설치

rrreee

버전 확인 - 설치에 성공하면 버전 정보가 출력됩니다

rrreeerrreee새HelloWorld폴더와hello_world.ts파일을 만듭니다VSCode에서 TypeScript 자동 컴파일 구성rrreeerrreee

VSCode에서 TypeScript 자동 컴파일 구성

새 Tsconfig.jsonrrreee

새 작업

Tenimal ->작업 실행VSCode에서 TypeScript 자동 컴파일 구성

tsc:build-tsconfig.jsonVSCode에서 TypeScript 자동 컴파일 구성

구성 완료

F5를 눌러 추가out 디렉터리에 구성된 폴더는"outDir": "out"이고,DEBUG CONSOLEhello world를 출력합니다.

VSCode에서 TypeScript 자동 컴파일 구성

텍스트를 수정하여 저장하고F5를 누르세요. code >더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 VSCode에서 TypeScript 자동 컴파일 구성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:juejin.im
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!