我是如何从零开始学TypeScript的

从零开始学习一项新技术时，我推崇以官方文档为主要学习来源，而不是一开始就去搜索一些良莠不齐的技术博客。

因此，我首先搜索到了 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 thefunction 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. CallingpickCardwith 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 在业界非常受欢迎，很多三方库也推出了对应的文档，比如 redux https://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