黃子涵學習Typescript

本地編寫并運行Typescript

查看Node.js版本號

2022-03-22_214946.png

全局安裝Typescript

2022-03-22_214826.png

驗證Typescript是否安裝成功

2022-03-22_215218.png

新建tsconfig.json文件

使用新建文件快捷鍵“Ctrl + N”來創(chuàng)建一個文件并輸入以下代碼

{
    "compilerOptions": {
        "strict": true,
        "target": "es5"
    }
}

使用保存文件快捷鍵“Ctrl + S”將這個文件保存為“tsconfig.json”?！皌sconfig.json”是TypeScript編譯器默認使用的配置文件。此例中的配置文件啟用了所有的嚴格類型檢查編譯選項，并將輸出JavaScript的版本指定為ECMAScript 5。

2022-03-22_220840.png

新建hello-world.ts文件

使用新建文件快捷鍵“Ctrl + N”來創(chuàng)建一個文件并輸入以下代碼

const greeting = 'hello, world';

console.log(greeting);

使用保存文件快捷鍵“Ctrl + S”將這個文件保存為“hello-world.ts”，TypeScript源文件的常規(guī)擴展名為“.ts”。

2022-03-22_221505.png

編譯程序

Visual Studio Code的任務管理器已經(jīng)集成了對TypeScript編譯器的支持，我們可以利用它來編譯TypeScript程序。使用Visual Studio Code任務管理器的另一個優(yōu)點是它能將編譯過程中遇到的錯誤和警告信息顯示在“Problems”面板里。

使用快捷鍵“Ctrl + Shift + B”或從菜單欄里選擇“Terminal→Run Build Task”來打開并運行構建任務面板，然后再選擇“tsc: build- tsconfig.json”來編譯TypeScript程序。

當編譯完成后，在“hello-world.ts”文件的目錄下會生成一個同名的“hello-world.js”文件，它就是編譯輸出的JavaScript程序。

2022-03-23_001157.png

2022-03-23_001004.png

生成的“hello-world.js”文件如下所示：

"use strict";
var greeting = 'hello, world';
console.log(greeting);

運行程序

在Visual Studio Code里，使用“Ctrl + ”（“”為反引號，位于鍵盤上數(shù)字鍵1的左側）快捷鍵打開命令行窗口。然后，使用Node.js命令行工具來運行“hello-world.js”，示例如下：

2022-03-23_001737.png