联合类型

用途： 例如我们的手机号通常是13XXXXXXX 为数字类型 这时候产品说需要支持座机 所以我们就可以使用联合类型支持座机字符串

 let phone:number | string = 1234567
 let phone1:number | string = '001-123-456'

也可以在声明函数时使用

 //示例
 let fn = function(type:number | boolean):boolean {
  return !!type   //强行转换 使用两个 !!
  //这里把 number类型转换为 boolean
 }
 let result =  fn(1)
 let result1 = fn(false)
 console.log(result)
 console.log(result1)

image-20230105162925438

交叉类型

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

 //交叉类型
 //多种类型的集合，联合对象将具有所联合类型的所有成员
 interface People{
  name:string,
  age:number
 }
 interface Man {
  sex:number
 }
 ​
 const xiaoman = (man:People & Man):void => {    //此处的man 就是交叉类型
  console.log(man);
 }
 ​
 xiaoman({
  name:"张三",
  age:19,
  sex:0
 })

image-20230105163358446

类型断言

 //类型断言
 let fn3 = function(num:number | string):void {
  // console.log(num.length);    // 报错 在这种情况下可以使用类型断言
  console.log((num as string).length);   //使用了类型断言
  // 把num 判断当作 string 类型  ——————number类型没有length参数
 }
 fn3('12345')    //使用类型断言后输出 5
 fn3(123)    //使用类型断言后输出 undefined 因为number类型没有length参数      所以不能滥用类型断言

image-20230105163648423

image-20230105163734924

类型断言补充 不能滥用类型断言

 interface A{
  run:string
 }
 interface B{
  build:string
 }
 let fn4 = (type: A | B):void => {
  console.log((type as B).build);
  console.log((<A>type).run); //类型断言的另一种写法
 }
 ​
 fn4({
  build:'Hello'
  //由于没有添加run属性 会输出undefined
 });

滥用示例

 //滥用例子
 // window.abc = 123    //报错
 (window as any).abc = 123   //不报错 因为在 any类型上访问任何属性都是允许的
 //也就是说 any可以断言任何类型
 //错误使用示例
 const fn5 = (type:any):boolean => {
     return type as boolean
 }
 let bbb = fn5(1)    //注意 在这里 1 不会被转成 boolean类型
 console.log(bbb)    //任然输出 1

image-20230105164854780

image-20230105164926216