【前端vue3】TypeScrip-联合类型-联合类型-交叉类型

联合类型

//例如我们的手机号通常是13XXXXXXX 为数字类型 这时候产品说需要支持座机
//所以我们就可以使用联合类型支持座机字符串
let myPhone: number | string  = '010-820' 
 
 
//这样写是会报错的应为我们的联合类型只有数字和字符串并没有布尔值
let myPhone: number | string  = true

函数使用联合类型

const fn = (something:number | boolean):boolean => {
     return !!something
}

交叉类型

多种类型的集合，联合对象将具有所联合类型的所有成员

interface Person{
    age: number,
    name: string,
    height: number
}

interface Man {
    sex : string
}

const xiaoc = (man:Person & Man) => {
    console.log(man.age);
    console.log(man.name);
    console.log(man.sex);
    console.log(man.height);
    
}

xiaoc({age:20,name:"小C",sex:"男",height:170})

类型断言

语法：
值 as 类型 value as string
<类型>值 value

interface A {
       run: string
}
 
interface B {
       build: string
}
 
const fn = (type: A | B): string => {
       return (type as A).run
}
//可以使用类型断言来推断他传入的是A接口的值

需要注意的是，类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误：

and临时断言

window.abc = 123
//这样写会报错因为window没有abc这个东西

(window as any).abc = 123
//可以使用any临时断言在 any 类型的变量上，访问任何属性都是允许的。

as const

const names = '小满'
names = 'aa' //无法修改
 
 
 
 
let names2 = '小满' as const
names2 = 'aa' //无法修改

// 数组
let a1 = [10, 20] as const;
const a2 = [10, 20];
 
a1.unshift(30); // 错误，此时已经断言字面量为[10, 20],数据无法做任何修改
a2.unshift(30); // 通过，没有修改指针