讲师中心 微信公众号
AI工具推荐 视频效率加速

TypeScript 中提取只读数组中对象 name 属性的联合类型正确写法

小瑶大大_7202

小瑶大大_7202

发布时间:2026-04-29 20:56:06

|

582人浏览过

|

来源于php中文网

原创

本文详解如何在 TypeScript 中从 ReadonlyArray<ParamTypes> 类型中安全提取所有 name 字符串字面量的联合类型,解决因索引访问方式不当导致类型推导失败(如误推为对象而非字符串)的问题。

本文详解如何在 typescript 中从 `readonlyarray` 类型中安全提取所有 `name` 字符串字面量的联合类型,解决因索引访问方式不当导致类型推导失败(如误推为对象而非字符串)的问题。

在 TypeScript 类型编程中,当我们处理混合类型的只读数组(如 ParamsArr,包含字符串字面量与带 name 属性的对象),并希望提取其中所有 name 字段的联合字面量类型时,一个常见误区是直接对 P[number] 做条件映射——这会丢失数组各元素的位置特异性,导致条件判断无法精确匹配每个元素的实际类型。

原始写法存在根本性问题:

type KeysFromParams<P extends ParamsArr> =
  P[number] extends BoolParamObj | EnumParam ?
    P[number]["name"] :  // ❌ 错误:P[number] 是联合类型,extends 判断会触发 distributive conditional type 行为,且无法保证每个元素都满足分支条件
    P[number]

此处 P[number] 是整个数组元素类型的联合(例如 "hello" | { name: "world"; type: "boolean" }),而 extends BoolParamObj | EnumParam 对该联合进行判断时,TypeScript 会采用分配律:仅当联合中每个成员都满足条件时,才进入 true 分支;否则整体落入 false 分支。由于 "hello" 不是对象类型,整个条件判断失效,最终回退到 P[number] —— 即字符串字面量与对象的联合,因此 "world" 被错误地包裹在对象类型中,导致类型检查失败。

✅ 正确解法是逐项映射再索引取值,利用映射类型 + 索引访问 [number] 实现精准提取:

Galileo TypeScript sdk
Galileo TypeScript sdk

完整的Galileo AI平台 TypeScript/JS SDK 参考,用于评估、观察和保护 GenAI 应用。适用于构建 Node.js 或 TypeScript 项目。

下载
type KeysFromParams<P extends ParamsArr> = {
  [K in keyof P]: // 遍历数组所有索引(如 0, 1, length)
    P[K] extends BoolParamObj | EnumParam
      ? P[K]["name"] // 若当前项是对象,则取其 name
      : P[K]         // 否则保留原值(如字符串字面量)
}[number] // 将映射后的对象类型,按 number 索引取联合值

该方案的关键优势在于:

  • keyof P 在 ReadonlyArray<T> 上会得到 "0" | "1" | ... | "length" | "push" | ...,但 TypeScript 会对数字索引键做特殊优化,实际映射时仅作用于有效数字索引(如 "0", "1");
  • 每个 P[K] 是具体某一项的精确类型(如 params[0] 是 "hello",params[1] 是 { readonly name: "world"; ... }),因此 extends 判断能准确分支;
  • 最终通过 [number] 索引映射类型,等价于取所有 K 对应结果的联合,自然得到 "hello" | "world"。

完整可运行示例:

type BoolParamObj = {
  name: string;
  type: "boolean";
  default?: boolean;
};
type BoolParam = string | BoolParamObj;

type EnumParam = {
  name: string;
  type: "enum";
  values: readonly string[];
};

type ParamTypes = BoolParam | EnumParam;
type ParamsArr = ReadonlyArray<ParamTypes>;

type KeysFromParams<P extends ParamsArr> = {
  [K in keyof P]: P[K] extends BoolParamObj | EnumParam ? P[K]["name"] : P[K];
}[number];

// ✅ 类型推导成功
const params = [
  "hello",
  {
    name: "world",
    type: "boolean"
  } as const satisfies BoolParamObj
] as const satisfies ParamsArr;

type Result = KeysFromParams<typeof params>; // "hello" | "world"

let key: Result = "world"; // ✅ 无报错

⚠️ 注意事项:

  • 必须使用 as const satisfies ParamsArr(而非仅 as const)确保数组被推导为 ReadonlyArray<...>,否则 keyof P 可能不包含数字索引;
  • satisfies 是 TypeScript 4.9+ 推荐语法,比 as const as ParamsArr 更安全,避免类型断言绕过检查;
  • 若数组含非 BoolParamObj/EnumParam 的对象(如缺失 name),需在条件中补充防御性判断,例如 P[K] extends { name: string } ? P[K]["name"] : never。

掌握这种「映射索引 → 条件分支 → 联合收口」的模式,是 TypeScript 高级类型编程中处理异构数组类型提取的核心范式。

热门AI工具

更多
立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

相关专题

更多
C语言变量命名
C语言变量命名

c语言变量名规则是:1、变量名以英文字母开头;2、变量名中的字母是区分大小写的;3、变量名不能是关键字;4、变量名中不能包含空格、标点符号和类型说明符。php中文网还提供c语言变量的相关下载、相关课程等内容,供大家免费下载使用。

3309

2023.06.20

c语言入门自学零基础
c语言入门自学零基础

C语言是当代人学习及生活中的必备基础知识,应用十分广泛,本专题为大家c语言入门自学零基础的相关文章,以及相关课程,感兴趣的朋友千万不要错过了。

2348

2023.07.25

c语言运算符的优先级顺序
c语言运算符的优先级顺序

c语言运算符的优先级顺序是括号运算符 > 一元运算符 > 算术运算符 > 移位运算符 > 关系运算符 > 位运算符 > 逻辑运算符 > 赋值运算符 > 逗号运算符。本专题为大家提供c语言运算符相关的各种文章、以及下载和课程。

1280

2023.08.02

c语言数据结构
c语言数据结构

数据结构是指将数据按照一定的方式组织和存储的方法。它是计算机科学中的重要概念,用来描述和解决实际问题中的数据组织和处理问题。数据结构可以分为线性结构和非线性结构。线性结构包括数组、链表、堆栈和队列等,而非线性结构包括树和图等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1238

2023.08.09

c语言random函数用法
c语言random函数用法

c语言random函数用法:1、random.random,随机生成(0,1)之间的浮点数;2、random.randint,随机生成在范围之内的整数,两个参数分别表示上限和下限;3、random.randrange,在指定范围内,按指定基数递增的集合中获得一个随机数;4、random.choice,从序列中随机抽选一个数;5、random.shuffle,随机排序。

1376

2023.09.05

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2218

2023.09.20

c语言get函数的用法
c语言get函数的用法

get函数是一个用于从输入流中获取字符的函数。可以从键盘、文件或其他输入设备中读取字符,并将其存储在指定的变量中。本文介绍了get函数的用法以及一些相关的注意事项。希望这篇文章能够帮助你更好地理解和使用get函数 。

3600

2023.09.20

c数组初始化的方法
c数组初始化的方法

c语言数组初始化的方法有直接赋值法、不完全初始化法、省略数组长度法和二维数组初始化法。详细介绍:1、直接赋值法,这种方法可以直接将数组的值进行初始化;2、不完全初始化法,。这种方法可以在一定程度上节省内存空间;3、省略数组长度法,这种方法可以让编译器自动计算数组的长度;4、二维数组初始化法等等。

16535

2023.09.22

Playwright 测试失败怎么办
Playwright 测试失败怎么办

Playwright测试失败专题汇集超时、定位器匹配、浏览器提前关闭、依赖与插件配置、文件上传、SSL及Docker启动等故障文章,并介绍通过截图、报告和Trace定位错误。

0

2026.10.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

TypeScript——十天技能课堂
TypeScript——十天技能课堂

共21课时 | 1.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn