0

假设给定数据

const dataA = {
  name: "John",
  age: 25,
  attributes: {specificA: "hello", specificA2: 14, nonspecific:"Well"},
}

const dataB = {
  name: "Lisa",
  age: 38,
  attributes: {specificB: "hello", someMoreSpecificStuff: true, nonspecific:"Hope this"},
}

const dataC = {
  name: "Peter",
  age: 60,
  attributes: {specificC: "hello", couldBeAnyName: "Oh My", nonspecific:"makes sense"},
}

我的一些组件只会访问一般信息 ( name, age)
有些其他组件只会访问一般信息，但也会访问在键相同但值不同的属性中共享的一般信息 ( attributes.nonspecific) 有些组件只能工作数据类型之一。

到目前为止，我想出的是：

const dataA: MyDataType<A> = {
  name: "John",
  age: 25,
  attributes: {specificA: "hello", specificA2: 14, nonspecific:"Well"},
}

const dataB: MyDataType<B> = {
  name: "Lisa",
  age: 38,
  attributes: {specificB: "hello", someMoreSpecificStuff: true, nonspecific:"Hope this"},
}

const dataC:MyDataType<C> = {
  name: "Peter",
  age: 60,
  attributes: {couldBeAnything: "Oh My", nonspecific:"makes sense"},
}

type MyDataType<T extends A | B | C> = {
  name: string;
  age: number;
  attributes: T
}

type A = {
  specificA: string;
  specificA2: number;
  nonspecific: string;
}

type B = {
  specificB: string;
  someMoreSpecificStuff: true;
  nonspecific: string;
}

type C = {
  couldBeAnything: string;
  nonspecific: string;
}

这很好用，但是如果我现在想要一个组件使用这些数据类型中的任何一种，我必须像这样键入它：

interface ForMyGeneralComponent{
  data: MyDataType<A | B | C>
}

我想写的是

interface ForMyGeneralComponent{
      data: MyDataType<GenericType>
    }

并在某处声明,GenericType或.ABC

你为什么问？想象一下，这些属性可以由多达 30 种不同的类型组成。如果我必须在任何地方输入它们，这会大大降低可读性。而且我猜我很懒？

打字稿游乐场

4

2 回答 2

2

不确定，如果我了解您的用例。
也许您只想为您的所有属性引入一种新类型，例如

type MyAttributes = A | B | C;

type MyDataType<T extends MyAttributes> = {
  name: string;
  age: number;
  attributes: T
}

interface ForMyGeneralComponent{
  data: MyDataType<MyAttributes>
}
于 2021-03-05T08:34:57.680 回答
0

所以我想我正在寻找的是构建一个适用于所有人的通用组件，它接受一个泛型，上面写着“我可以是任何子类，没关系”，并且打字稿确保我只使用与类型无关的属性在这些组件中

根据您对其他问题的评论，您肯定是过于复杂了！如果您有一些采用任何子类型的组件，那么您不需要通用或联合。您所需要的只是定义通用的部分。

type GeneralType = {
  name: string;
  age: number;
  attributes: {
    nonspecific: string;
  }
}

这不一定是泛型，但我们可以将其设为泛型，以便更轻松地创建特定版本。如果没有提供值，您可以为通用变量设置默认值。所以我们想要一个在默认状态下会是GeneralType上述的类型，但也可以用来创建A数据、B数据等。

我的建议是泛型变量应该只引用发生变化的属性。我不会包含nonspecific: string在通用部分中，因为它始终存在。

在这里，我使用泛型Extra来指代attributes除nonspecific.

type MyDataType<Extra extends {} = {}> = {
  name: string;
  age: number;
  attributes: Extra & {
    nonspecific: string;
  }
}

在一般情况下只需省略Extra，它将使用默认值，即空对象（无额外属性）。

interface ForMyGeneralComponent {
  data: MyDataType;
}

const dataGeneral: MyDataType = {
  name: "Peter",
  age: 60,
  attributes: {nonspecific:"makes sense"},
}

您的具体情况仍然与以前大体相同，const dataA: MyDataType<A>等等，但现在您不需要包含nonspecific在A、B和C.

打字稿游乐场链接

于 2021-03-05T09:14:35.007 回答