字符串联合与自动补全
让编辑器为已知的字符串值提供自动补全。
字符串联合与自动补全 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。
联合类型驱动自动补全
字符串字面量联合类型有双重作用：既能限制允许的值，又能为编辑器提供自动补全。但有时您既希望获得建议，又希望能够传入任意字符串，这时可以使用一种巧妙的技巧。
基础字符串字面量联合类型
声明一个允许的字符串联合类型。编辑器会准确提供这些选项，而无效值会产生编译错误。
type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // Error编辑器中的自动补全
当参数是字符串字面量联合类型时，在调用中输入内容会弹出准确的成员列表。这是 TypeScript 最受欢迎的易用性特性之一。
type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blue局限性
严格联合类型会禁止列表之外的所有值。有时您希望在建议常用值的同时仍允许任意自定义字符串，但普通联合类型无法同时做到这两点。
type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))扩宽类型会失去建议
如果直接使用 string，任何值都可以使用，但自动补全会完全消失。您用所有提示换取了完全的灵活性，这并不理想。
function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestions字符串与字面量联合类型技巧
这个技巧是：将字面量与 string & {} 组成联合类型。字面量仍会出现在自动补全中，而 string & {} 允许其他任意字符串，同时不会使联合类型退化。
type Color = "red" | "green" | (string & {})
const a: Color = "red" // suggested
const b: Color = "#ff8800" // also allowed
console.log(a, b)为什么字符串与空对象能奏效
通常情况下，'red' | string 会简化为 string，从而抹去字面量。与 {} 求交集会创建一种略有不同的类型，TypeScript 会将其单独保留，因此字面量能够继续用于补全，同时任意字符串也都符合要求。
type A = "red" | string // collapses to string — no hints
type B = "red" | (string & {}) // keeps "red" as a suggestion
const x: B = "red"
console.log(x)可复用的辅助类型
将这个技巧封装在泛型别名中，可以让意图更加清晰，并在整个代码库中复用。
type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)将其应用于函数
在应用程序接口中使用这个辅助类型，让调用方能够获得常用输入的建议，同时仍然接受自定义值。
type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home")) // suggested
console.log(setIcon("my-icon")) // allowed何时使用这一技巧
当应用程序接口拥有众所周知的值，但必须保持开放时，可以使用这一技巧：图标名称、CSS 单位、theme 令牌和框架预设值。对于封闭集合，建议使用严格联合类型以获得完整的安全性。
type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)权衡
这一技巧保留了建议，但会降低安全性：自定义字符串中的拼写错误将不再被发现。请在开放性本身就是功能的场景中有意识地使用它，而不要默认使用。
type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)快速检查
请检验您对自动补全技巧的理解。
回顾
字符串字面量联合类型可以驱动编辑器自动补全并限制值，但严格联合类型会禁止自定义字符串，而普通 string 会失去所有提示。T | (string & {}) 技巧可以在接受任意字符串的同时保留字面量建议。请将其封装为 LiteralUnion<T> 辅助类型，并只在有意保持开放的场景中使用，因为它会牺牲检测拼写错误的安全性。
常见问题解答
「字符串联合与自动补全」课时是免费的吗？
是的 — 「字符串联合与自动补全」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。
「字符串联合与自动补全」这节课中我会学到什么？
让编辑器为已知的字符串值提供自动补全。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 TypeScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「字符串联合与自动补全」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 TypeScript Academy 课中编写并运行代码吗？
能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。