Typescript 创建一个类型，其属性是接口的属性

Question

我有一个接口定义如下

export interface RoutingMap {
    ticket: {
        id: number
    },
    car: {
        model: string,
        make: number
    }
}

我希望能够为一个对象创建一个接口，该对象有 2 个属性 - 1 是 中的键RoutingMap，另一个是Key中的任何类型RoutingMap。

在伪代码中我想象它看起来像这样

export interface RoutingMessage {
    resource: keyof RoutingMap,
    params: RoutingMap["resource"]
}

我的最终目标是能够构建这样的对象

const msg: RoutingMessage = {
    resource: "ticket",
    params: { id: 10 }
}

const invalidMsg: RoutingMessage = {
    resource: "something", //TS error - "something" is not a key of routing map
    params: { id: 10 }
}

const invalidMsg2: RoutingMessage = {
    resource: "car"
    params: { model: "tesla", make: true } //TS error - "make" is not a boolean
}

const invalidMsg3: RoutingMessage = {
    resource: "car"
    params: { id: 123 } //TS error - id is not assinable to  {model: string, make: boolean}
}

这RoutingMap是会随着时间的推移而扩展的东西，人们应该能够根据键（及其值）创建特定的对象

正如您从伪代码示例中看到的，我可以为资源设置约束，但我需要一种方法来约束 params 属性，使其仅允许Key与RoutingMap

Answer 1

由于匹配的键数量有限keyof RoutingMap，因此您可以将其编写RoutingMessage为对象类型的联合，其中联合的每个元素对应于一个特定的键，如下所示：

type RoutingMessage = {
    resource: "ticket";
    params: {
        id: number;
    };
} | {
    resource: "car";
    params: {
        model: string;
        make: number;
    };
}

您可以通过将其编写为“分布式对象类型”（借用自 microsoft/TypeScript#47109 的术语）来以编程方式进行计算RoutingMessage，RoutingMap我们在其中创建一个映射类型，其中带有键的每个属性K都RoutingMap映射到该键所需的对象类型，然后我们立即使用对其进行索引keyof RoutingMap，产生所需的并集。

type RoutingMessage = { [K in keyof RoutingMap]:
  { resource: K, params: RoutingMap[K] }
}[keyof RoutingMap];

根据上述定义，RoutingMessage每当将新属性添加到 时RoutingMap，将根据需要获得新的联合成员。

让我们确保它的行为符合您的要求：

const msg: RoutingMessage = {
  resource: "ticket",
  params: { id: 10 }
}; // okay

const invalidMsg: RoutingMessage = {
  resource: "something", // error!
  //~~~~~~ <-- Type '"something"' is not assignable to type '"ticket" | "car"'
  params: { id: 10 }
};

const invalidMsg2: RoutingMessage = {
  resource: "car",
  params: { model: "tesla", make: true } // error!
  //  --------------------> ~~~~
  // Type 'boolean' is not assignable to type 'number'.
};

const invalidMsg3: RoutingMessage = {
  resource: "car",
  params: { id: 123 } // error!
  // -----> ~~~~~~~
  // Type '{ id: number; }' is not assignable to type '{ model: string; make: number; }' 
};

看起来不错！

Playground 代码链接