ts中extends关键字

ts中extends使用还是挺频繁的，但是在不同的场景下使用它的含义是不同的，所以在这篇文章中进行总结一下，方便理解

1.接口扩展的含义

interface Shape {color: string;
}interface Square extends Shape {sideLength: number;
}// Square {
//  color: string;
//  sideLength: number;
// }const square: Square = {color: "red",sideLength: 10,
};

接口Square通过extends关键字将Shape的属性也添加到自己的接口属性里面。

2.范型约束：

function loggingIdentity(arg: T): T {console.log(arg.length);return arg;
}loggingIdentity([1, 2, 3]); // 输出 3
loggingIdentity("hello"); // 输出 5
loggingIdentity(123); // 报错，因为数字类型没有 length 属性

上面的范型T需要满足有属性{lenght: number}

3.条件中使用

3.1 约束

type Duck = {name: string;occupation: string;
}
type Human = {name: string;
}
type Bool = Duck extends Human ? 'yes' : 'no'; // Bool => 'yes'

Human作为约束条件，Human有的属性 Duck都有 所以返回yes，（这里A extends B并不是指类型A是类型B的子集。）

3.2 extends前面是一个范型，并且当传入该参数的是联合类型时：

type Y1 = 'x' | 'y' extends 'x' ? string : number; // numbertype P = T extends 'x' ? string : number;type Y2 = P<'x' | 'y'> // "string" | "number"

上面Y1和Y2的结果大不一样，引发我们思考🤔，造成这个结果的原因就是所谓的分配条件类型（Distributive Conditional Types）

When conditional types act on a generic type, they become distributive when given a union type

对于使用extends关键字的条件类型（即上面的三元表达式类型），如果extends前面的参数是一个泛型类型，当传入该参数的是联合类型，则使用分配律计算最终的结果。分配律是指，将联合类型的联合项拆成单项，分别代入条件类型，然后将每个单项代入得到的结果再联合起来，得到最终的判断结果。

我们继续使用上面的例子进行解析：

 type P = T extends 'x' ? string : number;type Y2 = P<'x' | 'y'> // "string" | "number"

首先"x"  extends "x"  返回"string"

接着"y"  extends "x"  返回"number"

最后Y2结果就变成了"string" | "number"了。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！