提姆寫程式

0%

TS 筆記 - TypeScript 起手式

發表於 更新於 分類於 Disqus：
Hello TypeScript

ts

什麼是 TypeScript

官網簡介：TypeScript 是 JavaScript 的型別的超集，它可以編譯成純 JavaScript。編譯出來的 JavaScript 可以執行在任何瀏覽器上。TypeScript 編譯工具可以執行在任何伺服器和任何系統上。TypeScript 是開源的。

TypeScript 優勢

增加了程式碼可讀性與可維護性

  • 在 TypeScript 裡型別可以自動推斷。
  • 在編譯時就可以提前發現錯誤。
  • 配合 IDE 工具可以發現在撰寫時就會有錯誤訊息。
  • TypeScript 是 JavaScript 的超集，js 檔案可以直接命名為 ts 檔案。

安裝 TypeScript

  1. 新建一個自定義資料夾。這邊使用 tspractice，並用 VSCode 開啟。
  2. 安裝 TypeScript 與 tslint。
1
2
npm install typescript --save
npm install tslint --save
  1. 安裝編譯套件 npx。
1
npm install npx
  1. 初始化編譯套件。
1
npx tsc --init
  1. 再建立一個 src 的資料夾，裡面建立兩個檔案。
  • index.ts: 開發用。
  • index.js: 編譯後結果。

這時資料夾會顯示如下圖，

tsfolder

修改 tsconfig.json

找到 target 選項，此欄位為輸出的 JavaScript 版本，把 "target": "es5" 改成 "target": "ESNEXT"，其他設定值不需要更動。

ES3 是 1999 年推出的第三版，ES5 (目前大部分主流瀏覽器都支援的版本)則是 2009 年推出的第五版，而後 2015 年推出 ES6（又名 ES2015)，之後規定每一年釋出新的版本，因此，2016 年推出 ES2016，2017 年推出 ES2017，以此類推，今年 2019 年已經到了 ES10 版本，而未釋出的未來版本則為 ESNext。

Hello TypeScript

前置完成後，來試試第一個 ts 編譯檔案吧！
在 ts 檔案中寫下：

1
var msg: string = "hello typescript!";

這時輸入指令

1
npx tsc

就會看到 index.js 檔案編譯出下方程式碼，

1
2
"use strict";
var msg = "hello typescript!";

編輯器內會呈現如下圖。

tstojs

參考資料