typescript - TypeScript 接口(interface)中的自引用键类型

Question

我有一个具有以下接口(interface)的对象，我想以编程方式更新:

interface ITypes {
  num: number;
  str: string;
  bol: boolean;
};

const obj: Partial<ITypes> = {}; // I want to update this programatically

我希望能够定义一个 key和 val并更新我的 obj使用这些值。我想要它，以便 key只能是 ITypes 中的键之一接口(interface)，然后该值需要是在选定的 key 中指定的类型从界面。我可以使用以下代码很好地做到这一点:

const key: keyof ITypes = "num"; // key must be a key from the ITypes interface
const val: ITypes[typeof key] = 1; // val must be the type specified at `"num"` - `number`
obj[key] = val;

上面的代码工作正常，但是，现在，而不是 key和 val作为单独的变量，我想在一个对象中定义它们，所以我需要定义一个接口(interface)。但是，我遇到了 val 的类型定义问题。 .这是我到目前为止所尝试的:

interface IUpdatePayload {
  key: keyof ITypes;
  val: ITypes[typeof this.key]; // Type 'any' cannot be used as an index type.
};
const updatePayload: IUpdatePayload = {key: "num", val: "1"}; // should complain that `val` is not a number
obj[updatePayload.key] = updatePayload.val; 

我试图自我引用接口(interface)的 key使用 typeof this.key 输入(我在 this answer 中看到了建议)但是 Type 'any' cannot be used as an index type. 出错了，我猜这是因为 key 实际上并没有被定义为具有像第一个使用变量的工作示例中的值。我的问题是，有没有办法让 val采用 key 定义的类型如 ITypes 中指定的界面？

Answer 1

您可以使用映射类型从任何类型生成键/值对的联合:

type KVPairs<T, K extends keyof T = keyof T> = 
    K extends keyof T
        ? { key: K, val: T[K] } 
        : never;

然后，您可以创建自定义联合:

// {key: "num", val: number} | {key: "str", val: string} | {key: "bol", val: boolean}
type IUpdatePayload = KVPairs<ITypes>;

如果需要，此类型还允许您选择键的子集:

// {key: "num", val: number} | {key: "str", val: string}
type NumOrStr = KVPairs<ITypes, "num"|"str">

但是，将对象字面量分配给联合类型时，错误并不总是很清楚:

const obj: IUpdatePayload = { key: "num", val: "1" };
/*
Type '{ key: "num"; val: string; }' is not assignable to type 'IUpdatePayload'.
  Type '{ key: "num"; val: string; }' is not assignable to type '{ key: "bol"; val: boolean; }'.
    Types of property 'key' are incompatible.
      Type '"num"' is not assignable to type '"bol"'.
*/

playground