示例工程【免费下载链接】type-challengesCollection of TypeScript type challenges with online judge项目地址https://gitcode.com/GitHub_Trending/ty/type-challenges点击查看免费下载本篇文章围绕 type-challengesTypeScript 类型挑战第 106 题「去除左侧空白 / Trim Left」展开完整讲解TrimLeftT类型工具的实现思路、测试边界与相关扩展。读者读完本文将掌握如何用递归模板字面量类型在类型层面剥离字符串开头的空白字符如何通过type-challenges/utils的Equal断言验证结果以及如何从本题出发组合出Trim去除两端空白与TrimRight去除右侧空白等变体。一、题目要求题目位于仓库的 questions/00106-medium-trimleft 目录难度为medium中等标签为template-literal模板字面量类型由 Anthony Fuantfudifficulty: medium title: Trim Left tags: template-literal author: github: antfu name: Anthony Fu related: 108, 4803题目描述见 README.zh-CN.md实现TrimLeftT它接收确定的字符串类型并返回一个新的字符串其中新返回的字符串删除了原字符串开头的空白字符串。题目给出的示例type trimmed TrimLeft Hello World // 应推导出 Hello World 注意示例细节只删除开头的空白Hello World结尾的两个空格原样保留这正是TrimLeft与Trim的区别所在。二、从零实现递归模板字面量类型题目给出的起始模板只有一行占位实现见 template.tstype TrimLeftS extends string any我们需要把any替换为真正的实现。核心思路是条件类型 模板字面量类型的模式匹配 递归用模板字面量${Whitespace}${Rest}匹配「一个空白字符 其余部分」匹配成功说明开头仍是空白递归处理Rest继续剥离下一个空白字符匹配失败说明开头已经不是空白或是空字符串直接返回S。完整的参考实现如下type Whitespace | \n | \t type TrimLeftS extends string S extends ${Whitespace}${infer Rest} ? TrimLeftRest : S验证题目示例type trimmed TrimLeft Hello World // Hello World 去掉第一个空格 → Hello World // 再去掉一个空格 → Hello World // H 不是空白 → 返回 Hello World // 结果Hello World 三、空白字符的定义空格、换行与制表符观察测试用例见 test-cases.ts题目要求的「空白」并不只指普通空格 还包括换行符\n和制表符\timport type { Equal, Expect } from type-challenges/utils type cases [ ExpectEqualTrimLeftstr, str, ExpectEqualTrimLeft str, str, ExpectEqualTrimLeft str, str, ExpectEqualTrimLeft str , str , ExpectEqualTrimLeft \n\t foo bar , foo bar , ExpectEqualTrimLeft, , ExpectEqualTrimLeft \n\t, , ]逐条解读这些断言输入期望输出说明strstr开头无空白原样返回 strstr去掉 1 个空格 strstr连续 5 个空格全部剥离 str str 只去掉左侧 5 个空格右侧空格保留 \n\t foo bar foo bar 空格、换行、制表符混合全部剥离空字符串直接返回递归终止 \n\t全由空白组成递归剥完返回空字符串正是第 5 条用例的存在决定了Whitespace联合类型必须包含 | \n | \t三种字符如果只处理空格 \n与\t无法匹配${Whitespace}${infer Rest}实现就会在混合空白输入上失败。四、递归终止与边界情况TrimLeft的递归天然具备终止条件不需要额外的显式判断空字符串无法匹配${Whitespace}${infer Rest}模板模板要求至少一个空白字符 至少一个后续字符……实际上仅要求存在空白前缀即可空串显然不满足走false分支返回开头非空白如strs不属于Whitespace联合同样走false分支返回原字符串全空白字符串如 \n\t每次剥离一个空白字符后递归直到剩下的空串无法继续匹配逐层返回。可以验证这一行为与 JavaScript 运行时方法的一致性 \n\t.trimStart()返回 \n\t foo bar .trimStart()返回foo bar 。TrimLeft正是String.prototype.trimStart()以及trimLeft()在类型层面的等价物。五、由 TrimLeft 组合出 Trim 与 TrimRightinfo.yml中related: 108, 4803明确指出本题与另外两道中等题构成系列关系它们在仓库中的位置如下108 去除两端空白字符Trimquestions/00108-medium-trim/README.zh-CN.md要求删除字符串两端的空白4803 去除右侧空白TrimRightquestions/04803-medium-trim-right/README.zh-CN.md要求只删除结尾的空白。TrimRight的实现与TrimLeft完全对称只是把模式匹配放到字符串尾部对应 test-cases.ts 中的str 、 foo bar \n\t 等用例type Whitespace | \n | \t type TrimRightS extends string S extends ${infer Rest}${Whitespace} ? TrimRightRest : S而Trim既可以写成「先TrimLeft再TrimRight」的左右剥离组合也可以一次完成两端剥离。组合式实现最简洁、复用性最好对应 questions/00108-medium-trim/test-cases.ts 中 str →str的完整剥离断言type TrimS extends string TrimRightTrimLeftS三题共用同一组Whitespace空白字符集合 | \n | \t构成了 type-challenges 中「模板字面量类型递归」这一主题的完整练习链先做TrimLeft掌握左侧剥离与模式匹配再做TrimRight掌握右侧对称写法最后用Trim串联两个方向。此外本仓库还有一批同样依赖模板字面量递归的同类挑战可供继续深入例如 去除两端空白 Trim 之外的字符串处理题如 Trim、TrimRight 系列以及仓库中大量基于字符串拆解递归的 medium/hard 题目。六、总结TrimLeft是理解 TypeScript 模板字面量类型与递归类型的关键入门题。它的要点可以归纳为三点模式匹配利用${Whitespace}${infer Rest}在类型层面拆出「首个空白字符 剩余部分」这是所有字符串处理类型工具的基础动作递归剥离匹配成功时递归调用自身逐个吃掉开头的空白直到命中终止条件空白集合空白必须定义为 | \n | \t的联合类型否则无法通过换行、制表符混合的测试用例。掌握TrimLeft之后顺着 related: 108, 4803 继续挑战Trim与TrimRight即可完整掌握「左右端空白剥离」这一模板字面量类型的经典主题。赞分享示例工程【免费下载链接】type-challengesCollection of TypeScript type challenges with online judge项目地址https://gitcode.com/GitHub_Trending/ty/type-challenges点击查看免费下载相关推荐深入理解 unicorn/no-thenable禁止 then 属性规避 Promise 与动态导入的隐蔽陷阱深入理解 unicorn/no thenable 禁止 then 属性规避 Promise 与动态导入的隐蔽陷阱 核心导读本文以 eslint plugi示例工程TypeScript 类型挑战 106用模板字面量类型实现 TrimLeft 去除字符串左侧空白TypeScript 类型挑战 106用模板字面量类型实现 TrimLeft 去除字符串左侧空白 本篇文章围绕 type challenges 仓库中的第 1示例工程type-challenges 中等题精讲用模板字面量类型实现 TrimLeft在类型层面剔除字符串开头的空白type challenges 中等题精讲用模板字面量类型实现 TrimLeft在类型层面剔除字符串开头的空白 导读 本篇围绕 type challenge示例工程上一篇Pachyderm开发指南贡献代码与扩展平台功能下一篇NetBox 数据模型体系完全指南模型类型、特性矩阵与源码级基类解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考