Question

我正在尝试制作一个真正只希望传入的选项至少具有 2 个属性的组件。用户可以根据需要传入更多属性，以便在执行自定义组件时可以使用更多属性。这是我所期望的最低限度。

{
  id: number;
  name: string;
}

但用户可以传入以下内容：

{
  id: number;
  name: string;
  disabled: boolean;
  icon: string;
  ....
}

所以我不确定如何构建界面。

这是我创建的界面

interface OptionProp {
  id: number;
  name: string;
}

所以在我的主要组件界面中有

interface TypeComponent {
  options: OptionProp[] | any;
}

我认为必须有比使用 any 更好的方法？

Answer 1

这将取决于您最终想要实现的目标，但您可能会使用带有类型约束的泛型来实现这一目标。

作为example：

interface OptionProp {
  id: number;
  name: string;
}

interface TypeComponent<T extends OptionProp> {
  options: T[];
}

function doSomething<T extends OptionProp>(request: TypeComponent<T>) {
  request.options.forEach(o => console.log(o.id, o.name));
}

doSomething({
  options: [{
    id: 1,
    name: 'John',
    disabled: false,
    icon: null
  }]
});

extends 上的 TypeComponent<T> 约束意味着所使用的类型必须扩展 OptionProp 并且可以具有您想要应用的任何其他属性。 doSomething 现在很乐意接受任何具有从 options 扩展的 OptionProp 的请求。

另一种选择是使用索引签名。 Example：

interface OptionProp {
  id: number;
  name: string;
  [key: string]: any;
}

interface TypeComponent {
  options: OptionProp[];
}

function doSomething(request: TypeComponent) {
  request.options.forEach(o => console.log(o.id, o.name));
}

doSomething({
  options: [{
    id: 1,
    name: 'John',
    disabled: false,
    icon: null
  }]
});

这表示除了 id 和 name 之外，OptionProp 还可以包含 key 类型的任何对象 any。

泛型将允许您更明确地了解其他函数中使用的类型，而索引签名对您期望的类型更加宽松/宽松。

Answer 2

您可以像这样设置可选属性：

interface TypeComponent {
  options: OptionProp[];
  disabled?: boolean;
  icon?: string;
}

打字稿允许用户添加其他属性

2 个答案: