You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何从TypeScript对象数组中提取key的联合类型?

问题描述

现有以下TypeScript代码:

type PageInfo = {
    title: string
    key: string
}

const PAGES: PageInfo[] = [
    {
        key: 'trip_itinerary',
        title: "Trip Itinerary",
    },
    {
        key: 'trip_details',
        title: "Trip Details",
    },
    {
        key: 'passenger_info',
        title: "Passenger Information",
    },
]

想提取出key字段的字面量联合类型(也就是'trip_itinerary'|'trip_details'|'passenger_info'),用来作为Record的键,但不想手动编写这些值。想问能不能通过类似type PageKey = typeof PAGES[???].key的方式实现,另外用satisfies关键字是否可行,比如写成:

const PAGES = [
    ...
] satisfies PageInfo[]
解决方案

原代码里PAGES: PageInfo[]的类型标注会让TypeScript把每个对象的key类型拓宽成string,而不是保留具体的字面量,所以直接写typeof PAGES[number].key得到的是string,达不到需求。下面是两种可行的解决办法:

方法1:用satisfies关键字(推荐)

用satisfies代替直接的类型标注,既能让数组符合PageInfo[]的类型约束,又能保留每个key的字面量类型:

type PageInfo = {
    title: string
    key: string
}

const PAGES = [
    {
        key: 'trip_itinerary',
        title: "Trip Itinerary",
    },
    {
        key: 'trip_details',
        title: "Trip Details",
    },
    {
        key: 'passenger_info',
        title: "Passenger Information",
    },
] satisfies PageInfo[]

// 提取key的联合类型
type PageKey = typeof PAGES[number]['key']
// 此时PageKey的类型就是:'trip_itinerary' | 'trip_details' | 'passenger_info'

这样就能自动推导出需要的联合类型,完全满足需求。

方法2:用as const断言(兼容旧TS版本)

如果你的TypeScript版本低于4.9(不支持satisfies),可以用const断言强制保留字面量类型,再做类型校验:

type PageInfo = {
    title: string
    key: string
}

// 用as const保留数组元素的字面量类型
const PAGES = [
    {
        key: 'trip_itinerary',
        title: "Trip Itinerary",
    },
    {
        key: 'trip_details',
        title: "Trip Details",
    },
    {
        key: 'passenger_info',
        title: "Passenger Information",
    },
] as const

// 可选:验证数组是否符合PageInfo[]的类型约束
type _CheckType = typeof PAGES extends readonly PageInfo[] ? true : false
// _CheckType的值为true,说明类型符合要求

// 提取key的联合类型
type PageKey = typeof PAGES[number]['key']
// 同样得到目标联合类型

内容的提问来源于stack exchange,提问作者mpen

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.06 19:15:52