typescript由类型创建类型篇 - keyof typeof IndexedAccessTypes
keyof
keyof后接一个对象类型,作用是创建以对象的属性名为字面量创建一个新的类型。如
type ObjType = {
name: string
}
type KeysType = keyof ObjType
let kt:KeysType = "name"
let kt2:KeysType = "string" //Type '"string"' is not assignable to type '"name"'.
上面代码 type KeysType = keyof ObjType
相当于 type KeysType = "name"
keyof注意事项
当keyof后接包含“索引签名”的对象类型时,则会以“索引签名”属性名对应的类型为类型,如
type ObjType = {
[key:number] : string
}
type KeysType = keyof ObjType //此处相当于type KeysType = number
let kt:KeysType = 0
let kt1:KeysType = '0' //Type 'string' is not assignable to type 'number'
应该注意,当“索引签名”的属性类型为string时,keyof返回的类型为number | string,原因是js中对象的属性名均为string类型,此处附上官方解释
typeof
typeof在js中可以返回某对象对应的类型,在ts中可以后接变量或属性,来定义个一的新的同变量和属性相同的类型,如
let str = "This is a string"
type TType = typeof str //相当于type TType = string
typeof应用场景
typeof后接基本数据类型意义不大,但后接对象类型则可以省去很多类型定义的工作,如ts中提供一个ReturnType类型,其接收一个函数类型,返回函数的返回类型。看以下例子
function someFun(){
return {
data: "someData"
}
}
type NewType = ReturnType<typeof someFun> //相当于 type NewType = { data: string }
通过typeof和ReturnType我们可以很方便地定义任意函数的返回值类型。
索引访问类型(Indexed Access Types)
当我们想定义同某对象某属性相同类型的属性时,可通过索引访问来实现,如
type Person = {
name: string,
age: number,
height: number,
female: boolean
}
type NameType = Person["name"] //相当于 type NameType = string
type PersonTypes = Person["name" | "age"] //相当于 type PersonTypes = string | number
由于索引访问类型本身也是一种类型,所以所有可以应用于“类型”的方法都可以用在“索引访问类型”上,如
type Person = {
name: string,
age: number,
height: number,
female: boolean
}
type PersonTypes = Person[keyof Person] type Person = {
name: string,
age: number,
height: number,
female: boolean
}
type PersonTypes = Person[keyof Person] //相当于 type PersonTypes = string | number | boolean
索引访问类型注意事项
在使用索引访问类型的时,只能使用类型去访问,而不能使用变量,如
type Person = {
name: string
}
const p = "name"
type Name = Person[p] //错误
type p1 = "name"
type Name1 = Person[p1] //正确
索引访问类型应用场景
在现实开发中,数组中包含的对象类型经常是相同的,我们可以通过索引访问类型方便地定义数组中包含的对象的类型(需借助number关键字),如
let arr = [
{ name: 'JoeZhou', age: 18},
{ name: 'JoeZhou1', age: 19},
{ name: 'JoeZhou2', age: 20},
]
type ArrObjType = typeof arr[number] // 相当于typeArrObjType = { name: string ,age: number }
转载自:https://juejin.cn/post/7197296623237136440