19 # 高级类型:索引类型

ts 复制代码
let obj = {
    a: 1,
    b: 2,
    c: 3
}
// 抽取值形成数组
function getValues(obj: any, keys: string[]) {
    return keys.map(k => obj[k])
}

console.log(getValues(obj, ['a', 'b'])); // [1, 2]
console.log(getValues(obj, ['e', 'f'])); // [undefined, undefined] 属性不存在也不报错

可以使用索引来约束处理这种问题。

索引类型查询操作符:keyof T 是一种索引类型查询操作符,用于获取类型 T 的所有属性名的联合类型。它可以用于访问和操作对象类型的属性名称。

ts 复制代码
interface Obj {
    a: number,
    b: string
}
let key: keyof Obj;

索引访问操作符:T[K] 表示类型 T 中索引为 K 的属性的类型。这种语法通常用于访问对象类型中特定属性的类型。

ts 复制代码
let value: Obj['a'];

泛型约束:T extends U

ts 复制代码
function getValues<T, K extends keyof T>(obj: T, keys: K[]): T[K][] {
    return keys.map(k => obj[k])
}

console.log(getValues(obj, ['a', 'b'])); // [1, 2]
console.log(getValues(obj, ['e', 'f'])); // 报错
相关推荐
by__csdn5 分钟前
Vue3响应式系统详解:ref与reactive全面解析
前端·javascript·vue.js·typescript·ecmascript·css3·html5
喵个咪10 小时前
初学者入门:用 go-kratos-admin + protoc-gen-typescript-http 快速搭建企业级 Admin 系统
后端·typescript·go
初遇你时动了情16 小时前
react native创建项目常用插件
react native·typescript·reactjs
时71 天前
利用requestIdleCallback优化Dom的更新性能
前端·性能优化·typescript
lcc1871 天前
Typescript 类的简介
typescript
贩卖黄昏的熊2 天前
typescript 快速入门
开发语言·前端·javascript·typescript·ecmascript·es6
冬男zdn2 天前
Next.js 16 + next-intl App Router 国际化实现指南
javascript·typescript·reactjs
前端之虎陈随易2 天前
基于Go重写的TypeScript 7可以用了
开发语言·golang·typescript
爱吃无爪鱼2 天前
01-前端开发快速入门路线图
javascript·css·vue.js·typescript·前端框架·npm·node.js
lcc1872 天前
Typescript 类型
typescript