八分钟让你学会 TypeScript

对于生产级别的项目，最害怕那种低级的、跟地雷一样，在运行时候才会爆出的 bug 。很没安全感，甚至引发很多的财产损失事故。

JavaScript没有编译时错误（或者说编译时错误很少），导致 JavaScript 代码不上测试环境就不知道哪里有问题，上了测试环境，能不能检查出问题还得看测试样本够不够多样，不然到了生产环境该出错照样出错。

以前吧，JavaScript 就只在网页里用用，顶多也就出些小错误，网页乱了点，后端只要写好了，啥事没有。可是 现在 JS 不仅能写后端了，还能写各种 GUI 软件、APP ，甚至游戏引擎。那这种软件一出错，可就很可能是大事了。

一般后者的这些应用，开发语言都有编译，能尽可能把低级错误免了，JS 没有，就给它强安一个，就是 typescript 了！

如果用上了强类型就能在类似于编译时解决这些问题，那么何乐而不为呢？

其实 TS 简单的很，8 分钟就能入门！

今天就帮犹犹豫豫的朋友们，入个门！当然 ts 仍然有更多的规则，但我们入门再说。ts 的完整内容其实很少，1 天就能完全掌握。

首先 typescript 不是新语言，而是 JS 的超集，就是 Plus 版，所有 JS 都是合法的 ts ，所以你可以在你的 JS 基础上，随时开始使用 TS （但是不推荐！）。

运行 TS

首先，TS 一般是不能直接运行的，包括 node 。

（当然，有个工具叫 deno ，它可以直接运行 TS，而且也是 node 的作者开发的）

我们需要用一个叫 tsc 的命令行工具，把 TS 编译成 JS。

安装很简单：

npm install tsc -g

然后，进图你的目录，就可以转文件了。

tsc index.ts

这样就可以将 index.ts 转化为 index.js ，然后该怎么用，就怎么用了。

配置 ts

在目录下，建立一个 tsconfig.json 就可以。以下是我常用的 5 个配置。

{
  "compilerOptions": {
    "watch": true,  // 实时监听文件改动，自动编译
    "removeComments": true,  // 编译完删除注释
    "target": "es5",  // 转化为 ES5 语法（兼容性）
    "noImplicitAny": true,  // 更严格的编译！禁止隐形 any 类型
    "strictNullChecks": true,  // 除非我们指定类型可为空，否则赋予空值，是非法的
  }
}

类型

首先是 JS 的痛点：

function add(a, b) {
    return a + b;
}

add(a, b);

add(1, 2); // OK
add("1", 2);
add(1);

下面两种都不行。可是！！！ JS 不会报错，还能运行，而且完全合法。

尤其是第三种，b 没有赋值，就会默认赋值 undefined ！

这就问题大了。如果引入 ts 就好多了。

function add(a: number, b: number) {
    return a + b;
}

add(a, b);

add(1, 2); // OK
add("1", 2);  // 出错
add(1);  // 出错

这样，下面两种就不会被通过了，就出错了！可喜可贺！

当然，如果我们没写 :number 的话，ts 默认给我们赋予 any ，或者我们直接写入 :any ，比如说 b ，这样我们就能让 b 允许使用任何类型了，但是在真实项目中少这样做，这样会背离我们使用 ts 的初衷，让 TypeScript 变成 AnyScript 了。

如果一个值，我们希望它可有可无，那就冒号前写个问号：

function add(a: number, b?: number) {

返回值

我们的函数，如果没有返回值，那就使用 void 来标注：

function hello(): void {
    console.log('hello world!');
}

变量

如果是普通变量在声明的时候，当然 ts 是可以引入类型标注的。

但是，其实这个没有必要，太麻烦了，不是写 Java。我推荐大家省略。

let a: number = 1;  // 没必要
let a = 1;

function add(a: number, b: number): number {  // 没必要标注返回值，编译器知道
    return a + b;
}

function add(a: number, b: number) {
    return a + b;
}

因为 ts 还是比较智能的，它能推断出来。

我们标注的是一些，我们无法直接控制的值。比如用户的输入，或者是后续还需要赋值的值，这个我们必须加上标注。

比如数组。

let arr: number[];  // 是的，这个就是数组的声明了
let arr02: number[][];  // 这是二维数组，建议要声明。

//.... 很多代码

arr = [1, 2, 3, 4, 5, 6];  // 这个时候才开始
arr02 = [[1,2,3],[4,5,6]];

元组

和数组很类似，只不过里面的元素个数、类型都是确定的。

尤其是三维游戏、三维项目开发，里面的点是 xyz 三个值，我们可以表示为：

let p = [number, number, number?];  // 这就是元组了

p = [4,2,6];
p = [2,8];

你看，第三个，我多标了个问号，这意味着这个值可以省略。

元组还有下面几种：

let color: string | number;  // 这个 Color 可以使用 字符串 或者 数字

color = 123;
color = "blue";

//-----

let sex: "girl" | "boy" | "unknown";  // 限制取值，性别只能是 girl 或者 boy 或者 unknown

sex = "boy";
sex = "girl";

大型工程必备啊！

接口

这个在定义 类 时或者 obj 时很有用，除了限制类型，还能当「目录」使用，哈哈！

interface User {  // 只能是这两个，不能多，也不能少
    name: string;
    id: number;
}

const user: User = {
    name: "Tom",
    age: 18,  // 会报错！！！
}

然后，这个 User 对象，在声明时，就得按照这个标准了。

函数签名

限定某个函数必须具有特定的参数和返回值。这个在回调函数里，特别的实用！

function getValue(callback) {  // 一般写法
  //....
}

//---- TS 写法

// 要求回调函数必须有个字符串
// 而且还必须没有返回值
function getValue(callback: (data: string) => void) {  
  //....
}

//---- 使用

getValue((data) => {console.log(data)});  // 这个 OK
getValue((data) => {console.log(data * 2)});  // 报错，data * 2 违背了 string 的原则

很实用！

类型别名

就比如上面的那个 sex 。

我们可以直接将其使用 TS 里的 type 关键词，给这个类型起个别名。

type sex = "girl" | "boy" | "unknown";

function write(humanSex: sex){...}

之后直接拿来用！

第三方库不是 TS 怎么办？

可以安装官方给的 DefinitelyTyped 这个包。

仓库地址是：

安装很简单：

npm install --save-dev @types/node

// 之后安装时，就类似下面这样，就可以了
npm install --save-dev @types/包名

很多老的 npm 包是纯 JavaScript 写的，本身没有 TS 类型，社区开发者为这些 JS 包写了免费的类型文件，统一发布成 @types/包名 格式。

如果是node，则 TS 会自动识别node_modules/@types下的所有类型文件，不需要额外配置 了！

掌握这些，基本上就可以拿 TS 去干活儿了！

我真的很难理解为什么世界上会有定义变量时不需要指定类型的语言，用起来真的好别扭！比如 py 。