安裝 TypeScript 並編譯成JS

• 2022 年 11 月 11 日
• 筆記
• typescript, 前端方面的問題

官網： //github.com/microsoft/TypeScript
TypeScript是一種由微軟開發的開源、跨平台的程式語言。它是JavaScript的超集，最終會被編譯為JavaScript程式碼。
TypeScript是一種應用級JavaScript語言。TypeScript為JavaScript添加了可選類型，支援針對任何瀏覽器、任何主機、任何作業系統的大規模JavaScript應用的工具。TypeScript編譯成可讀的、基於標準的JavaScript
特點：

• 始於JavaScript，歸於JavaScript
• 強大的類型系統
• 先進的 JavaScript

安裝

命令行運行如下命令，全局安裝 TypeScript：

npm install -g typescript

下載每日構建版本（最新）

npm install -g typescript@next

ps: 可能會失敗 最好還是不要加@next
檢查安裝是否成功

tsc -V 

安裝成功

構建第一個文件

我們寫一個JS程式

(() => {
  function sayHi(str) {
    return "hello" + str
  }

  let text = "world"
  console.log(sayHi(text))
})()

然後運行

發現可以運行
然後我們直接使用類型註解（ts的語法）

(() => {
    function sayHi(str: string) {
        return "hello" + str
    }

    let text = "world"
    console.log(sayHi(text))
})()

然後運行

會發現這樣會報錯

編譯程式碼

所以我們需要把ts程式碼轉換成JS 不然就運行不成功，當然 ts文件里都是js程式碼的話是可以運行的
所以我們可以使用命令把它編譯成JS
tsc .\helloworld.ts

這樣再同級目錄下就會生成一個js程式碼
以下是JS程式碼

(function () {
    function sayHi(str) {
        return "hello" + str;
    }
    var text = "world";
    console.log(sayHi(text));
})();

可以發現 類型註解自動的去掉了 並且 let 改成了var

vscode自動編譯

我們可以在vscode中讓他自動編譯成js
直接使用命令

tsc --init

這樣會生成一個tsconfig.json的文件

修改tsconfig.json配置

在文件中增加如下內容

{
  // 把ts文件最終編譯後放到js的目錄中 指定存放的路徑
  "outDir": "./js",
  // 不使用嚴格模式
  "strict": false,
   ...
}

啟動監視

我們還需要配置一下監視任務



點擊上圖標紅的地方 這樣的話 只要一保存就會自動的把ts編譯成JS
然後我們新建一個test文件
然後就會發現 自動的多出了一個test.js的文件了