一.Typescript联合类型 类型断言
interface myinterface {
name: string
ren(): void
}
interface youinterface {
name: string,
hobby(): void
}
function getname(event: myinterface | youinterface) {
// return event.ren() //报错
return (event as youinterface).hobby()
}
getname({ name: '斗罗大陆', ren() { console.log('唐三'); } })
getname({ name: '星辰变', hobby() { console.log(`飞行`); } })
上述说明:
return event.ren() 会报错 是因为 形参使用了 联合类型传入了两个类型 , 报错是因为他也不知道你要使用 这两个类型中的那一个
这种情况下就可以使用 as 具体类型 , 来使用了
描述:
1. 使用 as 实现类型断言
2. as 后面的类型是一个更加具体的类型
注意:当ts 不确定联合类型的变量到底是哪个类型的时候 采用类型断言 as 将其指定为一个类型
二.Typescript 泛型函数
function numtion<T>( value: T ) { return: value }
描述:
1.在函数名称的后面添加 <> 尖括号 , 尖括号内添加自定义类型变量名称
2. 类型变量 是一种特殊的变量 他处理类型而不是值
3.类型变量相当于一个类型容器 能够捕获到用户提供的类型
4.因为T是类型 然后可以将 他作为函数参数和返回值的类型 表示参数和返回值具有相同的类型
5.类型变量 可以是任意合法名称
使用场景
问题:
function numtion(event: number) {
return event
}
numtion(1)
function nantion(event: string) {
return event
}
nantion('1')
function leantion(event: boolean) {
return event
}
leantion(true)
描述: 我这里要创建 number string boolean 类型函数 , 我这样创建需要创建三个函数并指定对应的类型 , 这样写太占有资源
解决问题:
function grouption<T>(event: T):T {
return console.log(event);
}
grouption(1)
grouption('1')
grouption(true)
解决方法是 使用泛型函数 ,他就相当于一个类型容器 能够捕获用户提供的类型
当传入 number 后 这个类型就被函数声明时指定的变量 T 捕获到 ,此时 T 类型就是 number,同样传入 string 类型,函数 grouption 参数和返回值的类型都是 string
通过泛型可以让 grouption 函数与多种不同的类型一起工作 实现了复用的同时保证了类型的安全