如何根据属性的值配置条件类型？

Question

我有许多Item 对象和一个处理它们的方法。问题是某些项目可能具有其他项目没有的某些属性。

type ItemType = 'ApiGateway' | 'ApiGatewayEndpoint' | 'ApiGatewayMethod';

export default interface Item {
    ref?: string;
    position: Position;
    type: ItemType;
    children?: Item[];
}

function process(item: Item) {...}

现在，假设我想创建一个单独的接口ApiGatewayMethodItem（扩展Item），它有一个称为“方法”的附加字符串属性，表示它是GET 还是POST 或其他东西。有没有一种方法可以让我输入 process({type: 'ApiGatewayMethod'}) tsc 就会开始抱怨缺少的属性 method ？我知道 TS 对“条件类型”有很好的支持，但我以前没有使用过它们，我很难理解它们......

假设我有接口

interface ApiGatewayMethodItem extends Omit<Item, 'type'> {
    type: 'ApiGatewayMethod';
    method: string;
}

现在，当我调用process 函数时，我需要编译器抱怨method 属性在我不指定时丢失，但指定类型ApiGatewayMethod

Answer 1

您可以仅使用不具有“方法”属性的 2 个 ItemType 来定义您的项目类型。然后将属性 'method' 仅添加到类型 'ApiGatewayMethodItem'

type ItemType = 'ApiGateway' | 'ApiGatewayEndpoint';

export default interface DefaultItem {
    ref?: string;
    position: Position;
    type: ItemType;
    children?: DefaultItem[];
}

interface ApiGatewayMethodItem extends Omit<DefaultItem, 'type'> {
    type: 'ApiGatewayMethod';
    method: string;
}

type Item = DefaultItem | ApiGatewayMethodItem;

function process(item: Item) {

}

process ({
    type: 'ApiGatewayMethod',
    position: null
})

Answer 2

您可以将Item 设为联合类型，并定义一个接口来保存所有项目共有的属性：

export default interface CommonItemProperties {
    ref?: string;
    position: Position;
    children?: Item[];
}

interface ApiGatewayMethodItem extends CommonItemProperties {
    type: 'ApiGatewayMethod';
    method: 'GET' | 'POST';
}

interface ApiGatewayEndpointItem extends CommonItemProperties {
  type: 'ApiGatewayEndpoint';
  path: string;
}

type Item = ApiGatewayEndpointItem | ApiGatewayMethodItem;

function process(item: Item) {
  switch (item.type) {
    case ('ApiGatewayMethod'):
      return item.method; // this is not a type error - typescript 'knows' the item is a ApiGatewayMethodItem
    case ('ApiGatewayEndpoint'):
      return item.path;   // this is not a type error - typescript 'knows' the item is a ApiGatewayEndpointItem
  }
}

switch 语句只是一个示例，说明 typescript 如何根据对type 的检查来确定您传入的项目类型。

Answer 3

您可以使用discrimated unions 解决此问题。这样编译器就可以从type 字段中找出哪些成员可用。

type ItemTypeWithoutMethod = 'ApiGateway' | 'ApiGatewayEndpoint' | 'ApiGatewayMethod';
type ItemTypeWithMethod = "ApiGatewayMethodItem";

interface ItemBase {
    ref?: string;
    position: Position;
    children?: Item[];
}

interface ItemWithoutMethod extends ItemBase {
  type: ItemTypeWithoutMethod
}

interface ItemWithMethod extends ItemBase {
    type: ItemTypeWithMethod;
    method: string;
}

export type Item = ItemWithMethod | ItemWithoutMethod;

function doSomethingWithItem(item: Item) {
  if (item.type == "ApiGatewayMethodItem") {
    console.log(item.method);
  }
}

Playground link