javascript - 如何告诉 typescript {类型:enum, [类型: string]:value} are in my type?的所有可能组合

Question

我能想到的最简单的例子:

interface text {
  type: "text";
  text: string;
}
interface integer {
  type: "integer";
  integer: number;
}
type Config = text | integer;

function appendToBody(config: Config) {
  if (!config[config.type]) return;
  document.body.append(config[config.type]);
}

function createConfig(type: "text" | "integer", value: string | number) {
  // how to let TS know that type and [type] will be matching?
  // TS naturally assumes { type: 'text', text: 5 } is possible, even though it isn't
  const config: Config = {
    type,
    [type]: value
  };
  appendToBody(config);
}
createConfig("text", "hello world");

https://codesandbox.io/s/6gtq8

基本上我使用的模式是通过询问 obj[obj.type] 来提取值。这对我的实际情况很有用，因为我可以制作一个通用的解析器，根据类型提取我需要的值。它还具有如果类型更改时不必清空的优点，因为它将保存在不同的 [type] 上，并且如果您改回原值，则不会丢失旧值。

我只是想不通如何让 typescript 理解 type 和 [type] 的所有可能组合都包含在“Config”类型中。

Answer 1

首先，我们要明确integer应该有一个名为integer的键，而不是number，对吧？像这样:

interface text {
    type: "text";
    text: string;
}
interface integer {
    type: "integer";
    integer: number; // right?
}
type Config = text | integer;

function appendToBody(config: Config) {
    if (!config[config.type]) return;
    document.body.append(config[config.type]);
}

好的。

---

createConfig() 有两个类型安全问题...一个是为调用者 强制类型安全，另一个是在 中强制类型安全em>实现。现在，编译器在实现内部警告您它无法验证 { type: type, [type]: value } 是有效的 Config。现在警告您是正确的，因为调用者可以毫无错误地执行以下操作:

createConfig("text", 5); // no error, oops!

没有简单的方法可以为调用者和实现者解决这个问题。每一方都有自己的问题。

---

要为调用者修复它，您可以使用 overloads像下面这样:

function createConfig(type: "text", value: string): void;
function createConfig(type: "integer", value: number): void;
function createConfig(type: string, value: any): void {
    // impl
}

这很容易理解，但需要为 Config 联合的每个组成部分添加一个重载。您也可以使用 conditional类型和 generic函数，如下:

type Lookup<T, K> = K extends keyof T ? T[K] : never;
type ConfigFor<T extends Config['type']> = Extract<Config, { type: T }>;
function createConfig<T extends Config['type']>(
    type: T,
    value: Lookup<ConfigFor<T>, T>
) {
  // impl
}

这很复杂，但假设 Config 联合的每个元素 C 都符合 type 属性命名的约束，它会自动正确运行值属性的相关键。

这两种情况都会导致调用者出现以下行为:

createConfig("text", 5); // error
createConfig("integer", 5); // okay

createConfig("text", "hello world"); // okay
createConfig("integer", "hello world"); // error

---

要为实现修复它，(这是你的实际问题)，编译器仍然无法弄清楚 config 是一个有效的 Config 即使固定调用签名。对于重载，是因为实现签名过于松散，无法表达约束，重载实现do not currently do any control flow analysis based on the call signatures .对于泛型条件类型，这是因为依赖于其中未解析的泛型类型参数的条件类型也是do not get narrowed via control flow analysis .因此，在这两种情况下，编译器基本上都放弃了在实现中强制执行相关数据类型的类型安全。我经常wished对于某种允许您提示编译器通过控制流分析遍历联合类型的机制，但现在这只是一个幻想。

那么，你能做什么？据我所知，这里实际上只有两种前进方式。您要么使用 type assertion : 保持你的代码不变，但只告诉编译器你将负责确保类型安全，如:

const configAsserted = {
    type,
    [type]: value
} as any as Config;
appendToBody(configAsserted);

或者，您在运行时进行额外的手动检查，让编译器相信您所做的是安全的，如:

let configManual: Config;
if (type === "integer" && typeof value === "number") {
    configManual = { type: "integer", integer: value };
} else if (type === "text" && typeof value === "string") {
    configManual = { type: "text", text: value };
} else {
    throw new Error("YOU MESSED UP");
}
appendToBody(configManual);

两种方式都有效。当您将成分添加到 Config 时，断言不太安全，但可扩展性更好。手动检查是安全的，但它是多余的，每次向 Config 添加成分时都必须添加代码。

---

因此，在我看来，您有多种选择。就我个人而言，我会选择扩展性更好的解决方案，如下所示:

type Lookup<T, K> = K extends keyof T ? T[K] : never;
type ConfigFor<T extends Config['type']> = Extract<Config, { type: T }>;
function createConfig<T extends Config['type']>(
    type: T,
    value: Lookup<ConfigFor<T>, T>
) {
    const config = {
        type,
        [type]: value
    } as any as Config;
    appendToBody(config);
}

Link to code in Playground

好的，希望对你有帮助。祝你好运!