TS 自学笔记（一）

本文写于 2020 年 5 月 6 日

日常废话两句

有几天没有更新了，最近学的比较乱，休息了两天感觉好一些了。这两天玩了几个设计软件，过几天也写篇文章分享分享。

为啥要学 TS？

进入正题哈，经常写 JS 的人会特别多的碰到一个 bug：xxxx is not a function之类的。

这是为什么呢？

其实就是我们用了一些不属于它的方法。

比如说我们有一个const a = 250，然后我们让他a.filter(()=>{})。

有人可能会说，那明明是一个 number 类型，我怎么可能给他 filter 呢？

我之前就犯过这个错误，我想让一个数组等于另一个被 push 一个新元素数组：

let newArr = arr.push('hello');
newArr.filter(() => {});

要知道，arr.push 的返回值是新的数组长度！让一个 number 类型去使用数组方法，自然是会报错的。

好吧,我知道这样似乎非常愚蠢，但是总而言之，在日常写 JS 的报错中，有大把大把的错因都是这种完全可以避免掉的问题。

如果是 Java 或是 C#，编辑器在还没运行时就给会你划上红线，不会等到你运行了再去告诉你你错了。

这就是动态语言的毛病。

所以我们需要学习 TypeScript，用它来构建应用，节省时间。据说用了 TS，能有效减少 80%的 Bug（笑）

不管这是不是真的，从各个大框架对于 TS 的青睐程度来看，未来几年内，TS 必然会是绝对的热点之一！Angular 早早的就从 Angular.js 变成了 Angular（必须使用 TS）；React 对 TS 极其友好；Vue3 也开始使用 TS 重写。

毕竟，现在已经不只是：

能被 JS 改写的终将被 JS 改写

而是：

能被 TS 改写的，终将被 TS 改写

01 变量类型

JS 是弱类型语言，TS 却不是。TS 拥有这些类型：

1. undefined
2. null
3. boolean
4. number
5. string
6. object
7. array
----️JS 有的，️JS 没有的----
8. tuple
9. enum
10. any
11. void
12. never

注：对于 JS 来说，数组就是 Object 类型，并且在 JS 中数据类型并不是小写，而是大写。

在 2020 年，JS 的数据类型增加了 BigInt 和 Symbol 两种。

number、string、boolean 没有什么特别好说的，和 JS 没什么区别，我来写几个我觉得比较重要的。

数组的声明

let list: number[] = [1, 2, 3];
let list_b: Array<number> = [1, 2, 3];

第一种方法不难理解，就是生命一个 number 数组。

第二种方法叫做数组泛型，即Array<元素类型>。

什么叫做泛型呢？

如果我们有一个函数：

function identity(arg: number): number {
  return arg;
}

那这个时候，传入的变量就必须是数字。

考虑到可复用性的问题，我们可以使用泛型。

function identity<T>(arg: T): T {
  return arg;
}

identity 函数叫做泛型（注意，T 不是泛型！），因为它可以适用于多个类型。

T 是类型变量，它是一种特殊的变量，只用于表示类型而不是值。它可以帮助我们捕获用户传入的类型，让我们可以对这个类型加以利用。

如果我们不确定传入的参数类型，我们是完全可以通过 any 来实现的，但是 any 就会让我们丢失 T 这一信息。

enum 是成组常量的好用法！

enum Hello {
  teacher: "老师好",
  classmate: "同学好",
  parents: "爸爸好",
  girlfriend: "刘好"
}

一般情况，枚举类型会自动赋给自己常量值：

enum Hello {
  teacher, // 0
  classmates, // 1
  parents, // 2
  girlfriend // 3
}

我们也可以从中间打断这个赋值：

enum Hello {
  teacher, // 0
  classmates, // 1
  parents = 5, // 5
  girlfriend // 6
}

接下来会进行顺延。

从来没有的 Never 值

never 类型表示的是那些永不存在的值的类型，听起来就像个悖论——我如何列举一个不存在的值？

其实never 类型可以是抛出的异常，或根本就不会有返回值的函数的返回值类型。

function error(message: string): never {
  throw new Error(message);
}
function fail() {
  return error('Something failed');
}
function infiniteLoop(): never {
  while (true) {}
}

总体来讲大同小异，TS 补充了一些在别的语言中有过的常见数据类型，相信这一块对于 JS 开发者来说，不会是什么难题。

唯一的难题就是习惯，可不能老是使用 any 类型！

PS: 在命名变量的时候有一个小坑，变量名不能命名为name，因为会与 DOM 中的全局 window 对象下的 name 属性出现重名。

（未完待续）