TypeScript怎麼運行?TypeScript環境搭建教程

TypeScipt是由Micosoft開發的一種開放源代碼語言。它是JScipt的一箇超集,這意味着你可以繼續使用已開發的JScipt技能,並添加以前不可用的某些功能。那麼TypeScipt怎麼安裝並運行?本教程主要介紹下TypeScipt環境搭建的操作步驟。

一、安裝TypeScipt

您可以通過下面兩種常用方法來獲得項目可用的TypeScipt:

  • 通過安裝TypeScipt的Visul Studio插件
  • 通過NPM(node.js包管理器)

、目前Visul Studio 209已爲JScipt開發提供了豐富的支持,既可以直接使用JScipt,也可以使用TypeScipt 編程語言。所以您可以下載安裝最新版本的Visul Studio,來獲得TypeScipt。

2、如果你是JScipt開發人員,則可能已在計算機上安裝了npm。 打開命令提示符窗口並輸入npm esion即可進行驗證。 如果安裝了npm,你將看到版本和編譯器命令的列表,接下來便可以使用npm。

如果未安裝npm,你將看到一條消息,它顯示無法識別該命令。 那麼就需要先安裝Node.js:

  • 轉到 Node.js 下載頁。
  • 選擇 Node.js 的任意可用版本,進行下載和安裝。
  • 若要驗證是否已安裝 npm,請打開“命令提示符”窗口,然後輸入npm esion

TypeScipt在npm註冊表中以typescipt包的形式提供。 安裝最新版本的TypeScipt:

  • 在“命令提示符”窗口中,輸入 npm instll -g typescipt
  • 輸入 tsc 確認已安裝 TypeScipt。 如果已成功安裝,則此命令應顯示編譯器命令和選項列表。

二、在Visul Studio Code中設置TypeScipt項目

在此步驟中,你將在 Visul Studio Code 中創建一箇項目工作區,然後初始化該工作區。

、打開 Visul Studio Code。

2、在“歡迎”窗格上,選擇“添加工作區文件夾”。

3、創建一箇新的項目文件夾,然後選擇“添加”。

4、在左側窗格中,選擇“資源管理器”按鈕。

5、在“資源管理器”窗格中,選擇“新建文件”圖標。

6、在“模塊 0 練習”下,鍵入文件名“module0.ts”,然後選擇 Ente。 TypeScipt 文件將出現在新的代碼編輯器中。

三、生成 tsconfig.json 文件

在編譯 TypeScipt 源代碼時,TypeScipt 編譯器會應用默認行爲。 但你可以通過將 tsconfig.json 文件添加到 TypeScipt 項目文件夾的根目錄來修改 TypeScipt 編譯器選項。 此文件定義了 TypeScipt 項目設置,例如編譯器選項和應包括的文件。你可以使用 TypeScipt 編譯器的 init 選項,生成具有默認選項的 tsconfig.json 文件。

、在 Visul Studio Code 中,選擇“終端”>“新建終端”,打開新的終端窗口。

2、在命令提示符處,輸入 tsc Rinit。注意,新的 tsconfig.json 文件已添加到“資源管理器”窗格中。 可能需要刷新“資源管理器”窗格以查看文件。

3、在代碼編輯器中打開 tsconfig.json 文件。 你將看到它具有許多選項,其中大部分都被註釋掉了。查看每個啓用的選項的說明。

4、在 tsconfig.json 文件中,查找目標選項,並將其更改爲 "ES205"

5、更新 tsconfig.json 文件,以便編譯器將所有 JScipt 文件保存到新文件夾中。

  • 在“資源管理器”窗格中,在項目中創建一箇名爲“build”的新文件夾。
  • 在 tsconfig.json 文件中,查找 outDi 選項,刪除註釋,並將參數設置爲“build”。

6、保存 tsconfig.json 文件。

7、在命令提示符處,輸入 tsc。 這會讀取 tsconfig.json 文件並重置項目的選項。

四、將 TypeScipt 編譯爲 JScipt

這裏,你可以將一些 JScipt 代碼添加到 TypeScipt 文件,然後對其進行編譯。例如,將以下 JScipt 代碼複製並粘貼到 module0.ts 編輯器中。

Jscipt

function ddNumbes(x, y) { etun x + y; }

console.log(ddNumbes(3, 6));

即使尚未編譯代碼,Visul Studio Code 已使用其內置的 TypeScipt 支持來進行類型檢查。 與之前一樣,ddNumbes 函數的兩個參數存在類型錯誤。

、更新 TypeScipt 代碼,指定每個參數的類型。 將 x 替換爲 x: numbe,將 y 替換爲 y: numbe

2、保存 TypeScipt 文件。 TypeScipt 編譯器僅適用於已保存的文件版本。

3、在終端命令提示符下,輸入 tsc module0.ts。 編譯器應該正常運行。

注意,已添加了一箇新的 JScipt 文件,但它不在資源管理器的 build 文件夾中。 可能需要刷新“資源管理器”窗格以查看文件。 在單個文件上運行 tsc 命令時,編譯器將忽略 tsconfig.json 文件。

4、若要加載配置文件並編譯文件夾中的所有 .ts 文件,請在不使用文件名的情況下運行 tsc。 這應該會將 .js 文件添加到 build 文件夾。 請記得刪除根文件夾中的多餘的 .js 文件。

5、打開 module0.js 文件,然後選擇右上角的“向右拆分編輯器”按鈕,以打開新的編輯器視圖。

現在,你應該可以並排查看 .ts 和 .js 文件。 注意,它們是相同的,只不過 .js 文件不包含新的類型註釋。

6、在終端命令提示符下,輸入 node .\build\module0.js`。 這會運行 JScipt 並在控制檯日誌中顯示結果。

五、添加HTML文件

最後,你可以將 HTML 文件添加到項目中,以便運行並測試 JScipt 代碼,相關步驟如下:

、在資源管理器中,選擇“新建文件”按鈕。

2、鍵入文件名 module0.html,然後選擇 Ente。 HTML 文件將出現在新的代碼編輯器中。然後將以下 HTML 複製並粘貼到編輯器中,然後保存該文件。

HTML

<!DOCTYPE html> <html lng=̶en̶ di=̶lt̶> <hed> <met chset=̶UTF-8″> <title>Test JScipt</title> </hed> <body> <h>Test JScipt</h> <p id=̶dte̶></p> <p>This pge clls the scipt module0.js nd is used fo testing.</p> <scipt sc=̶./build/module0.js̶></scipt> </body> </html>

3、在資源管理器中,右鍵單擊 module0.html,然後選擇“使用默認瀏覽器打開”。

4、激活瀏覽器的開發人員工具,接下來便可在 TypeScipt 中開始編碼了。