什么事交叉类型呢?简单来说就是通过&
符号将多个类型进行合并成一个类型,然后用type
来声明新生成的类型。这里我举个例子,具体如下:
interface ClassA{
name:string;
age:number
}
interface ClassB{
name:string;
phone:number;
}
将接口ClassA和接口ClassB通过&进行合并创建一个新的接口类型Class
type Class = ClassA & ClassB
let info:Class = {
name:'zhagsan',
age:18,
phone:1573875555
}
任何类型都能通过&
合并成新的类型吗?
never
,比如string&number
,这肯定是错误的,因为不可能有既满足字符串又满足数字类型。合并的接口类型中具有同名属性,该怎么处理?
never
any
和number
交叉结果是any
类型,any
和boolean
交叉结果是any
类型,any
和never
交叉结果是never
类型。
注意:any 类型和除 never 类型以外的任何类型交叉时都为any,不愧是any大法
type A = any & 1; //any
type B = any & boolean; //any
type C = any & never; //never
其他情况比较:
type A = number & 1; //1
type B = 'maoxiansheng' & string; //'maoxiansheng'
type C = boolean & true; //true
interface X{
q:number,
w:string
}
interface Y{
q:boolean,
r:string,
}
type XY = X&Y
编辑器中直接就给我们了提示,如下图所示:
A、B、C三个类型都有相同的键inner,但是键的数据类型不同,分别是D、E、F,此时A&B&C会将inner键的类型进行合并,其实是D、E、F的交叉类型。
interface A {
inner: D;
}
interface B {
inner: E;
}
interface C {
inner: F;
}
interface D {
d: boolean;
}
interface E {
e: string;
}
interface F {
f: number;
}
type ABC = A & B & C;
let abc: ABC = {
inner: {
d: false,
e: 'className',
f: 5
}
};
字面量类型是可辨识的类型,当键的类型是不同的字面量类型,则交叉后类型为never
类型。
type A = {
kind:'a',
loyal:number
}
type B = {
kind:'b',
loyal:string
}
type AB = A&B;//never
函数类型的交叉运算会使用ts中函数重载来实现。
type A = (a:number,b:number) => void
type B = (a:string,b:string) => void
type AB = A&B;
let func:AB = (a:number | string ,b:number | string) => {}
func(1,2)//正常
func('a','b')//正常
func(1,'b')//报错
当编译到func(1,'b')
的时候代码报错,具体如下:
解决上面的问题,只需要再加一个数据类型,其中 a
为number
类型,b
为string
类型。具体如下:
type A = (a:number,b:number) => void
type B = (a:string,b:string) => void
type C = (a:number,b:string) => void
type ABC = A&B&C;
let func:ABC = (a:number | string ,b:number | string) => {}
func(1,2)//正常
func('a','b')//正常
func(1,'b')//正常
但是如果编译func('a',1)
时也会报错,这时需要再加一个数据类型,其中 a
为string
类型,b
为number
类型即可。
联合类型和交叉类型比较相似,联合类型通过|
符号连接多个类型从而生成新的类型。它主要是取多个类型的交集,即多个类型共有的类型才是联合类型最终的类型。联合类型可以是多个类型其中一个,可做选择,比如:string | number
,它的取值可以是string
类型也可以是number
类型。
举几个例子,如下所示:
interface X{
x:()=>string;
y:()=>Number;
}
interface Y{
x:()=>string;
}
type XY = X|Y;
function func1():XY{
//此处不进行类型断言为XY在编辑器中会报类型错误
return {} as XY
}
let testFunc = func1();
testFunc.x();
testFunc.y(); //Error:类型“XY”上不存在属性“y”,类型“Y”上不存在属性“y”。
另外我们还要注意,testFunc.x()
还会报类型错误,我们需要用类型守卫来区分不同类型。这里我们用in
操作符来判断
if('x' in testFunc) testFunc.x()
type A = 'a' | string; //string类型
type B = false | boolean; //bolean 类型
type C = 1 | number; //number类型
enum Class{
A,
B
}
type C = Class.A | Class;//Class类型
我们发现:TS会把字面量类型和枚举成员类型给缩减掉,只剩下原始类型和枚举类型
🤔思考一个问题:当接口类型进行联合,接口中同名属性的类型不同,该怎么进行缩减呢?比如下面的例子,看到这里的话,如果你知道答案写在评论区。
interface A{
name:string
}
interface B{
name:string | number
[property:string]:any
}
type AB = A|B
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。