likes
comments
collection
share

typescript由类型创建类型篇 - keyof typeof IndexedAccessTypes

作者站长头像
站长
· 阅读数 13

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类型,此处附上官方解释

typescript由类型创建类型篇 - keyof typeof IndexedAccessTypes

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 }