“类型思维”之Typescript，你掌握了吗？

时间：2020-09-17 20:42:18 阅读：26 评论：0 收藏：0 [点我收藏+]

标签：系统成员修饰符 src 好的 mic 继承之一完全 each

（一）背景

JavaScript是一门动态弱类型语言对变量的类型非常宽容而且不会在这些变量和它们的调用者之间建立结构化的契约。

试想有这么几个场景：

1: 你调用一个别人写的函数，但是这个人没有写注释，为了搞清楚参数类型，只能去看里面的逻辑

2: 为了保证代码的健壮性，你需要对一个函数的输入参数进行各种假设判断

3: 让你维护一个重要的底层类库，你不小心更换了一个参数类型，但是不知道有多少处的引用

4: 明明定义好的接口，可一连调就报错了，TypeError：Cannot read property ‘length’of undefined，于是你就找后端理论，这个接口定义不是数组么？

以上场景归根结底就是因为 javascript 是动态弱类型语言，长时间在没有类型约束的环境下开发，就会造成“类型思维”的缺失，养成不良的编程习惯，这也是做前端开发的短板之一

1、强类型语言

在强类型语言中，当一个对象从调用函数传递到被调用函数时，其类型必须与被调用函数中声明的类型兼容 ——Liskov, Zilles 19

技术图片

上图解释：有两个方法，方法A和方法B。方法A调用方法B的时候，x类型必须要和y类型兼容。兼容就意味着，y可以赋值给x，而且程序还可以正常运行这是比较宽泛的定义，没有产生具体的规则，现在我们对强类型语言的定义会更精确一些。

强类型语言：不允许改变变量的数据类型, 除非进行强制类型转换

技术图片

以Java语言为例：

（左图）报错：提示类型不兼容，不能将布尔类型转换为整型

（右图）打印 x = 97。java将字符a进行了强制类型转换，将a的ACSLL码强制给了x，这样x类型依然是整型

2、弱类型语言

弱类型语言：在弱类型语言中, 变量可以被赋予不同的数据类型

技术图片

以js语言为例。图解：把z赋值给x 7、打印 x 为字符串‘a‘ 。从这里就可以看出JS是一门弱类型语言

3、静态类型语言与动态类型语言

静态类型语言：在编译阶段确定所有变量的类型

动态类型语言：在执行阶段确定所有变量的类型

技术图片

左图解 JS代码：当编译器在看add方法这行代码的时候无法知道变量a、b的数据类型，只有在程序执行的时候，才能根据实际传递进来的参数再确定

右图解 C++代码： C++ 和JS不同的是，它在编译的时候就能够确定变量的数据类型，而且a、b类型一定是整型

4、静态类型与动态类型比较

技术图片

1、从对比来看，静态类型语言的优势要大于动态类型语言。如果是一门动态弱类型语言，就更会被打入鄙视链的底端。

2、动态类型语言的支持者也有自己的理由

性能是可以改善的(V8引擎)，V8在性能方便做得很好，相对损失的性能而言，语言的灵活性更重要
隐藏的错误可以通过单元测试发现
文档可以通过工具生成

其实，这种争论一直存在，这说明任何语言的特点都具有两面性，也是一个发展和进化的过程，不能一概而论，要看具体的场景和性价比。

比如js就是一门动态弱类型语言，但是它目前还是被广泛应用。这也引申出一道面试题：大家也可以一起思考一下： TS会替代JS么？

我认为TypeScript更多地是对JavaScript的补充，而不是替代品，而且两者的普及都在增长。

5、语言类型象限

技术图片

横轴代表从动到静。纵轴代表从弱到强

这个图可以帮助我们理解动态类型、静态类型、强类型和弱类型语言有哪些。

值得庆幸的是，开源社区也一直努力的解决这个问题，早在2014年 Facebook 推出了 Flow，微软也在同一年发布了 TypeScript 1.0 版本，它们都是致力于为JS提供静态类型检查，如今过去6年了。TS发展好像是更好一些，多个团队，比如 Angular和Vue，开始全面使用TS重构代码，甚至连Facebook自家的产品比如 Jest和Yarn，都在从Flow向TS转移。可以说在ECMScript标准推出静态类型检查之前，TS是当下解决此问题的最佳方案。

（二）Typescript是什么？

Typescript是拥有类型系统的JavaScript的超集。

可以编译成纯JavaScript。需要注意三点：

1. 类型检查。typescript会在编译代码时进行严格的静态类型检查，这就意味着，你可以在编写代码的阶段，发现可能存在的隐患，而不是上完线才发现

2. 语言拓展。typescript会包括来自ES6和未来提案中的特性，比如异步操作和装饰器，还有就是，也会从java语言借鉴某些特性，比如接口和抽象类。

3. 工具属性。typescript可以编译成标准的javascript，可以在任何浏览器操作系统上运行，无需任何运行时的额外开销，从这个角度上讲，typescript更像是一个工具，而不是一门独立的语言

1. 基本类型

ES6的数据类型：• Boolean • Number • String • Symbol • undefined • null • Array • Function • Object

Typescript的数据类型在ES6的基础上新增了几种： • void • any • never • 元组 • 枚举 • 高级类型

  // 原始数据类型
  let bool: boolean = true
  let num: number = 123
  let str: string = ‘abc‘

  // 数组
  let arr: number[] = [1, 2, 3]
  let arr: Array<number|string> = [1, 2, 3, ‘4‘]

  // 元组（特殊的数组，限定了数组元素的类型和个数）
  let tuple2: [number, string] = [0, ‘1‘]
  // 元组越界问题：
  tuple2.push(2)
  console.log(tuple2)
  tuple[2] // 报错，不能进行越界访问

  // 函数
  let add = (x, y) => x + y; // 报错。需要为参数加上类型注解
  let add = (x: number, y: number): number => x + y
  let add = (x: number, y: number) => x + y
  add11 = add22 // 类型推断可以省略返回值number  
  let compute: (x: number, y: number) => number
  compute = (a, b) => a + b

  // 对象
  let obj: object = { x: 1, y: 2 }
  obj.x = 3 // 报错。
  let obj: { x: number, y: number } = { x: 1, y: 2 }
  obj.x = 3

  // symbol
  let s1: symbol = Symbol()
  let s2 = Symbol()
  console.log(s1 === s2) // false

  // undefined, null
  let un: undefined = undefined // 被声明undefined，就不能赋值任何其他数据类型，只能赋值它本身
  let un: undefined = ‘1‘ // 报错
  let nu: null = null
  num = undefined // 报错。ts官方文档中，undefined和null是任何类型的子类型，说明可以赋值给其他类型，可以设置strictNullChecks：false
  num = null


  // void 可以确保任何表达式返回值一定是undefined
  console.log(void 0) // undefined。
  // 原因：undefined在js中不是保留字，也可以自定义undefined变量覆盖全局undefined
  // 如下：控制台打印输出
  (function (){
     var undefined = 0;
　　  console.log(undefined)
  })()
  let noReturn = () => {}

  // any
  let x
  x = 1
  x = [[]]
  x = () => {}

  // never
  let error = () => {
     throw new Error(‘error‘)
  }
  let endless = () => {
     while(true) {}
  }

2. 类型注解

作用：相当于强类型语言中的类型声明

语法：（变量/函数）：类型名称

3. 枚举

场景：如下图伪代码为例：权限操作判断函数，不同权限对应不同UI界面，用户登陆系统，一般会做初始化的工。

这种代码存在两个问题： 1）可读性差：很难记住数字的含义。 2）可维护差：硬编码，牵一发动全身

技术图片

解决方案：TS的枚举类型。枚举可以理解成手机里的通讯录，拨打电话的时候只需要记住人名，不需要记住电话号码，而且，号码是可变性的，人名是不可变的

// 数字枚举，有反向映射

　　enum Role {

　　　　Reporter, // 0

　　　　Developer, // 1

　　　　Maintainer, // 2

　　　　Owner, // 3

　　　　Guest // 4

　　}

　　Role.Reporter = 2 // 报错。枚举成员只读不可修改

// 字符串枚举，没有反向映射
enum Message {
    Success = ‘恭喜你，成功了‘,
    Fail = ‘抱歉，失败了‘
}

// 异构枚举（字符串/数字枚举混用）不建议使用
enum Answer {
    N,
    Y = ‘Yes‘
}

// 枚举成员的分类
enum Char {
    // const member 常量枚举，会在编译的时候计算结果，以常量的形式出现在运行时环境
    a,          // 1.无初始值
    b = Char.a, // 2.对已有成员的引用
    c = 1 + 3,  // 3.常量表达式
    
    // computed member 计算枚举，非常量表达式，不会在编译阶段计算，而是会保留到程序的执行阶段
    d = Math.random(),
    e = ‘123‘.length,
}

// 常量枚举。会在编译阶段被移除
// 使用场景：不需要对象，只是需要对象值时
const enum Month {
    Jan,
    Feb,
    Mar,
    Apr = Month.Mar + 1
}
let month = [Month.Jan, Month.Feb, Month.Mar]
// console.log(month, ‘month==‘)

// 枚举类型
enum E { a, b }
enum F { a = 0, b = 1 }
enum G { a = ‘apple‘, b = ‘banana‘ }

let e: E = 3
let f: F = 3
console.log(e === f) // 报错 不同类型的枚举不可比较

let e1: E.a = 3
let e2: E.b = 3
let e3: E.a = 3
console.log(e1 === e2) // 报错console.log(e1 === e3) // 正确

// 字符串枚举取值只能是枚举成员的类型
let g1: G = G.a
let g2: G.a = G.a

4. 接口

4.1 作用：接口可以用来约束对象、函数以及类的结构的类型，是一种代码编写的契约，我们严格遵守，而且不能改变

4.2 语法：interface （变量名称) { }

4.3 分类：

对象类型接口
函数类型接口
混合类型接口

// 定义一个List接口
interface List {
    readonly id: number;
    name: string;
    [x: string]: any; // 字符串索引签名，不确定接口返回个数
    age?: number; // 可索引接口
}
interface Result {
    data: List[]
}
function render(result: Result) {
    result.data.forEach((value) => {
        console.log(value)
        if (value.age) {
           console.log(value.age, ‘---‘)
        }
    })
}
let result = {
    data: [
        {id: 1, name: ‘A‘, sex: ‘male‘},
        {id: 2, name: ‘B‘}
    ]
}
render(result)

4.4 数字索引接口

interface StringArray {
    [index: number]: string
}
let chars: StringArray = [‘a‘, ‘b‘]

4.5 字符串索引接口

interface Names {
    [x: string]: string;
    // [x: string]: any;
    // y: number;
    [z: number]: string; // 数字索引签名的返回值必须要是字符串索引签名返回值的子类型，因为javascript会进行类型转换，将number转换成string，这样就能保证类型的兼容性
    // [z: number]: number;
}

使用接口的好处：可以思考变量的类型，也可以思考接口的边界问题，这个过程非常有利于培养‘类型思维’

5. 函数

5.1 函数定义几种方式：

function, function a(x: number, y: number) => number
变量, let a:(x: number, y: number) => number
类型别名, type a = (x: number, y: number) => number
接口, interface a { (x: number, y: number): number }

// function
function add1(x: number, y: number) {
    return x + y
}
// 变量
let add2: (x: number, y: number) => number
// 类型别名
type add3 = (x: number, y: number) => number
// 接口
interface add4 {
    (x: number, y: number): number
}
add1(1, 2, 3) // 报错。 ts中形参和实参必须一一对应

5.2 可选参数

function add5(x: number, y?: number) {
    return y ? x + y : x
}
add5(1)

5.3 增加默认值

function add6(x: number, y = 0, z: number, q = 1) {
    return x + y + z + q
}
add6(1, undefined, 3)
console.log(add6(1, undefined, 3))

5.4 扩展运算符

function add7(x: number, ...rest: number[]) {
    return x + rest.reduce((pre, cur) => pre + cur);
}
add7(1, 2, 3, 4, 5)
console.log(add7(1, 2, 3, 4, 5))

5.4 函数重载

函数重载的好处：不需要为了相似功能的函数选用不同的函数名称，增强了函数的可读性

function add8(...rest: number[]): number;
function add8(...rest: string[]): string;
function add8(...rest: any[]) {
    let first = rest[0];
    if (typeof first === ‘number‘) {
        return rest.reduce((pre, cur) => pre + cur);
    }
    if (typeof first === ‘string‘) {
        return rest.join(‘‘);
    }
}
console.log(add8(1, 2))
console.log(add8(‘a‘, ‘b‘, ‘c‘))

6. 类

我们知道es6引入了class关键字，我们也终于可以像传统的面向对象语言那样去创建一个类。总体上来说，ts的类覆盖了es6的类，同时也引入了其他的特性，那么两者之间有什么不同呢？

6.1 类的实现

注意1: 类成员属性都是实例属性，不是原型属性
注意2: 类成员方法都是实例方法，不是原型方法

class Dog {
    constructor(name: string) { // 自动配对为类的本身 Dog
        this.name = name
    }
    public name: string = ‘dog‘
    run() {}
}
// console.log(Dog.prototype) // 报错。类成员属性都是实例属性，不是原型属性let dog = new Dog(‘Dog‘)console.log(dog)

6.2 类的继承

类的继承，extends关键字

class Dog {
    constructor(name: string) {
        this.name = name
    }
    public name: string = ‘dog‘
    run() {}
}
let dog = new Dog(‘Dog‘)
console.log(dog)


class Husky extends Dog {
    constructor(name: string, color: string) {
        super(name)
        this.color = color
    }
    color: string
}

6.3 类的成员修饰符

成员修饰符：public、private、protected、readonly、static

// 父类
class Dog1 {
    constructor(name: string) {
        this.name = name
        this.pri()
    }
    name: string = ‘dog1‘    　　　　// 类的所有属性默认是public
    run() {}
    private pri() {}                // 私有成员，只能被类的本身调用不能被类的实例和子类调用
    protected pro() {}              // 受保护成员，只能在类或者子类中访问，不能在类的实例中访问
    readonly legs: number = 4       // 只读属性
    static food: string = ‘bones‘   // 静态成员。
    sleep() {
        // console.log(‘Dog sleep‘)
    }
}
let dog1 = new Dog1(‘Dog1‘)
console.log(dog1.pri) // 报错
console.log(dog1.pro) // 报错
console.log(Dog1.food)
console.log(dog1.food) // 报错。静态成员只能通过类名调用，不能通过子类来调用

// 子类调用
class Husky extends Dog1 {
    // 构造函数参数也可以添加修饰符，变成实例的属性
    constructor(name: string, public color: string) { 
        super(name)
        this.color = color
        // this.pri() // 报错
        this.pro()
    }
    // color: string
}
console.log(Husky.food) // 类的静态成员也可以被继承

6.4 类的抽象类

抽象类：abstract 关键字。ES中没有引入抽象类的概念，这是ts对es的又一次扩展。所谓抽象类就是只能被继承，而不能被实例化的类。

优点：1. 方法的复用

　　　2. 可以实现多态

abstract class Animal {
    eat() {
        // console.log(‘eat‘)
    }
    abstract sleep(): void // 抽象方法。好处：明确知道子类可以有其他的实现，不必在父类中实现
}
let animal = new Animal(); // 报错。只能被继承，而不能被实例化

class Dog2 extends Animal {
    constructor(name: string) {
        super()
        this.name = name
    }
    name: string
    run() {}
    sleep() {
        console.log(‘Dog2 sleep‘)
    }
}
let dog2 = new Dog2(‘Dog2‘)
console.log(dog2.eat()) // ‘eat‘。子类可以调用抽象类里的方法
console.log(dog2.sleep()) // ‘Dog2 sleep‘

6.4 类的多态

多态：在父类中定义一个抽象方法，在多个子类中对这个方法有不同的实现，在程序运行的时候，会根据多个对象，执行不同操作。

// 父类

abstract class Animal {

    eat() {

        console.log(‘eat‘)
    }
    abstract sleep(): void
}

// 子类中对这个抽象方法有不同的实现
class Cat extends Animal {
    sleep() {
        console.log(‘Cat sleep‘)
    }
}
let cat = new Cat()
console.log(cat.sleep()) // ‘Cat sleep‘

6.5 类的this类型（特殊类型）

定义：类的成员方法会返回一个this，这样就可以方便实现链式调用。

class Workflow {
    step1() {
        console.log(this, ‘step1‘)
        return this
    }
    step2() {
        console.log(this, ‘step2‘)
        return this
    }
}
new Workflow().step1().step2()

// 继承的时候，this也可以表现为多态。this既可以是父类型，也可以是子类型
// 作用：保证了父类调用和子类调用的连贯性
class MyFlow extends Workflow {
    next() {
        console.log(this, ‘next‘)
        return this
    }
}
new MyFlow().next().step1().next().step2() // 父类和子类之间调用的连贯性

7. 类与接口的关系

接口可以像类一样，相互继承，一个接口可以继承多个接口。但是，接口继承类时需注意，接口在抽离类的成员的时候，不仅抽离了公共成员，而且抽离了私有成员和受保护成员。

技术图片

图解：

1、首先接口之间是可以相互继承的，这样可以实现接口的复用

2、类之间也可以相互继承，可以实现方法和属性的复用

3、接口可以通过类来实现，但是接口只能约束类的共有成员，不能约束类的私有成员

4、接口也可以抽离出类的成员。抽离的时候会包括共有成员，私有成员，受保护成员

7.1 类类型接口

一个类通过关键字implements声明自己使用一个或者多个接口。

注意：

1. 类实现的接口，必须要实现类接口中声明定义的所有的属性

2. 类型接口不能约束类的构造函数

3. 类接口只能约束类的共有成员，不能约束类的私有成员

interface Human {
    // new (name: string): void; // 2.报错。类型接口也不能约束类的构造函数
    name: string;
    eat(): void;
}
// implements 可以实现多个接口，用逗号分开就行，接口的方法一般为空的, 必须重写才能使用
class Asian implements Human {
    constructor(name: string) {
        this.name = name;
    }
    name: string
    // private name: string // 3.报错 类接口只能声明共有成员
    eat() {}
    // 可以定义自己的属性
    // age: number = 0
    // sleep() {}
}

7.2 接口继承

接口继承接口。接口的继承可以抽离出可重用的接口。

interface Man extends Human {
    run(): void
}
interface Child {
    cry(): void
}
interface Boy extends Man, Child {}
let boy: Boy = {
    name: ‘‘,
    eat() {},
    run() {},
    cry() {}
}

接口继承类。接口把类的成员都抽象了出来，有类的成员结构，没有具体的实现

class Auto {
    state = 1
    // private state1 = 0 // 报错。注意：接口在抽离类的成员的时候，不仅抽离了公共成员，而且抽离了私有成员和受保护成员
}
interface AutoInterface extends Auto {

}
class C implements AutoInterface {
    state = 1
}

8. 泛型

很多时候，我们希望一个函数或者一个类能支持多种数据类型，有很大的灵活性，如下图：

技术图片

定义一个log函数，接收一个string，最后打印出这个字符串。但是，我希望这个字符串能接收一个字符串数组，根据前面介绍的，应该怎么实现呢？

1、可以通过函数重载实现

技术图片

先定义一个接收字符串的函数，再定义一个接收字符串数组的函数，最后在一个比较宽泛的版本里打印实现

2、也可以通过联合类型实现

技术图片

看起来比函数重载简便一些。

3、但是，现在我希望这个函数能接收任何类型的参数，实际上从前面的函数重载也可以看出，可以使用any类型。

技术图片

看样子这个函数好像是满足了我们的需求。但是，产生了另外的一个问题，any类型会丢失一些信息，就是类型之间的约束关系，忽略了输入参数的类型和函数返回值的类型必须是一致的这个问题。

当一个调用者看见这个log函数的时候，完全无法获知这种约束关系，这个时候就需要用到“泛型”了！

那么什么是泛型呢？？？

8.1 什么是泛型

泛型定义：不预先确定的数据类型, 具体的类型在使用的时候才能确定。

8.2 泛型参数

泛型从字面上理解就是“一般的，广泛的，不需要预先定义的的数据类型” 下面我们用泛型改造一下上面的log函数。

function log<T>(value: T): T {
    // console.log(value);
    return value;
}
log<string[]>([‘a‘, ‘,b‘, ‘c‘])
log([‘a‘, ‘,b‘, ‘c‘]) //ts的类型推断，可以省略类型参数，直接传入数组

除了上述的参数可以用泛型表示，函数、接口、类可不可以更灵活的去用泛型呢？答案是，必须能！

8.3 泛型函数

type Log = <T>(value: T) => T
let myLog: Log = log

看样子是不是很简单。

8.4 泛型接口

interface Log<T> { // 约束接口的所有成员
    (value: T): T
}
// let myLog: Log = log; // 报错。注意：当泛型约束了所有的接口之后，使用的时候必须指定一个类型
let myLog: Log<number> = log
myLog(1)

8.3 泛型类

class Log<T> {
    // static run(value: T) { // 报错。注意：泛型不能运用于类的静态成员
    //     console.log(value)
    //     return value
    // } 
    run(value: T) {
        // console.log(value)
        return value
    }
}
let log1 = new Log<number>()
log1.run(1)
let log2 = new Log<string>()
log2.run(‘1‘)
let log3 = new Log(); // 不指定类型参数,value可以是任意类型的值
log3.run({ a: 1 })

8.4 泛型约束

interface Length {
    length: number
}

function log<T extends Length>(value: T): T { // 继承Length接口，受到Length接口的约束
    // console.log(value, value.length);
    return value;
}
log([1])
log(‘123‘)
log({ length: 3 })
log(123) // 报错：number没有length属性

8.5 泛型好处

1）增强程序的可扩展性：函数或类可以很轻松地支持多种数据类型