重学TS（二）

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战。

TypeScript绝对是一个值得深挖的东西，但是大多数人只为了用而用，用了一个类型检查就觉得是使用TS了，但是实际上它还有很多地方需要去了解，比如TS的模块化思想可以让代码更专注，TS的类型声明可以加强限制等等。

1.TypeScript函数

TypeScript函数和JavaScript的函数存在不少的差异，比较明显的就是关于函数重载。在大学学C语言的时候就接触过函数重载，但是到了JS这里反而没有这个概念了，而TS就重新拾起了这个概念。

何为函数重载？即使用相同名称和不同参数数量或类型可以创建多个方法。在JS中，一个函数的参数都是可选的，只要方法名相同，就代表使用同一个方法；但是TS不行，TS参数分为必填和可选参数，当你传入不同的参数，可能调用的是不同的方法。

function TSFunction(name: string, value?: string): string{
    return name
}

讲一个题外话--剩余参数，可以通过ES6的...去生成不定参数

function Test(first, ...rest){
    console.log(rest)
}
Test(1,2,3)     //[2,3]

2.TypeScript接口和类型别名

• 两者都可以用来描述对象的形状或函数签名。

interface a {
  name: string;
  value: string;
}
type b = {
  name: string;
  value: string;
}

• 但是也存在很多不同 a. 拓展
  interface可以通过extends，而type只能通过交叉类型

interface a {
  name: string;
  value: number;
}
interface b extends a {
  label: string
}
type c = a & {label: string}

b. 声明
type可以声明基本类型别名，联合类型，元组等类型，还可以通过typeof获取实例的类型。

type a = string
type b = typeof Element

interface可以声明合并，同一接口声明两次时，会将他们合并。

interface a {
  name: string
}
interface a {
  value: number
}
实际 a = {
  name: string
  value: number
}

3.工具类型

为了方便开发者，TS内置了一些常用的工具类型。

• typeof 用来获取一个实例的类型
• keyof 用来获取类型的所有键

interface a {
  name: string;
  value: number
}
type b = keyof a   //name | value

• in 用来遍历枚举类型

type list = 'D' | 'Z'
interface a {
    [key in list]: any
}

• extends 用来继承

4.装饰器

装饰器就是一个表达式，执行后返回一个函数。是如果要使用装饰器的话，必须要在命令行或者tsconfig.josn里启用选项

tsc --target ES5 --experimentalDecorators
或
{
  "compilerOtions":{
    "target": "ES5",
    "experimentalDecorators": true
  }
}

装饰器提供了一个语法糖，可以通过@直接使用装饰器。

• 类装饰器
• 属性装饰器
• 方法装饰器
• 参数装饰器

时间有限，装饰器就留待下次讲设计模式的时候再详细讲吧，这里就不展开了。