// ------------------------- 08 - 联合类型+交叉类型+类型断言
/**
* 1、联合类型
* 2、类型断言
* 3、交叉类型
*/
/**
* 1、联合类型 |
* 相当于JS的 或 ||
*/
// 声明变量时 -- 联合类型
let phone:number = 18039344115 // 这是一个手机号 可能后期需求 需要把这里也可以取值输入 座机号(座机号0开头 只能字符串形式 number0开头的 计算机会认为是进制)
let phone1:number | string = '010-18039344115' // 改后的 -- 联合类型(即可以为number也可以是string)
phone1 = 18039344115 // 实现 既可以修改为number类型 也可以为string类型
// 使用函数时 -- 联合类型
let fn9 = (type:number|boolean):boolean=>{
// 0是false 1是true
return !!type // 进行强转类型 !!两次取反 强转为boolean类型
}
let res:number | boolean = true // 例子:假如这是后台返回 0 和 1 转number类型
res = true // 传boolean类型
fn9(res)
/**
* 2、交叉类型 &
* 相当于JS的 与 &&
*/
interface Pone{
name:string,
age:number,
sex:string
}
interface X{
height:string
}
const changtPone =(obj:Pone & X):void =>{
console.log(obj);
}
let user1:Pone & X= {
name:'悟空',
age:24,
sex:'男',
height:'180'
}
changtPone(user1)
/**
* 3、类型断言 --- 禁止滥用
* 写法 -- 第一种写法 -- 值 as 类型 、 第二种写法 -- (<类型>值)
* 意思 -- 将一个联合类型断言为其中一个类型 实现覆盖编译器推断的类型 就是告诉编译器 我知道他是什么类型 你别给我推导了
* 类型断言发生在编译代码时 、 类型转换发生在运行时
*/
// 例子1、第一种写法 -- 值 as 类型 常用
interface FooType{
a: string,
b: number,
}
const Foo = {} as FooType // 不会报错缺少属性a和属性b
Foo.a = 'a'
Foo.b = 1
// 例子2、第二种写法 -- <类型>值
interface O {
run:string
}
interface D{
build:boolean
}
let changBuild = (obj:O|D)=>{
// console.log(obj.run) // 正常来说会报错飘红,提示你类型D中 不存在run
console.log((<O>obj).run) // 使用类型断言 就是告诉编译器 我知道他是O类型 跟D没关系 你可以不用管
console.log((obj as O).run);
}
let changBuildT = (data:any):boolean=>{
return data as boolean // 断言成boolean类型 即便传入的不是boolean 一样可以覆盖 不过返回的仍然是1 这只是一种欺骗手段
}
changBuildT(1)
changBuild({run:'run'})
// 双重断言
function handler(event: Event)
{
// 先断言为 any 类型,然后再将整个断言为T类型。
const element = (event as any) as HTMLElement
}
原创:前端-悟空 请勿抄袭 可以转载
下一章: