关于typescript:TypeScript-类型安全

4次阅读

共计 9692 个字符，预计需要花费 25 分钟才能阅读完成。

TypeScript 中有很多中央波及到子类型 subtype、父类型 supertype、协变 Covariant、逆变 Contravariant、双向协变 Bivariant 和不变 Invariant的概念，如果搞不清这些概念，那么很可能被报错搞的无从下手，或者在写一些简单类型的时候看到他人能够这么写，然而不晓得它的原因。

在 TypeScript 中，extends 关键字在不同利用场景下有以下三种含意：

示意继承 / 拓展的含意:

继承父类的办法和属性

class Animal {
  public weight: number = 0
  public age: number = 0
}

class Dog extends Animal {public wang() {console.log('汪！')
  }
  public bark() {}
}

class Cat extends Animal {public miao() {console.log('喵~')
  }
}

继承类型

interface Animal {age: number}

interface Dog extends Animal {bark: () => void
}
 // Dog => {age: number; bark(): void }

示意束缚的含意

在书写泛型的时候，咱们往往须要对类型参数作肯定的限度，比方心愿传入的参数都有 name 属性的数组咱们能够这么写：

function getCnames<T extends {name: string}>(entities: T[]):string[] {return entities.map(entity => entity.cname)
}

示意调配的含意（可赋值性 assignable）

type Animal = {name: string;}
type Dog = {
  name: string;
  bark: () => void}
type Bool = Dog extends Animal ? 'yes' : 'no'; // 'yes'

以下重点介绍示意调配含意，也就是可赋值性的一些用法

type Equal<X, Y> = X extends Y ? true : false;

type Num = Equal<1, 1>; // true
type Str = Equal<'a', 'a'>; // true
type Boo1 = Equal<true, false>; // false
type Boo2 = Equal<true, boolean>; // true

类型 X 能够调配给类型 Y，而不是说类型X 是类型 Y 的子集

它天然被调配的一些例子：

一个从来不会有返回值的函数（如：如果函数内含有 while(true) {}）；
一个总是会抛出谬误的函数（如：function foo() { throw new Error('Not Implemented') }，foo 的返回类型是 never）；

never 是所有类型的子类型

type A = never extends 'x' ? string : number; // string

type P<T> = T extends 'x' ? string : number;
type B = P<never> // string

class Animal {
  public weight: number = 0
  public age: number = 0
}

class Dog extends Animal {public wang() {console.log('wang')
  }
  public bark() {}
}

class Cat extends Animal {public miao() {console.log('miao')
  }
}

type Equal<X, Y> = X extends Y ? true : false;
type Boo = Equal(Dog, Animal) // true
type Boo = Equal(Animal, Dog) // false

type Boo = Equal(Animal, Dog) // false 这是因为 Animal 没有bark 属性，类型 Animal 不满足类型 Dog 的类型束缚。因而，A extends B，是指 类型 A 能够 调配给 类型 B，而不是说类型A 是类型 B 的子集 ，了解extends 在类型三元表达式里的用法十分重要。

还是以动物类做比喻：

interface Animal {age: number}

interface Dog extends Animal {bark: () => void
}

let animal: Animal
let dog: Dog

在这个例子中，Animal 是 Dog 的父类，Dog是 Animal 的子类型，子类型的属性比父类型更多，更具体。

在类型零碎中，属性更多的类型是子类型。
在集合论中，属性更少的汇合是子集。

也就是说，子类型是父类型的超集，而父类型是子类型的子集，这是直觉上容易搞混的一点。

记住一个特色，子类型比父类型更加具体，这点很要害。

上述例子中能够看出，animal 是一个「更宽泛」的类型，它的属性比拟少，所以更「具体」的子类型是能够赋值给它的，因为你是晓得 animal 上只有 age 这个属性的，你只会去应用这个属性，dog 上领有 animal 所领有的所有类型，赋值给 animal 是不会呈现 类型平安问题 的。

反之，如果 dog = animal，那么后续使用者会冀望 dog 上领有 bark 属性，当他调用了 dog.bark() 就会引发运行时的解体。

从可赋值性角度来说，子类型是能够赋值给父类型的，也就是 父类型变量 = 子类型变量 是平安的，因为子类型上涵盖了父类型所领有的的所有属性。

当我初学的时候，我会感觉 T extends {} 这样的语句很奇怪，为什么能够 extends 一个空类型并且在传递任意类型时都成立呢？当搞明确下面的知识点，这个问题也天然迎刃而解了。

到这里为止，算是根本讲完了 extends 的三种用法，以下进入正题：逆变协变、双向协变和不变

ts 写久了，有次在为某个组件写 props 类型的时候须要传一个 onClick 的工夫函数类型时忽然有个问题涌现脑海：

为什么在 interface 外面定义函数类型都是写成函数属性而不是办法，即:

interface Props {handleClick: (arg: string) => number   // 广泛写法
  handleClick(arg: string): number  // 非主流写法
}

终于在 typescript-eslint 中看到规定集时遇到了这个规定

@typescript-eslint/method-signature-style

规定案例如下：

❌ Incorrect

interface T1 {func(arg: string): number;
}
type T2 = {func(arg: boolean): void;
};
interface T3 {func(arg: number): void;
  func(arg: string): void;
  func(arg: boolean): void;
}

✅ Correct

interface T1 {func: (arg: string) => number;
}
type T2 = {func: (arg: boolean) => void;
};
// this is equivalent to the overload
interface T3 {func: ((arg: number) => void) &
    ((arg: string) => void) &
    ((arg: boolean) => void);
}

A method and a function property of the same type behave differently. Methods are always bivariant in their argument, while function properties are contravariant in their argument under strictFunctionTypes.

雷同类型的办法和函数属性的行为不同。办法在它们的参数中总是双变的，而函数属性在严格性能类型下的参数中是逆变的。

看到这句话后也是一脸懵逼，第一次见到双向协变和逆变这两个词，于是查阅材料找到了他们的概念以及延长的协变和不变

先来段维基百科的定义：

协变与逆变 (covariance and contravariance) 是在计算机科学中，形容具备父 / 子型别关系的多个型别通过型别结构器、结构出的多个复杂型别之间是否有父 / 子型别关系的用语。

咦，父 / 子型别关系后面如同也提到过，而后说起逆变和协变，又要提到后面说的可调配性，这也就是为什么文章结尾要花大篇幅去介绍 extends 关键字的起因，在 ts 中决定类型之间的可调配性是基于结构化类型（structural typing）的

那么设想一下，当初咱们别离有这两个子类型的数组，他们之间的父子关系应该是怎么样的呢？没错，Animal[] 仍然是 Dog[] 的父类型，对于这样的一段代码，把子类型赋值给父类型仍然是平安的：

let animals: Animal[]
let dogs: Dog[]

animals = dogs

animals[0].age // ✅ok

转变成数组之后，对于父类型的变量，咱们仍然只会去找 Dog 类型中肯定有的那些属性（因为子类型更加具体，父类型有的属性子类型都有）

那么，对于 type MakeArray<T> = T[] 这个类型结构器来说，它就是 协变（Covariance） 的。

逆变的确比拟难懂，先做一个有（无）趣（聊）的题（起源：《深刻了解 TypeScript》）

开始做题之前咱们先约定如下的标记：

A ≼ B 意味着 A 是 B 的子类型。
A → B 指的是以 A 为参数类型，以 B 为返回值类型的函数类型。
x : A 意味着 x 的类型为 A。

问题：以下哪种类型是 Dog → Dog 的子类型呢？

Greyhound → Greyhound
Greyhound → Animal
Animal → Animal
Animal → Greyhound

让咱们来思考一下如何解答这个问题。首先咱们假如 f 是一个以 Dog → Dog 为参数的函数。它的返回值并不重要，为了具体形容问题，咱们假如函数构造体是这样的：f : (Dog → Dog) → String。

当初我想给函数 f 传入某个函数 g 来调用。咱们来瞧瞧当 g 为以上四种类型时，会产生什么状况。

1. 咱们假如 g : Greyhound → Greyhound，f(g) 的类型是否平安？

不平安，因为在 f 内调用它的参数 (g) 函数时，应用的参数可能是一个不同于灰狗但又是狗的子类型，例如 GermanShepherd（牧羊犬）。

2. 咱们假如 g : Greyhound → Animal，f(g) 的类型是否平安？

不平安。理由同(1)。

3. 咱们假如 g : Animal → Animal，f(g) 的类型是否平安？

不平安。因为 f 有可能在调用完参数之后，让返回值，也就是 Animal（动物）狗叫。并非所有动物都会狗叫。

4. 咱们假如 g : Animal → Greyhound，f(g) 的类型是否平安？

是的，它的类型是平安的。首先，f 可能会以任何狗的种类来作为参数调用，而所有的狗都是动物。其次，它可能会假如后果是一条狗，而所有的灰狗都是狗。

也就是说：在对类型别离调用如下的类型结构器之后：

type MakeFunction<T> = (arg: T) => void

父子类型关系逆转了 (用下面的题来了解：Animal → Greyhound 是 Dog -> Dog 的子类型，然而 Animal 却是 Dog 的父类型)，这就是 逆变（Contravariance）。

通过这个例子能够发现：

返回值 -> 协变（Greyhound -> Dog）
入参通常应该为逆变（Animal <- Dog）

理解了这两个概念之后咱们能够大抵猜想双向协变和不变的定义，双向协变那就是又能够协变又能够逆变，不变反之，既不能协变也不能逆变，当初咱们先到之前困惑的中央：interface Props{}外面为什么倡议用函数属性的写法定义函数类型？

先理解一个知识点：这两种写法到底有什么区别？

// 尝试在 tsconfig.ts => compilerOptions => 增加 / 移除 "strictFunctionTypes": true 这条规定，别离查看以下后果
interface Animal {name: string}

interface Dog extends Animal {wang: () => void
}

interface Cat extends Animal {miao: () => void
}

// 这里能够类比咱们说的 Props 接口定义
interface Comparer<T> {compare(a: T, b: T): number
  // compare: (a: T, b: T) => number;
}

declare let animalComparer: Comparer<Animal>
declare let dogComparer: Comparer<Dog>

animalComparer = dogComparer // ???
dogComparer = animalComparer // Ok

咱们来看看以下这两种编译成 js 的后果区别是什么？

class Handler {constructor() {this.handleDebounce();
    this.handleThrottle();}

  handleDebounce() {console.log('防抖函数', this);
  }

  handleThrottle = () => {console.log('节流函数', this);
  }
}

let handler = new Handler();

Compile…. =>

var Handler = /** @class */ (function () {function Handler() {
        var _this = this;
        this.handleThrottle = function () {console.log('节流函数', _this);
        };
       
        this.handleDebounce();
        this.handleThrottle();}

    Handler.prototype.handleDebounce = function () {console.log('防抖函数', this);
    };

    return Handler;
}());

var handler = new Handler();

能够看到 handleDebounce 被写入了原型对象上，原生对象的通用办法也写在了原型，实际上 typescript 的这种行为是为了兼容 js 的行为，兼顾开发体验。

再用官网的两个例子再次阐明这个问题：

declare let f1: (x: Animal) => void;
declare let f2: (x: Dog) => void;
declare let f3: (x: Cat) => void;
f1 = f2;  // Error with --strictFunctionTypes
f2 = f1;  // Ok
f2 = f3;  // Error

第一个赋值在默认类型查看模式下是容许的，但在严格函数类型模式下被标记为谬误。直觉上，默认模式容许赋值，因为它 可能是 正当的，而严格函数类型模式使它成为一个谬误，因为它不能 证实是 正当的。在任何一种模式下，第三个赋值都是谬误的，因为它 永远不会 是正当的。

形容示例的另一种形式是，类型在默认类型查看模式下 (x: T) => void 是双变的（即协变或逆变）T，但在严格函数类型模式下是逆变的T。

interface Comparer<T> {compare(a: T, b: T): number;
}

declare let animalComparer: Comparer<Animal>;
declare let dogComparer: Comparer<Dog>;

animalComparer = dogComparer;  // Ok because of bivariance
dogComparer = animalComparer;  // Ok

在 --strictFunctionTypesmode 中，依然容许第一个赋值，因为它compare 被申明为一个办法。实际上，T是双变的，Comparer<T>因为它仅用于办法参数地位。然而，更改 compare 为具备函数类型的属性会导致更严格的查看失效：

interface Comparer<T> {compare: (a: T, b: T) => number;
}

declare let animalComparer: Comparer<Animal>;
declare let dogComparer: Comparer<Dog>;

animalComparer = dogComparer;  // Error
dogComparer = animalComparer;  // Ok

论断：在严格模式下（或者 strictFunctionTypes）：类型平安问题将失去保障，与之相同的是默认双向协变将可能使得你在应用类型的时候变得不平安！

先抛出一个问题：List<Dog> 是否为 List<Animal> 的子类型？（起源：《深刻了解 TypeScript》）

先看上面这个例子：

interface Animal {name: string}

interface Dog extends Animal {wang: () => void
}

interface Cat extends Animal {miao: () => void
}

const dogs: Array<Dog> = []
const animals: Animal[] = dogs
// Array 在 ts 中是双向协变
animals.push(new Cat())

如果列表是不可变的（immutable），那么答案是必定的，因为类型很平安。然而如果列表是可变的，那么答案相对是否定的！

如果翻看 typescript 的 Array 的类型，能够看到 Array 类型定义写的是函数办法，因而，它的入参是双向协变的！

interface Array<T> {
    length: number;
    toString(): string;
    toLocaleString(): string;
    pop(): T | undefined;
    push(...items: T[]): number;
    concat(...items: ConcatArray<T>[]): T[];
    concat(...items: (T | ConcatArray<T>)[]): T[];
    join(separator?: string): string;
    reverse(): T[];
    shift(): T | undefined;
    slice(start?: number, end?: number): T[];
    sort(compareFn?: (a: T, b: T) => number): this;
    splice(start: number, deleteCount?: number): T[];
    splice(start: number, deleteCount: number, ...items: T[]): T[];
    unshift(...items: T[]): number;
    indexOf(searchElement: T, fromIndex?: number): number;
    lastIndexOf(searchElement: T, fromIndex?: number): number;
    every(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean;
    some(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean;
    forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
    map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
    filter<S extends T>(callbackfn: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];
    filter(callbackfn: (value: T, index: number, array: T[]) => any, thisArg?: any): T[];
    reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
    reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
    reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
    reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
    reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
    reduceRight<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
    [n: number]: T;
}

可变数组 + 双向协变无奈保障类型平安

interface MutableArray<T> {
        length: number;
    toString(): string;
    toLocaleString(): string;
    pop: () => T | undefined;
    push: (...items: T[]) =>  number;
    concat:(...items: ConcatArray<T>[]) => T[];
    join: (separator?: string) => string;
    reverse: () => T[];
    shift:() => T | undefined;
    slice:(start?: number, end?: number) => T[];
    sort:(compareFn?: (a: T, b: T) => number) => this;
    indexOf: (searchElement: T, fromIndex?: number) => number;
      // ...
}

此时咱们会发现 MutableArray 其实是个不可变类型，不再能相互调配

const dogs: MutableArray<Dog> = [] as Dog[];
// error
const animals: MutableArray<Animal> = dogs;

const animals: MutableArray<Animal> = [] as Animal[] ;
// error
const dogs: MutableArray<Dog> = animals

起因是 Array 类型既存在逆变办法 push 也存在协变办法 pop，甚至还有不可变办法 concat

能够应用 readonly 来标记属性，使其不可变
更多地应用函数属性而不是函数办法来定义类型
尝试让类型中的协变或者逆变离开，或者让类型不可变
尽可能防止双向协变

[1]@typescript-eslint/method-signature-style: https://github.com/typescript…

[2]PR: https://github.com/microsoft/…

正文完

typescript

发表至： typescript

2021-12-13

0

关于typescript:Promise面试题详解之控制并发

关于typescript:一文读懂-TypeScript-中的范型是如何计算的

关于typescript:代码生成器插件与Creator预制体文件解析

关于typescript:Why-TypeScript

关于vue.js:vue-按钮-权限控制

关于typescript:TypeScript-类型安全

前言

extends 关键字

简略的值匹配

never

简单类型值匹配

父子类型

缘起

逆变协变

协变（Covariance）

逆变（Contravariance）

函数属性与函数办法

Array

可变数据

更平安的数组类型

总结

参考资料

站内搜索