我是如何從零開始學TypeScript的

本文記錄了我這個週末從零開始學習 TypeScript 的經歷，包括

1. 背景
2. 學習途徑
3. 做筆記的技巧
4. 保持專注和確保進度的方法
5. 實踐過程
   
   
   

背景

1. 我的Java基礎很好 —— 熟悉靜態語言類型的常見規範
2. 我的JavaScript基礎也很好
3. 我正計劃將 typescript 引進工作項目

（以下統一將 typescript 簡寫成 ts）

---

從官方文檔入手

雖然之前從未系統學習過 ts， 但在看一些三方庫的源碼或者示例代碼時，多多少少還是看到了一些 ts 代碼，腦子裏有個粗略的印象。

正如我在這兩篇文章中寫的

https://zhuanlan.zhihu.com/p/104769413zhuanlan.zhihu.comhttps://zhuanlan.zhihu.com/p/115179058zhuanlan.zhihu.com

從零開始學習一項新技術時，我推崇以官方文檔爲主要學習來源，而不是一開始就去搜索一些良莠不齊的技術博客。

因此，我首先搜索到了 ts 的官方文檔網站 The starting point for learning TypeScript

寫的比較好的文檔通常都安排合理，我相信 ts 也是如此，所以就根據上圖的建議來閱讀文檔內容：

1. 由於我計劃將 ts 引入工作裏的前端項目，因此我首先閱讀了 TypeScript for JS Programmers得到了一個ts的初步印象
2. 接着開始閱讀 TypeScript Handbook —— 這是個相對系統、全面的入門文檔，一共有 8 章內容

學習筆記

閱讀文檔過程中，我會一邊做一些簡單的筆記。（我使用的是 爲知筆記 ，身邊同事朋友也有使用 印象筆記、有道雲筆記 或者 bear 之類的工具，主要是有云備份、多設備登錄功能。）

學習筆記內容：

1）我會重點關注 設計目標、理念、原則 這類的文字 —— 只有理解一個技術的設計目標、理念、原則，纔有機會參透這個技術的精髓，纔可能用好這門技術（最佳實踐）

比如我在閱讀HandBook過程中記錄了

The goal of TypeScript is to be a static typechecker for JavaScript programs - in other words, a tool that runs before your code runs (static) and ensure that the types of the program are correct (typechecked).

TypeScript stands in an unusual relationship to JavaScript. TypeScript offers all of JavaScript’s features, and an additional layer on top of these: TypeScript’s type system.

上一句表明 ts 的目標是成爲 js 程序的靜態類型檢查工具，可以在編譯時期（執行之前）以靜態檢查的方式保證程序中的類型都是正確的。

下一句表明了 ts 和 js 的關係 —— ts 提供了 js 的所有特性並在上面加了一層 ts類型系統

理解了這兩段話有什麼意義呢？

第一， ts 並不是一門新的編程語言，它是一個js的類型檢查工具

第二，ts 基於 js，只是額外提供了一層類型系統 —— 當我們遇到看似 ts 獨有的特性時，可以思考這種 ts 特性在編譯之後是如何用 js 實現的呢？比如 ts enum 的 Reverse mappings 其實編譯後是這麼實現的（https://www.typescriptlang.org/docs/handbook/enums.html#reverse-mappings ）

"use strict";
var Enum;
(function (Enum) {
    Enum[Enum["A"] = 0] = "A";
})(Enum || (Enum = {}));
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

2）我通常還會根據自己的經驗（工作、學習、閱讀），對新技術的一些特性作臨時的評價。

比如我在閱讀HandBook時，記下了一些我不喜歡的 ts 設計：

在 function overload （Handbook - Functions）裏

function pickCard(x: { suit: string; card: number }[]): number;
function pickCard(x: number): { suit: string; card: number };
function pickCard(x: any): any {
  // Check to see if we're working with an object/array
  // if so, they gave us the deck and we'll pick the card
  if (typeof x == "object") {
    let pickedCard = Math.floor(Math.random() * x.length);
    return pickedCard;
  }
  // Otherwise just let them pick the card
  else if (typeof x == "number") {
    let pickedSuit = Math.floor(x / 13);
    return { suit: suits[pickedSuit], card: x % 13 };
  }
}

重載函數簽名列表的最後一個不得不寫一個 any 的版本，且實際上並不起作用

Note that the function pickCard(x): anypiece is not part of the overload list, so it only has two overloads: one that takes an object and one that takes a number. Calling pickCardwith any other parameter types would cause an error.

再比如，定義函數類型的語法跟ES6的箭頭函數一樣都使用了 => 容易產生歧義，影響可讀性

let myAdd: (x: number, y: number) => number = function (
  x: number,
  y: number
): number {
  return x + y;
};

當然，我不確定我的評價是否正確，或者作者如此設計有什麼苦衷。我在筆記上做這些臨時評價，方便以後我可以進一步去搜索、查證。

3）我不做具體的API用法的筆記，我認爲這些不那麼重要，需要的時候直接在 官方文檔 中搜索即可。

保持專注和確保進度的方法

1. 儘量使用整塊時間進行學習，比如週末的一個上午/下午
2. 使用計時器 / 秒錶記錄學習時間 
   我開始學習時按下秒錶的開關，中途休息時就暫停秒錶。下圖是我本次學習完 HandBook 的秒錶截圖
   

記錄時間有助於激勵自己繼續學習，同時也能明顯感知到自己的學習進度。

3. 入門時不要過分扣細節。 
入門學習一個技術時，對整個技術系統還不熟悉，一些比較“生僻”的API或者設計不理解也很正常， 比如 ts enum 中的 Ambient enums 初看起來令人困惑（ Handbook - Enums ）
不用過分糾結，簡單做個筆記，繼續往下走，不要因此受挫中斷學習。

實踐

接下來打算根據 HandBook 學到的基本知識，嘗試用 ts 寫一個 React App。

由於在 ts 官方文檔裏沒有找到相關的教程，用搜索引擎找到了 React 官方文檔裏有教程

Create React App · Set up a modern web app by running one command.

在命令行跑指令

npx create-react-app my-ts-app --template typescript

就能創建出一個基於 ts 的React app 了，包括一些比較友好的 ts 的配置（tsconfig.json文件）

此外，React 官方文檔還推薦了一個 React TypeScript Cheatsheet 網站（https://react-typescript-cheatsheet.netlify.app/docs/basic/setup） 裏面有很多使用 ts 寫 react 的最佳實踐和示例代碼，非常值得參考。

由於 ts 在業界非常受歡迎，很多三方庫也推出了對應的文檔，比如 reduxhttps://redux.js.org/recipes/usage-with-typescript

根據這些文檔和ts HandBook，我分別寫了使用 redux 的 TODO list 組件 和 不使用 redux 的TODO list 組件，一點點熟悉和實踐 ts 知識

總結

今天簡單分享了我從零開始學習 TypeScript 的過程，我的方法和技巧是否對你有啓發呢？你有什麼特別的學習技巧和經驗嗎？歡迎在評論區分享！

參考鏈接：

The starting point for learning TypeScript

https://www.typescriptlang.org/docs/handbook/enums.html#reverse-mappings

Create React App · Set up a modern web app by running one command.

https://react-typescript-cheatsheet.netlify.app/docs/basic/setup

https://redux.js.org/recipes/usage-with-typescript