示例工程【免费下载链接】type-challengesCollection of TypeScript type challenges with online judge项目地址https://gitcode.com/GitHub_Trending/ty/type-challenges点击查看免费下载本篇文章围绕 type-challenges 仓库中的第 14 号入门挑战「First of Array」展开完整讲解泛型FirstT的题目要求、约束写法、四种主流实现思路索引访问、infer 推断、元组解构、条件类型并结合仓库内模板与测试用例逐条验证答案的正确性。读完本文你将掌握数组类型取首元素的类型级实现并理解T extends any[]泛型约束、空数组返回never等边界处理。题目速览「First of Array」是 type-challenges 系列中编号 00014 的一道 easy简单级别挑战主题标签为#array由项目作者 Anthony Fu 编写。题目元数据记录在 info.yml 中difficulty: easy、tags: array并在related: 15字段中声明了与第 15 号挑战「Last of Array」的关联关系。这道题位于整个系列早期00013 之后是学习泛型约束与数组类型索引最合适的入门题之一。它的英文原题与简体中文译文分别位于 README.md 与 README.zh-CN.md并配有日文README.ja.md与韩文README.ko.md翻译便于不同语言背景的读者对照学习。题目要求原题描述非常精炼Implement a genericFirstTthat takes an ArrayTand returns its first elements type.即实现一个泛型FirstT它接收一个数组类型T返回该数组第一个元素的类型。题目给出的示例type arr1 [a, b, c] type arr2 [3, 2, 1] type head1 Firstarr1 // expected to be a type head2 Firstarr2 // expected to be 3可以看到First是类型层面的操作arr1是字符串字面量元组类型[a, b, c]Firstarr1的结果是字面量类型aFirstarr2的结果是数字字面量类型3。这与运行时arr[0]的行为一一对应但发生在编译期。模板与起点一个带约束的占位符仓库中每个挑战都提供一个待完成的模板文件本题的模板位于 template.tstype FirstT extends any[] any模板已经帮我们完成了两件事声明了泛型参数T等待使用者基于它编写类型逻辑预先写好了约束T extends any[]明确要求T必须是数组类型any[]表示任意元素类型的数组。这个约束不是可有可无的它保证了后续所有基于数组特性的操作索引、infer、解构在类型层面都是合法的。若去掉该约束直接写type FirstT T[0]那么当T传入非数组类型如字符串、对象时TypeScript 会直接报错。模板默认返回any显然无法通过测试——我们的任务就是把这个占位符替换成真正能推导出首元素类型的实现。解法一索引访问T[0]最直观利用元组类型支持数字索引访问的特性直接写type FirstT extends any[] T[0]T[0]在类型层面等价于取出元组的第 0 个元素的类型。对于[a, b, c]T[0]得到a对于[3, 2, 1]得到3。这种写法最简洁也是官方解法中最常见的一种。唯一的隐患在于空数组边界当T为[]时T[0]在 TypeScript 中会得到undefined并非never这与测试用例的期望不一致详见下文「测试用例解析」。解法二infer 模式匹配利用条件类型与infer关键字进行模式匹配type FirstT extends any[] T extends [infer U, ...unknown[]] ? U : never其原理是将元组T与模板类型[infer U, ...unknown[]]做匹配。若T是非空元组则第一个元素被捕获到U中...unknown[]匹配剩余任意数量的元素若T为空元组[]匹配失败走never分支。infer是 TypeScript 条件类型中最强大的工具之一本仓库还专门提供了 guides/infer.md 作为进阶阅读材料。后续的「Last of Array」「Pop」「Shift」等数组挑战几乎都依赖这种首元素 剩余部分的拆分思路。解法三元组解构利用泛型参数直接解构元组type FirstT extends any[] T extends [infer F, ...any[]] ? F : never思路与解法二一致只是占位符换成了any。这里的重点在于元组模式[infer F, ...any[]]能够自动处理空数组——当T []时条件不成立进入never分支从而与测试期望对齐。解法四先判空再索引将判空显式写出来type FirstT extends any[] T[length] extends 0 ? never : T[0]利用元组的length属性T[length] extends 0判断T是否为空元组。若为空则返回never否则返回T[0]。这种写法把边界情况放在明面上可读性最好也最适合在面试或讲解中作为逐步推导的示范。测试用例解析四个正向用例 两个反向用例仓库为每道题都配了完整的类型级测试本题位于 test-cases.ts导入自type-challenges/utils的Equal与Expect工具import type { Equal, Expect } from type-challenges/utils type cases [ ExpectEqualFirst[3, 2, 1], 3, ExpectEqualFirst[() 123, { a: string }], () 123, ExpectEqualFirst[], never, ExpectEqualFirst[undefined], undefined, ] type errors [ // ts-expect-error FirstnotArray, // ts-expect-error First{ 0: arrayLike }, ]逐条拆解这些用例能帮我们更完整地理解题目边界用例输入期望输出考察点1[3, 2, 1]3基本场景数字字面量元组取首元素2[() 123, { a: string }]() 123复杂元素类型函数类型也能被原样提取3[]never空数组边界此时应返回never4[undefined]undefined元素本身为undefined时也必须正确区分第 3、4 条用例放在一起尤其值得注意如果只用T[0]空数组会得到undefined与用例 4 的[undefined]返回undefined混为一谈无法通过测试。所以能区分[]与[undefined]的实现infer、解构、先判空才是完备的。反向用例则验证了泛型约束的作用FirstnotArray字符串不是数组必须报类型错误First{ 0: arrayLike }即使对象带有数字索引键类数组结构也不允许通过——因为约束写死了T extends any[]只有真正的数组/元组类型才能作为参数。反向用例通过// ts-expect-error注释声明此处应当产生类型错误若实现没有正确约束泛型这行注释反而会变成编译错误测试即失败。关于测试工具本身Equal在 utils/index.d.ts 中定义通过比较两个条件类型是否相互兼容来判断类型完全相等实现基于(T() T extends X ? 1 : 2) extends (T() T extends Y ? 1 : 2)的经典技巧而ExpectT extends true则要求传入的类型必须是true否则编译报错。二者组合构成了 type-challenges 全系列统一使用的类型断言机制。题目归属与整体结构「First of Array」是 type-challenges 中数组主题挑战的第一站。从仓库目录结构可以看到它的编号 00014 位于questions/00014-easy-first/紧随其后的 00015-medium-lastLast of Array 难度升至 medium要求提取数组最后一个元素需要用到T extends [...infer Rest, infer Last]这类反向拆分技巧本质上是本题思路的镜像延伸。info.yml 中的related: 15字段正是对这一系列关系的机器可读记录。此外本仓库还收录了 00011-easy-tuple-to-object元组转对象、00018-easy-tuple-length元组长度 等同样围绕元组与数组展开的入门题。如果你想检验自己对元组类型操作的掌握程度把它们放在一起练习是最高效的路径。总结FirstT虽然是一道 easy 题但它覆盖了三个会在后续所有挑战中反复出现的核心知识点泛型约束T extends any[]限制了输入必须是数组并让后续类型操作在编译期得到保障元组模式匹配[infer F, ...any[]]的拆分能力是数组类类型编程的基石边界处理空数组返回never且必须与[undefined]这样的有元素但元素是 undefined场景严格区分。把 template.ts 中那行type FirstT extends any[] any替换为type FirstT extends any[] T extends [infer F, ...any[]] ? F : never即可通过全部六条测试用例。理解这道题你就已经掌握了类型级数组操作的第一块敲门砖。赞分享示例工程【免费下载链接】type-challengesCollection of TypeScript type challenges with online judge项目地址https://gitcode.com/GitHub_Trending/ty/type-challenges点击查看免费下载相关推荐TypeScript 类型挑战 00014实现 First\T\ 获取数组第一个元素类型TypeScript 类型挑战 00014实现 First\T\ 获取数组第一个元素类型 本篇文章围绕 type challenges 仓库中编号 0001示例工程TypeScript 类型挑战 15实现 LastT 泛型提取数组最后一个元素类型TypeScript 类型挑战 15实现 LastT 泛型提取数组最后一个元素类型 导读 LastT 是 type challenges 题库中的第 1示例工程Llama2-Chinese-13b-Chat-ms模型融合原理LoRA微调技术的实战应用Llama2 Chinese 13b Chat ms模型融合原理LoRA微调技术的实战应用 Llama2 Chinese 13b Chat ms是一款基于Ll上一篇Apache DolphinScheduler Telegram 告警插件配置实战与源码实现深度解析下一篇英雄联盟终极助手League Akari完整使用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考