typescript undefined 合并 typescript类型兼容

转载

ctaxnews 2024-02-03 14:39:04

文章标签 typescript 赋值类型系统可选参数 文章分类 TypeScript 前端开发

前言

一、开始

二、比较两个函数

1、函数参数双向协变

2、可选参数及剩余参数

3、函数重载

三、枚举

四、类

1、类的私有成员和受保护成员

五、泛型

六、高级主题

1、子类型与赋值

前言

TypeScript里的类型兼容性是基于结构子类型的，结构类型是一种只能使用其成员来描述类型的方式。它正好与名义类型形成对比。（在基于名义类型的类型系统中，数据类型的兼容性或等价性是通过明确的声明或类型的名称来决定的。这与结构性类型系统不同，它是基于类型的组成结构且不要求明确地声明。）

例如：

interface Named{
    name: string;
}

class Person{
    name: string;
}
let p: Named;
//可以，因为结构类型
p=new Person();

在使用基于名义类型的语言，比如c#或java中，这段代码会报错，因为Person类没有明确说明其实现了Named接口。

TypeScript的结构性子类型是根据JavaScript代码的典型写法来设计的。因为JavaScript里广泛地使用匿名对象，例如函数表达式和对象文本，所以使用结构类型系统来描述这些类型比使用名义类型系统更好。

一、开始

TypeScript的结构类型系统的基本规则是：如果x要兼容y，那么y至少具有与x相同的属性。

interface Named {
    name: string;
}

let x: Named;
//y的推断类型为{ name: string; location: string; }
let y = { name: 'Alice', location: 'Seattle' };
x = y;

这里要检查y是否能赋值给x，编译器检查x中的每个属性，看是否能在y中也找到对应属性。在这个例子中，y必须包含名字是name的string类型成员。y满足条件，因此赋值正确。

检查函数参数时使用相同的规则：

function greet(n: Named) {
    console.log('Hello, ' + n.name);
}
greet(y); // OK

注意，y有个额外的location属性，但这不会引发错误。只有目标类型（这里是Named）的成员会被一一检查是否兼容。

这个比较过程是递归进行的，检查每个成员及子成员。

二、比较两个函数

相对来讲，在比较原始类型和对象类型的时候是比较容易理解的，问题是如何判断两个函数是兼容的。下面我们从两个简单的函数入手，它们仅是参数列表略有不同：

let x = (a: number) => 0;
let y = (b: number, s: string) => 0;

y = x; // OK
x = y; // Error

要查看x是否能赋值给y，首先看它们的参数列表。x的每个参数必须能在y里找到对应类型的参数。注意的是参数的名字相同与否无所谓，只看它们的类型。这里，x的每个参数在y中都能找到对应的参数，所以允许赋值。

第二个赋值错误，因为y有个必须的第二个参数，但是x并没有，所以不允许赋值。

你可能会疑惑为什么允许忽略参数，像例子y = x中那样。原因是忽略额外的参数在JavaScript里是很常见的。例如，Array#forEach给回调函数传3个参数：数组元素，索引和整个数组。尽管如此，传入一个只使用第一个参数的回调函数也是很有用的：

let items = [1, 2, 3];

// 完整
items.forEach((item, index, array) => console.log(item));

// 省略参数
items.forEach((item) => console.log(item));

下面来看看如何处理返回值类型，创建两个仅是返回值类型不同的函数：

let x = () => ({name: 'Alice'});
let y = () => ({name: 'Alice', location: 'Seattle'});

x = y; // OK
y = x; // Error, because x() lacks a location property

类型系统强制源函数的返回值类型必须是目标函数返回值类型的子类型。

1、函数参数双向协变

当比较函数参数类型时，只有当源函数参数能够赋值给目标函数或者反过来时才能赋值成功。这是不稳定的，因为调用者可能传入了一个具有更精确类型信息的函数，但是调用这个传入的函数的时候却使用了不是那么精确的类型信息。实际上，这极少会发生错误并且能够实现很多JavaScript里的常见模式。例如：

enum EventType {Mouse,Keyboard}

interface Event { timestamp:number;}
interface MouseEvent extends Event{x:number;y:number}
interface KeyEvent extends Event {keyCode:number}

function listenEvent(eventType: EventType,handler:(n: Event)=> void){
    /* ... */
}

//使用精确类型
listenEvent(EventType.Mouse,(e:MouseEvent) => console.log(e.x+','+e.y));

//使用不太精确的类型，相对不安全
listenEvent(EventType.Mouse, (e: Event) => console.log((<MouseEvent>e).x + ',' + (<MouseEvent>e).y));
listenEvent(EventType.Mouse, <(e: Event) => void>((e: MouseEvent) => console.log(e.x + ',' + e.y)));
//仍然不允许（清除错误）。对完全不兼容的类型强制执行类型安全
listenEvent(EventType.Mouse, (e: number) => console.log(e));

2、可选参数及剩余参数

比较函数兼容性的时候，可选参数与必须参数是可互换的。源类型上有额外的可选参数不是错误，目标类型的可选参数在源类型里没有对应的参数也不是错误。

当函数有剩余参数时，它被当做无限个可选参数。

这对于类型系统来说是不稳定的，但从运行时的角度来看，可选参数一般来说是不强制的，因为对于大多数函数来硕相当于传递了一些underfinded。

常见的函数接收一个回调函数并用对于程序员来说是可预知的参数但对类型系统来说是不确定的参数来调用：

function invokeLater(args: any[], callback: (...args: any[]) => void) {
    /* ... 使用“args”调用回调 ... */
}

//Unsound-invokeLater“可能”提供任意数量的参数
invokeLater([1, 2], (x, y) => console.log(x + ', ' + y));

// x和y实际上是必需的 且不可发现
invokeLater([1, 2], (x?, y?) => console.log(x + ', ' + y));

3、函数重载

对于有重载的函数，源函数的每个重载都要在目标函数上找到对应的函数签名。这确保了目标函数可以在所有源函数可调用的地方调用。

三、枚举

枚举类型与数字类型兼容，并且数字类型与枚举类型兼容。不同枚举类型之间是不兼容的。比如：

enum State {Ready,Waiting};
enum Color {Red,Blue,Green};

let status = Status.Ready;
status = Color.Green; //Error

四、类

类与对象文本和接口差不多，但有一点不同：类有静态部分和实例部分的类型。比较两个类类型的对象时，只有实例的成员会被比较。静态成员和构造函数不在比较的范围内。

class Animal {
    feet: number;
    constructor(name: string,numFeet: number){ }
}
class Size{
    feet: number;
    constructor(numFeet: number) { }
}

let a:Animal;
let s:Size;

a = s;//ok
s = a;//ok

1、类的私有成员和受保护成员

类的私有成员和受保护成员会影响兼容性。当检查类实例的兼容时，如果目标类型包含一个私有成员，那么源类型必须包含来自同一个类的这个私有成员。同样的，这条规则也适用于包含受保护成员实例的类型检查。这允许子类赋值给父类，但是不能赋值给其他有同样类型的类。

五、泛型

因为TypeScript是结构性的类型系统，类型参数只影响使用其作为类型一部分的结果类型。比如：

interface Empty<T> {
}

let x:Empty<number>;
let y:Empty<string>;

x = y; //ok，因为y匹配x的结构

上面代码里，x和y是兼容的，因为它们的结构使用类型参数时并没有什么不同。把这个例子改变一下，增加一个成员，就能看出是如何工作的了：

interface NotEmpty<T> {
    data: T;
}

let x: NotEmpty<number>;
let y: NotEmpty<string>;

x = y; //错误，因为x和y不兼容

在这里，泛型类型在使用时就好比不是一个泛型类型。

对于没有指定泛型类型的泛型参数时，会把所有泛型参数当成any比较。然后用结果类型进行比较，就像上面一个例子。

比如，

let identity = function<T>(x: T): T {
    // ...
}

let reverse = function<U>(y: U): U {
    // ...
}

identity = reverse;  //好的，因为（x:any）=>any匹配（y:any）=>any