示例工程【免费下载链接】type-challengesCollection of TypeScript type challenges with online judge项目地址https://gitcode.com/GitHub_Trending/ty/type-challenges点击查看免费下载本文围绕 type-challenges 仓库第 612 号中等难度题目 KebabCase对应韩文版 README.ko.md展开它要求我们编写一个纯类型层面的工具KebabCaseS把camelCase/PascalCase字符串转换为kebab-case。文章会先厘清题目要求与行为规格再结合仓库中的 test-cases.ts 推导出完整的转换规则随后给出可复现的递归实现并逐例推演最后介绍仓库内的验证方式与 CamelCase 等关联题目。读完你不仅能独立解出本题还能掌握模板字面量类型 递归条件类型处理字符串变换的通用方法论。题目速览把 camelCase 与 PascalCase 转成 kebab-case本题由 Johnson Chujohnsoncodehk出题难度为medium标签为#template-literal。题目原文韩文版与英文版内容一致只提出一个目标将camelCase或PascalCase字符串修改为kebab-case字符串。核心示例即文档中的两段type FooBarBaz KebabCaseFooBarBaz const foobarbaz: FooBarBaz foo-bar-baz type DoNothing KebabCasedo-nothing const doNothing: DoNothing do-nothing其中FooBarBazPascalCase要得到foo-bar-baz而已经是 kebab-case 的do-nothing则应原样返回。正如第二个例子所示本题隐含要求工具是幂等的对已经符合 kebab-case 的输入不做多余改动。仓库为参赛者准备的起点文件 template.ts 只有一个占位实现type KebabCaseS any我们的任务就是把它替换为真正的类型逻辑。行为规格从测试用例推导转换规则题面很简短真正的行为细节全部藏在测试文件 test-cases.ts 里。它使用type-challenges/utils工作区包见根目录 package.json 中type-challenges/utils: workspace:*实现在 utils/index.d.ts提供的Equal与Expect做类型断言共列出 9 个用例输入预期输出考察点FooBarBazfoo-bar-bazPascalCase 全转换fooBarBazfoo-bar-bazcamelCase 全转换foo-barfoo-bar已是 kebab-case原样保留foo_barfoo_bar下划线不被当作分隔符处理Foo-Barfoo--bar已有连字符 大写单词边界 → 双连字符ABCa-b-c连续大写字母逐字拆分--单字符原样返回空串原样返回非字母字符emoji不受影响从这些用例可以归纳出本题的完整转换规则大写字母是单词边界除字符串首字符外每个大写字母前都要插入一个-ABC→a-b-c。全部字符转为小写FooBarBaz→foo-bar-baz。已有的连字符原样保留Foo-Bar中Foo与Bar之间本身有-而B作为新单词起点又要插入一个-于是得到foo--bar。下划线、符号、emoji 等非字母字符一律不做处理foo_bar、-、均原样返回。空串与单个字符直接返回自身。规则 3 是本题最容易翻车的点也是medium难度的主要来源后面会专门推演。前置知识模板字面量类型与递归条件类型要解出本题需要三条 TypeScript 类型语法作为地基1. 模板字面量类型与infer模式匹配TypeScript 4.1 引入的模板字面量类型允许我们在类型层面对字符串做模式匹配type FirstCharS extends string S extends ${infer F}${infer Rest} ? F : never这里${infer F}${infer Rest}会把字符串拆成第一个字符 剩余部分Rest可能为空串。这是所有逐字符递归处理的入口。2. 内置字符串变换 intrinsic 类型TypeScript 提供四个字符串变换工具类型UppercaseS、LowercaseS、CapitalizeS、UncapitalizeS。其中UncapitalizeBar得到barUncapitalizebar仍是bar。关键在于非字母字符经这些变换后保持不变例如Uppercase-仍然是-这既是解题的抓手也是某些错误方案翻车的原因。3. 递归条件类型对S extends \${infer F}${infer Rest}为真的分支递归调用自身即可像逐字符扫描一样处理任意长度的字符串字面量当字符串被拆空Rest 为空串且不再匹配拆分模式时返回终止结果。仓库中 utils/index.d.ts 的Equal/Expect就是本题的编译器判题器EqualX, Y是一个函数类型层面的严格相等检测ExpectT extends true强制结果为true。只要KebabCase的结果与预期不符Equal返回falseExpectfalse便会触发类型错误。核心实现逐字符递归 单词边界检测方案 A用UncapitalizeRest检测边界最简洁且能通过全部用例的实现如下type KebabCaseS extends string S extends ${infer First}${infer Rest} ? Rest extends UncapitalizeRest ? ${UncapitalizeFirst}${KebabCaseRest} : ${UncapitalizeFirst}-${KebabCaseRest} : S思路解读S extends \${infer First}${infer Rest}把字符串拆成首字符与剩余部分当S为空串时该模式不匹配直接返回S满足空串用例。Rest extends UncapitalizeRest是核心判断把剩余部分与其首字母小写后的版本比较。若相等说明Rest以小写字母或非字母字符开头当前字符不是单词边界不插连字符若不等说明Rest以大写字母开头——当前位置恰好是两个单词的交界处于是输出${UncapitalizeFirst}-先小写当前字符再补一个-。末尾分支${UncapitalizeFirst}${KebabCaseRest}处理Rest只剩一个字符的情况此时Rest为空串 extends Uncapitalize恒为真保证最后一个字符被小写后正常收尾。逐步推演KebabCaseFooBarBaz步骤FirstRestRest extends UncapitalizeRest输出拼接1FooBarBaz是o开头f 递归2ooBarBaz是o 递归3oBarBaz否B开头o- 递归4BarBaz是b 递归5arBaz是a 递归6rBaz否B开头r- 递归7Baz是b 递归8az是a 递归9z是z 递归递归终止最终结果foo bar baz→foo-bar-baz✓。KebabCasefooBarBaz的推演完全一致只是开头几步小写字母直接透传同样得到foo-bar-baz。方案 B尾递归累计版本若想把中间结果显式累积对长字符串更有利于编译器优化、也便于调试理解可以加一个Acc类型参数type KebabCaseS extends string, Acc extends string S extends ${infer First}${infer Rest} ? Rest extends UncapitalizeRest ? KebabCaseRest, ${Acc}${UncapitalizeFirst} : KebabCaseRest, ${Acc}${UncapitalizeFirst}- : Acc两个方案语义完全相同只是将拼接结果从递归返回值改成了参数传递最终在S拆空时返回累积的Acc。常见误区不要用下一个字符是否等于其大写形式做判断一种直觉写法是检查Rest的首字符Next是否满足Next extends UppercaseNext若是则插-// ⚠️ 错误示范无法通过 foo-bar 用例 type WrongKebabS S extends ${infer F}${infer R} ? R extends ${infer N}${infer _} ? N extends UppercaseN ? ${UncapitalizeF}-${WrongKebabR} : ${UncapitalizeF}${WrongKebabR} : ${UncapitalizeF}${WrongKebabR} : S问题出在- extends Uppercase-恒为true非字母字符的Uppercase结果就是它自己。于是处理foo-bar时遇到o后面跟着-会被误判为单词边界结果变成foo--bar与测试预期foo-bar不符。而方案 A 用Rest extends UncapitalizeRest判断的是剩余部分是否以大写字母开头Uncapitalize-bar仍是-bar天然排除了非字母字符的干扰——这正是它的精妙之处。边界用例逐项验证Foo-Bar→foo--bar最容易出错的用例推演过程FirstFRestoo-Bar以o开头 →fFirstoResto-Bar→oFirstoRest-BarUncapitalize-Bar仍为-Bar相等 → 不插连字符oFirst-RestBarUncapitalizeBarbar ≠ Bar→ 插连字符输出- -FirstBRestar→b、a、r依次透传。拼接为f o o -- barfoo--bar✓。可见原有的-原样保留而B作为大写单词起点又被补充了一个-两者叠加产生双连字符。ABC→a-b-c连续大写时除首字符外每个大写字母前都插-ARest 为BC以大写开头 →a-→BRest 为C→b-→CRest 为空 →c得到a-b-c✓。-、、与foo_bar-拆成First-、Rest末尾分支输出-递归终止 ✓不匹配拆分模式直接返回✓Uncapitalize不变原样返回 ✓foo_bar下划线既不会触发边界判断Uncapitalize_bar也不变整串原样返回 ✓说明本题只处理连字符命名下划线命名不在其职责内。在仓库中动手验证该仓库没有为单个题目提供统一的运行测试脚本根目录 package.json 的 scripts 主要面向 readme / build / generate / lint / translate 等工程任务因此最常见的本地验证方式是打开 template.ts将type KebabCaseS any替换为上文实现在支持 TypeScript 的 IDE 或通过tsc对 test-cases.ts 做类型检查观察ExpectEqual...断言是否全部通过——仓库根 README.md 注明所有挑战均在strict模式下工作因此错误会被严格暴露。测试文件依赖的Equal/Expect定义位于 utils/index.d.tsEqualX, Y利用同一函数类型签名对X与Y的可赋值性实现精确相等检测ExpectT extends true则把非true的结果变为编译错误构成完整的类型级判题链路。命名转换家族KebabCase 与 CamelCase、SnakeCase本题在 info.yml 中被标记为与第 114 题关联related: 114。仓库中确实收录了难度更高的 CamelCasehard114它要求把snake_case转换为camelCase如hello_world_with_types→helloWorldWithTypes其 测试用例 还覆盖了foo__bar、foo_$bar、HELLO_WORLD_WITH_TYPES等更刁钻的边界。此外仓库还收录了 SnakeCasehard19458 等同类题目。从实现方法上看它们是同一套方法论的不同变体KebabCase612检测剩余部分以大写字母开头来插入-全部转小写CamelCase114检测下划线后跟字母来决定是否大写下一个字母并吞掉下划线SnakeCase19458检测大写字母边界来插入_。三者共用模板字面量拆分 infer 递归条件类型 内置字符串变换类型这一组合掌握 KebabCase 的推导过程后再去做 CamelCase 与 SnakeCase 会有明显的举一反三效果。小结KebabCase 这道 medium 题的精髓在于题面只有一句话真正的规格藏在测试用例里尤其Foo-Bar→foo--bar与ABC→a-b-c两处而解法关键是用Rest extends UncapitalizeRest判断单词边界避开非字母字符的Uppercase等于自身这一陷阱。最终实现仅需一个递归条件类型加一个内置字符串变换类型既短小又优雅type KebabCaseS extends string S extends ${infer First}${infer Rest} ? Rest extends UncapitalizeRest ? ${UncapitalizeFirst}${KebabCaseRest} : ${UncapitalizeFirst}-${KebabCaseRest} : S从工程实践看kebab-case 广泛用于 URL 路径、CSS 类名、包名与事件名等场景在类型层面实现这种转换意味着可以让组件名、路由名、样式变量名在编译期就被推导和约束。这道题既是模板字面量类型的绝佳练习也是通往 CamelCase、SnakeCase 等更复杂命名转换题的起点。赞分享示例工程【免费下载链接】type-challengesCollection of TypeScript type challenges with online judge项目地址https://gitcode.com/GitHub_Trending/ty/type-challenges点击查看免费下载相关推荐type-challenges 中等难度 612用模板字面量类型实现 KebabCase 命名风格转换type challenges 中等难度 612用模板字面量类型实现 KebabCase 命名风格转换 本篇技术指南聚焦于 type challenges 题示例工程type-challenges 第 612 题 KebabCase用模板字面量类型实现 camelCase/PascalCase 到 kebab-case 的转换type challenges 第 612 题 KebabCase用模板字面量类型实现 camelCase/PascalCase 到 kebab case 的示例工程type-challenges 中等题 ReplaceAll用模板字面量类型实现字符串全局替换type challenges 中等题 ReplaceAll用模板字面量类型实现字符串全局替换 导读 本文围绕 type challenges 题库中的第 1示例工程上一篇EOSIO keosd 密钥管理服务完全指南钱包存储、交易签名与安全模型下一篇Lark CLI task tasklist-create 实战指南一键创建任务清单并批量创建任务创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考