ts学习（基础篇二）

类型别名

类型别名是用来给一个新类型取一个新名字，一般用作优雅代码的时候使用,参考用法：

// 类型别名全都是以type开头
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

我感觉这个用的意义不太大，用的话也就是使代码更加的优雅好看。而且类型别名常用于联合类型。

字符串字面类型变量（常用）

字符串字面量类型用来约束取值只能是某几个字符串中的一个。

type test = 'click' | 'scroll' | 'mousemove';
const test1: test = 'no';
// 开始报错了！！！只能是上面click，scroll和mousemove其中的一个

元组

名字起的很玄幻，，其实没什么大用，定义类型的时候，合并不同类型，并只针对于数组。参考代码：

let xcatliu: [string, number] = ['Xcat Liu', 25];

唯一有一点注意的就是，加入想给他初始化赋值的时候，那么值必须将所有的类型都涵盖到

let xcatliu: [string, number] = ['Xcat Liu'];

// index.ts(1,5): error TS2322: Type '[string]' is not assignable to type '[string, number]'.
//   Property '1' is missing in type '[string]'.

枚举（常用）

枚举使用enum关键字来进行定义。一般分为两个，一个是常数项，一个是计算所得项。示例代码如下：

enum test = {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

枚举成员会被赋值从0开始递增的数字，同时也会对枚举值到枚举名进行反向映射。事实上，上面的例子可以编译为：

var Days;
(function (Days) {
    Days[Days["Sun"] = 0] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

使用枚举的时候尽量不要设置想同下标的枚举，因为会造成覆盖的情况，而且ts并不会报错。

常数枚举是我们经常用的枚举。

const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
编译的结果是：
directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

类（重点）

在传统方法中，JS通过构造函数实现类的概念，但是在ES6中，我们可以使用Class来进行。下面来进行一些基本的概念：

类(Class)：定义了一件事物的抽象特点，包含它的属性和方法

对象（Object）：类的实例，通过 new 生成

面向对象（OOP）的三大特性：封装、继承、多态

封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据

继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性

多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat

存取器（getter & setter）：用以改变属性的读取和赋值行为

修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法

抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现

接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

参考：https://ts.xcatliu.com/advanced/class

泛型（常用）

泛型是指在定义函数，接口和类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

泛型参考代码：

function createArray<T>(length: number, value: T): Array<T> {
    let result: T = [];
  for (let i = 0; i < length; i ++) {
    result[i] = value;
  }
  return result;
}
createArray<string>(3, 'x') 或者不指定类型，让泛型自己自动确定类型 createArray(3, 'x')

多个类型参数：

function swap<T,U>(tuple: [T,u]): [U, T]{
  return [tuple[1], tuple[0]];
}
swap([7, 'seven']); // ['seven', 7]

但是使用泛型的时候会存在泛型约束

最后的最后，代码检查

TS的代码检查主要参考两种方式：TSlint 或者使用 Eslint + typescript-eslint-parser

TSlint的优点在于，能够通过typescript的语法解析，利用类型系统做一些Eslint做不到的检查，

TSLint 的优点：

专为 TypeScript 服务，bug 比 ESLint 少
不受限于 ESLint 使用的语法树 ESTree
能直接通过 tsconfig.json 中的配置编译整个项目，使得在一个文件中的类型定义能够联动到其他文件中的代码检查

ESLint 的优点：

基础规则比 TSLint 多很多（249 : 151）
社区繁荣，插件众多（50+ : 9）

为什么我们需要Eslint搭配 typescript-eslint-parser一起使用??

因为Eslint默认使用Espree进行语法解析，无法识别ts的一些语法，所以我们需要再安装typescript-eslint-parser。由于 typescript-eslint-parser 对一部分 ESLint 规则支持性不好，故我们需要安装 eslint-plugin-typescript，弥补一些支持性不好的规则
参考：https://ts.xcatliu.com/engineering/lint