TypeScript 創建第一個TypeScript文件

上一節我們已經做好了準備工作,那麼本節我們開始在 Visual Studio Code 中創建第一個 TypeScript 文件,並學習如何運行這個文件。

TypeScript 文件後綴名

在創建文件之前,我們來講一下後綴名, TypeScript 中的文件都是以 .ts 爲後綴名的,這和 JavaScript 文件是不同的,JavaScript 是以 .js 爲後綴名,所以在這點上我們千萬不要弄錯喲。

創建一個 TypeScript 文件

首先可以在電腦指定路徑創建一個文件夾,例如我創建一個名爲 DemoXKD 的文件夾。接着打開 VSCode 軟件,在 VSCode 中選擇“文件(F) --> 打開文件夾”,然後選擇 DemoXKD 文件夾。

如下圖所示: 成功打開文件夾後可以顯示如下,我們可以點擊圖標來選擇創建文件或文件夾等: 點擊創建文件,給文件命名爲 test.ts,在文件中寫入如下 TypeScript 代碼:

let str:string = "俠課島" 
console.log(str)

這樣我們就成功創建好了第一個 TypeScript 文件啦:

編譯代碼

如果我們想要編譯創建好的 TypeScript 文件,可以在 VSCode 頂部菜單中,找到終端(T) -- > 選擇新建終端。然後在終端中執行 tsc test.ts 命令,其中 test.ts 就是文件名: 如果代碼執行成功,會自動創建一個名與 TypeScript 文件名相同,但是後綴名不同的 test.js ,這就是一個 JavaScript 文件啦,編譯好的 JavaScript 代碼就在這個文件中。

例如我們可以點開 test.js 文件看一下里面的內容: 從圖中可以看到編譯後的 JavaScript 代碼和 TypeScript 代碼有一些不同,不同在於聲明變量的語法上有些差別。

這是因爲 TypeScript 是強類型語言,聲明變量時需要指定數據類型,而 JavaScript 是弱類型,聲明變量時不需要指定數據類型。上述 test.ts 文件裏面的所有的語法都是會編譯成 test.js 裏面的語法。

執行 JavaScript 代碼

TypeScript 代碼成功編譯爲 JavaScript 代碼後,就可以通過 node test.js 命令來執行代碼了,運行成功後就會輸出結果。

var str = "俠課島";
console.log(str);

輸出:

俠課島

tsc 常用編譯參數

下面是一些 tsc 常用的編譯參數,大家可以在終端上試試:

  • --help:顯示幫助信息。
  • --module:載入擴展模塊。
  • --target:設置 ECMA 版本。
  • --declaration:額外生成一個 .d.ts 擴展名的文件。
  • --removeComments:刪除文件的註釋。
  • --out:編譯多個文件併合併到一個輸出的文件。
  • --sourcemap:生成一個 sourcemap (.map) 文件。
  • --watch:在監視模式下運行編譯器。會監視輸出文件,在它們改變時重新編譯。
  • --module noImplicitAny:在表達式和聲明上有隱含的 any 類型時報錯。

鏈接:https://www.9xkd.com/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章