Jadual Kandungan
安装TypeScript编译器
安装
检查版本-安装成功会输出版本信息
新建HelloWorld文件夹和hello_world.ts文件
新建Tsconfig.json
新增任务
Tenimal->Run Task
配置完成
Rumah alat pembangunan VSCode VSCode中配置TypeScript自动编译

VSCode中配置TypeScript自动编译

Feb 12, 2021 am 09:25 AM
vscode

VSCode中配置TypeScript自动编译

相关推荐:《vscode教程

安装TypeScript编译器

Visual Studio Code包含TypeScript语言支持,但不包括TypeScript编译器tsc。您需要在全局或工作区中安装TypeScript编译器,以将TypeScript源代码转换为JavaScript(tsc HelloWorld.ts)。

安装TypeScript的最简单方法是通过npm,即Node.js包管理器,-g表示全局安装。

安装

npm install -g typescript
Salin selepas log masuk

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

tsc --version
Salin selepas log masuk
xm@xm-Vostro-3670:~/project$ tsc --version
Version 3.3.3333
Salin selepas log masuk

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

mkdir HelloWorld
Salin selepas log masuk
const text:string = 'hello world';
console.log(text);
Salin selepas log masuk

1.png

新建Tsconfig.json

{
  "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "outDir": "out",
      "sourceMap": true
  }
}
Salin selepas log masuk

新增任务

Tenimal->Run Task

2.png

选择tsc:build-tsconfig.json

3.png

配置完成

按下F5

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

4.png

修改text保存按下F5

5.png

更多编程相关知识,请访问:编程视频!!

Atas ialah kandungan terperinci VSCode中配置TypeScript自动编译. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melihat dokumen perkataan dalam vscode Bagaimana untuk melihat dokumen perkataan dalam vscode Bagaimana untuk melihat dokumen perkataan dalam vscode Bagaimana untuk melihat dokumen perkataan dalam vscode May 09, 2024 am 09:37 AM

Bagaimana untuk melihat dokumen perkataan dalam vscode Bagaimana untuk melihat dokumen perkataan dalam vscode

Cara melukis carta alir dengan vscode_Cara melukis carta alir dengan kod visual_studio Cara melukis carta alir dengan vscode_Cara melukis carta alir dengan kod visual_studio Apr 23, 2024 pm 02:13 PM

Cara melukis carta alir dengan vscode_Cara melukis carta alir dengan kod visual_studio

Bagaimana untuk menulis Maude dalam Vscode_Bagaimana untuk menulis Maude dalam Vscode Bagaimana untuk menulis Maude dalam Vscode_Bagaimana untuk menulis Maude dalam Vscode Apr 23, 2024 am 10:25 AM

Bagaimana untuk menulis Maude dalam Vscode_Bagaimana untuk menulis Maude dalam Vscode

Caltech Cina menggunakan AI untuk menumbangkan bukti matematik! Mempercepatkan 5 kali terkejut Tao Zhexuan, 80% langkah matematik adalah automatik sepenuhnya Caltech Cina menggunakan AI untuk menumbangkan bukti matematik! Mempercepatkan 5 kali terkejut Tao Zhexuan, 80% langkah matematik adalah automatik sepenuhnya Apr 23, 2024 pm 03:01 PM

Caltech Cina menggunakan AI untuk menumbangkan bukti matematik! Mempercepatkan 5 kali terkejut Tao Zhexuan, 80% langkah matematik adalah automatik sepenuhnya

Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode May 09, 2024 am 09:52 AM

Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode

Bagaimana untuk menambah fail ke vscode ruang kerja Bagaimana untuk menambah fail ke vscode ruang kerja Bagaimana untuk menambah fail ke vscode ruang kerja Bagaimana untuk menambah fail ke vscode ruang kerja May 09, 2024 am 09:43 AM

Bagaimana untuk menambah fail ke vscode ruang kerja Bagaimana untuk menambah fail ke vscode ruang kerja

Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode May 09, 2024 am 10:30 AM

Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode

Bagaimana untuk menetapkan sisipan lancar animasi dalam tutorial VScode VScode untuk menetapkan sisipan lancar animasi Bagaimana untuk menetapkan sisipan lancar animasi dalam tutorial VScode VScode untuk menetapkan sisipan lancar animasi May 09, 2024 am 09:49 AM

Bagaimana untuk menetapkan sisipan lancar animasi dalam tutorial VScode VScode untuk menetapkan sisipan lancar animasi

See all articles