时间戳

首页 > 解决方案 > 如何告诉打字稿 {type:enum, [type: string]:value} 的所有可能组合都在我的类型中？

javascript - 如何告诉打字稿 {type:enum, [type: string]:value} 的所有可能组合都在我的类型中？

问题描述

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

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”类型中。

标签： javascripttypescript

解决方案

首先，让我们明确一点，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()……一个是为调用者强制执行类型安全，另一个是在实现中强制执行类型安全。现在编译器在实现内部警告你它无法验证这{ type: type, [type]: value }是一个有效的Config. 现在警告你是正确的，因为调用者可以毫无错误地执行以下操作：

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

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

要为调用者修复它，您可以使用如下重载：

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

这很容易理解，但需要为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>
) {
  // impl
}

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

其中任何一个都会导致调用者出现以下行为：

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

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

要为实现修复它（这是您的实际问题），即使使用固定的调用签名，编译器仍然无法确定这config是有效的。Config对于重载，这是因为实现签名过于松散，无法表达约束，而重载实现目前没有根据调用签名进行任何控制流分析。对于泛型条件类型，这是因为依赖于其中未解析的泛型类型参数的条件类型也不会通过控制流分析来缩小范围。因此，在这两种情况下，编译器基本上都放弃了在实现中强制执行相关数据类型的类型安全。我经常希望对于一些允许您提示编译器通过控制流分析遍历联合类型的机制，但这只是一个幻想。

所以，你可以做什么？据我所知，这里实际上只有两种前进方式。要么你使用类型断言：让你的代码保持原样，但只告诉编译器你将负责确保类型安全，如：

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);
}

链接到 Playground 中的代码

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

推荐阅读