Inhaltsverzeichnis
Installieren Sie den TypeScript-Compiler
安装
检查版本-安装成功会输出版本信息
新建HelloWorld文件夹和hello_world.ts文件
新建Tsconfig.json
新增任务
Tenimal->Run Task
配置完成
Installieren " >修改text保存按下F5

Installieren

Überprüfen Sie die Version – wenn die Installation erfolgreich ist, die Version Informationen werden ausgegeben
rrreee

Neue Aufgabe" >Neue Tsconfig.jsonrrreee

Neue Aufgabe

Heim Entwicklungswerkzeuge VSCode Konfigurieren der automatischen TypeScript-Kompilierung in VSCode

Konfigurieren der automatischen TypeScript-Kompilierung in VSCode

Feb 12, 2021 am 09:25 AM
vscode

Konfigurieren der automatischen TypeScript-Kompilierung in VSCode

Verwandte Empfehlungen: „vscode-Tutorial

Installieren Sie den TypeScript-Compiler

Visual Studio Code umfasst TypeScript-Sprachunterstützung, jedoch nicht den TypeScript-Compiler tsc. Sie müssen den TypeScript-Compiler global oder in Ihrem Arbeitsbereich installieren, um TypeScript-Quellcode in JavaScript (tsc HelloWorld.ts) zu konvertieren.

Der einfachste Weg, TypeScript zu installieren, ist über npm, den Node.js-Paketmanager. -g bedeutet globale Installation. -g表示全局安装。

安装

npm install -g typescript
Nach dem Login kopieren

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

tsc --version
Nach dem Login kopieren
xm@xm-Vostro-3670:~/project$ tsc --version
Version 3.3.3333
Nach dem Login kopieren

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

mkdir HelloWorld
Nach dem Login kopieren
const text:string = 'hello world';
console.log(text);
Nach dem Login kopieren

Konfigurieren der automatischen TypeScript-Kompilierung in VSCode

新建Tsconfig.json

{
  "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "outDir": "out",
      "sourceMap": true
  }
}
Nach dem Login kopieren

新增任务

Tenimal->Run Task

Konfigurieren der automatischen TypeScript-Kompilierung in VSCode

选择tsc:build-tsconfig.json

Konfigurieren der automatischen TypeScript-Kompilierung in VSCode

配置完成

按下F5

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

Konfigurieren der automatischen TypeScript-Kompilierung in VSCode

修改text保存按下F5

Installieren

rrreee

Überprüfen Sie die Version – wenn die Installation erfolgreich ist, die Version Informationen werden ausgegeben

rrreeerrreeeErstellen Sie einen neuen Ordner HelloWorld und eine neue Datei hello_world.tsKonfigurieren der automatischen TypeScript-Kompilierung in VSCoderrreeerrreee

Konfigurieren der automatischen TypeScript-Kompilierung in VSCode

Neue Tsconfig.jsonrrreee

Neue Aufgabe

Tenimal ->Aufgabe ausführen🎜Konfigurieren der automatischen TypeScript-Kompilierung in VSCode🎜

Wählen Sie tsc:build-tsconfig.json🎜🎜Konfigurieren der automatischen TypeScript-Kompilierung in VSCode🎜

Konfiguration abgeschlossen🎜

Drücken Sie F5🎜🎜 und stellen Sie fest, dass es einen zusätzlichen out Ordnerkonfiguration im Verzeichnis ist "outDir": "out", DEBUG CONSOLE gibt hello world aus. 🎜

Konfigurieren der automatischen TypeScript-Kompilierung in VSCode🎜

Ändern Sie text zum Speichern und drücken Sie F5 Code >🎜🎜🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonKonfigurieren der automatischen TypeScript-Kompilierung in VSCode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So zeigen Sie Word-Dokumente in vscode an. So zeigen Sie Word-Dokumente in vscode an So zeigen Sie Word-Dokumente in vscode an. So zeigen Sie Word-Dokumente in vscode an May 09, 2024 am 09:37 AM

So zeigen Sie Word-Dokumente in vscode an. So zeigen Sie Word-Dokumente in vscode an

So zeichnen Sie ein Flussdiagramm mit vscode_So zeichnen Sie ein Flussdiagramm mit visual_studio-Code So zeichnen Sie ein Flussdiagramm mit vscode_So zeichnen Sie ein Flussdiagramm mit visual_studio-Code Apr 23, 2024 pm 02:13 PM

So zeichnen Sie ein Flussdiagramm mit vscode_So zeichnen Sie ein Flussdiagramm mit visual_studio-Code

Wie schreibe ich Maude in Vscode_Wie schreibe ich Maude in Vscode Wie schreibe ich Maude in Vscode_Wie schreibe ich Maude in Vscode Apr 23, 2024 am 10:25 AM

Wie schreibe ich Maude in Vscode_Wie schreibe ich Maude in Vscode

Caltech-Chinesen nutzen KI, um mathematische Beweise zu untergraben! Beschleunigen Sie 5-mal schockiert Tao Zhexuan, 80 % der mathematischen Schritte sind vollständig automatisiert Caltech-Chinesen nutzen KI, um mathematische Beweise zu untergraben! Beschleunigen Sie 5-mal schockiert Tao Zhexuan, 80 % der mathematischen Schritte sind vollständig automatisiert Apr 23, 2024 pm 03:01 PM

Caltech-Chinesen nutzen KI, um mathematische Beweise zu untergraben! Beschleunigen Sie 5-mal schockiert Tao Zhexuan, 80 % der mathematischen Schritte sind vollständig automatisiert

So aktivieren Sie Hintergrundaktualisierungen in vscode. So aktivieren Sie Hintergrundaktualisierungen in vscode So aktivieren Sie Hintergrundaktualisierungen in vscode. So aktivieren Sie Hintergrundaktualisierungen in vscode May 09, 2024 am 09:52 AM

So aktivieren Sie Hintergrundaktualisierungen in vscode. So aktivieren Sie Hintergrundaktualisierungen in vscode

So fügen Sie Dateien zum vscode-Arbeitsbereich hinzu. So fügen Sie Dateien zum vscode-Arbeitsbereich hinzu So fügen Sie Dateien zum vscode-Arbeitsbereich hinzu. So fügen Sie Dateien zum vscode-Arbeitsbereich hinzu May 09, 2024 am 09:43 AM

So fügen Sie Dateien zum vscode-Arbeitsbereich hinzu. So fügen Sie Dateien zum vscode-Arbeitsbereich hinzu

So deaktivieren Sie die WSL-Konfigurationsdatei in vscode. So deaktivieren Sie die WSL-Konfigurationsdatei in vscode So deaktivieren Sie die WSL-Konfigurationsdatei in vscode. So deaktivieren Sie die WSL-Konfigurationsdatei in vscode May 09, 2024 am 10:30 AM

So deaktivieren Sie die WSL-Konfigurationsdatei in vscode. So deaktivieren Sie die WSL-Konfigurationsdatei in vscode

So stellen Sie das sanfte Einfügen von Animationen in VScode ein VScode-Tutorial zum Festlegen des sanften Einfügens von Animationen So stellen Sie das sanfte Einfügen von Animationen in VScode ein VScode-Tutorial zum Festlegen des sanften Einfügens von Animationen May 09, 2024 am 09:49 AM

So stellen Sie das sanfte Einfügen von Animationen in VScode ein VScode-Tutorial zum Festlegen des sanften Einfügens von Animationen

See all articles