类型操作
TypeScript 的类型系统非常强大，因为它允许用其他类型来表达类型。
通过组合各种类型的操作符，我们可以用简洁、可维护的方式表达复杂的操作和值。
1. keyof 运算符
采用keyof运算符操作对象类型并生成其键的字符串或数字文字联合类型,
例如:
type Point = {
x:number,
y:number
}
type P = keyof Point
// P的类型: type P= keyof Point
// 其实 P 的类型为 'x' | 'y' 文字类型的联合类型
如果该类型具有string或number索引签名,则keyof将返回这些类型
type Arrayish = {[n:number]: string}
type A = keyof Arrayish;
// type A = number
type Mapish = {[k:string]: number}
type M = keyof Mapish
// type M = string | number
请注意,在此示例中, M是string | number类型, 这是因为JavaScript对象键始终强制转换位字符串类型, 因此obj[0]始终与obj["0"]一致
2. Typeof 运算符
在JavaScript中以及有了一个typeof运算符可以在表达式上下文中使用
console.log(typeof 'hello world')
// 打印 string
TypeScript添加了一个typeof运算符, 可以在类型上下文文中使用它来引用变量和属性的类型
let str = 'hello'
let n: typeof str;
// let n: string
代码解释,示例中 typeof运算符获取了变量str的类型, 并将类型作为变量n的类型注释.
这对于基本类型不是很有用, 但是结合其他类型运算符, 你可以方便的表达出很多模式
例如:我们从查看预定义类型开始ReturnType<T>, 它接受一个函数类型并产生它的返回类型
type Predicate = (x:string ) => boolean
type K = ReturnType<Predicate>
// type K = boolean
K 通过ReturnType获取到了Predicate的返回类型, ReturnType是内置泛型
如果我们此时将ReturnType用在普通函数名上, 而不是函数类型上, 就会报错
function fn(){
return {x:10,y:20}
}
type P = ReturnType<fn>
// 警告: fn是一个值不是一个类型
也就是ReturnTpey和泛型一样, <>中传入的是类型不是值, 此时fn是函数值
请记住, 值和类型不是一回事, 要引用该值的类型, 此时typeof就派上了用场
function fn(){
return {x:10,y:20}
}
type P = ReturnType<typeof fn>
// type P = {x:number,y:number}
其实上面的代码是两步的合并,才解开是这样的
// 函数
function fn(){
return {x:10,y:20}
}
// 通过typeof 获取当前函数的类型
type Fn = typeof fn
/*
type Fn = () => {
x: number;
y: number;
}
*/
// 通过ReturnType 获取函数类型的返回类型
type P = ReturnType<typeof fn>
// type P = {x:number,y:number}
3. 索引访问类型
3.1 对象类型的索引类型
我们可以使用索引访问类型来查找另一个类型的特定属性
type Person = {
name:string
age: number
alive: boolean
}
type Age = Person['age']
// type Age:number
索引类型本身是一种类型, 因此我们可以使用联合类型,keyof, 或其他类型
// 联合类型
type Type1 = Person['age' | 'name']
// type Type1:string | number
// keyof
type Type2 = Person[keyof Person]
// type Type2:string | number | boolean
// 其他类型: 文字联合类型的类型别名
type AliveOrName = 'alive' | 'name'
type Type1 = Person[AliveOrName]
// type Age:string | boolean
如果尝试一个不存在的属性, 则会报错
type Type1 = Person['alve']
// 报错: 类型Person上不存在`alve`属性
3.2 获取数组元素类型
使用任意类型进行索引类型查询的另一种就是通过number获取数组元素的类型`
const myArray = [
{name:'张三',age:15},
{name:'李四',age:18},
{name:'王五',age:22},
]
// 通过索引number 获取数组项的类型
type Person = typeof myArray[number]
// type Person = {name:string,age:number}
// 直接获取数组项中特定属性的类型
type Age = typeof myArray[number]['age']
// type Age= number
// 也可以从已经从项类型中获取特定属性的类型
type Name = Person['name']
// type Name = string
注意: 你只能在索引时使用类型, 这意味着你不能使用const 或其他声明的变量来引用
type Person = {
name:string
age: number
alive: boolean
}
// 正确
type key = 'age'
type Age = Person[key]
// type Age=number
// 错误
const key = 'age'
type Age = Person[key]
// 错误, 类型key不能作为索引类型使用
一定要区分, 以上操作都是类型的操作, 虽然有些看起来和普通的JavaScript一样,但结果不同
例如实例中最后const 声明的变量是用来获取值的, type 声明的是类型, Person[key] 是获取Person对象类型上key索引类型对应的类型,
但const定义的是值不能当成索引类型使用
如果想正确运行,可以使用typeof 获取变量key对应的类型
type Person = {
name:string
age: number
alive: boolean
}
// 正确
const key = 'age'
type Age = Person[typeof key]
// type Age=number
代码解释, typeof key获取变量key的类型为文字类型age, 等价于type key ='age'
网友评论