如何使用带有 or 条件的 typescript 接口

Question

我是打字稿的新手。在这里，我有以下代码，如下所示，

interface FirstOriginal {
  active: boolean;
  status: boolean;
}

interface Product {
  id: number;
  name: string;
  Original: FirstOriginal;
}

interface MainProduct {
  id: number;
  Name: string;
  Original: Product;
}

class MainService {
  buildproduct = memoize((products: Array<Product | MainProduct>, ismain) => {
    const group = _.groupBy(products, (bsp: Product) =>
      !ismain
        ? bsp?.Original?.active ?? undefined
        : bsp?.Original?.Original?.active ?? undefined
    );
  });
}

现在，我无法做到bsp?.Original?.active ?? undefined : bsp?.Original?.Original?.active ?? undefined。因为我只能为一个界面做到这一点，所以任何人都可以帮助我解决这个问题。喜欢，

如何将这两个接口用于同一个类函数。

谢谢。

Answer 1

要指定可选属性或参数，您可以在属性/参数名称前使用?。

例如：

memoize((products?: Array<Product | MainProduct>, ismain?:number) {
}

或

interface Product {
  id?: number;
  name?: string;
  Original?: FirstOriginal;
}

另一种方法是使用[Partial][1]。 Partial 将返回给定接口的所有子集。

memoize((products?: Array<Partial<Product | MainProduct>>, ismain?:number) {
}

Answer 2

来了！ javascript 上不存在接口。即使您可以在执行时解决所有编译错误，javascript 也无法分辨哪个是哪个。如果我们想知道它是什么类型的 blahblah，我们需要添加 javascript。这就是我创建Imp 类的原因。

import { groupBy, memoize } from "lodash";
import { MainOrNot } from "./tril";

interface FirstOriginal {
    active: boolean;
    status: boolean;
}

interface MainProduct {
    id: number;
    Name: string;
    Original: Product;
}

interface Product {
    id: number;
    name: string;
    Original: FirstOriginal;
}

class FirstOriginalImp implements FirstOriginal {
    active: boolean;
    status: boolean;
    public constructor(data: FirstOriginal) {
        Object.assign(this, data);
    }
}

class ProductImp implements Product {
    id: number;
    name: string;
    Original: FirstOriginal;

    public constructor(data: Product) {
        Object.assign(this, data);
    }
}

class MainProductImp implements MainProduct {
    id: number;
    Name: string;
    Original: Product;

    public constructor(data: MainProduct) {
        Object.assign(this, data);
    }
}

export type MainOrNot = MainProductImp | ProductImp;

class MainService {
    buildproduct = memoize((products: Array<MainOrNot>, ismain: boolean) => {
        const group = groupBy<MainOrNot>(products, (bsp) => {
            if (bsp instanceof MainProductImp) {
                return bsp?.Original?.Original?.active ?? undefined;
            }

            if (bsp instanceof ProductImp) {
                return bsp?.Original?.active ?? undefined;
            }
        });
    });
}