javascript Typescript可选扩展接口

sqyvllje 于 2022-12-02 发布在 Java

关注(0)|答案(6)|浏览(137)

我有两个interfaces，其中一个扩展了另一个，但是，我希望能够扩展第一个interface并使其所有类型都是可选的。（因为在该点扩展有什么好处？）或者重新定义第一个interface，因为它正在其他地方使用。
外观：

interface First {
  type1: string
  type2: string
}

// Seemingly pointless rewrite (why would I even need to extend?)
interface Second extends First {
  type1?: string
  type2?: string
  type3: string
  type4: string
}

// What I imagine the extending should be (but doesn't work)
interface Second extends First? {
  type3: string
  type4: string
}

我做了我的研究，确实找到了this question，它回答了一些非常相似的问题，但是自从这个问题被触及以来已经有一年了，我认为我的问题并不完全相同，因为我想使 * 整个 * 扩展的interface是可选的，而不仅仅是其中的几个类型。
有没有办法在Typescript中做到这一点，或者我只需要把它吸起来，做一个长的第二个interface？

更新（解释我为什么希望此功能正常工作）：

我正在编写一个React Web应用程序，有一个组件可以显示我的数据库中的实体，并允许用户编辑该实体的任何值。我希望我的React组件能够处理用户创建新实体以及编辑现有实体的情况。
为了与我上面的例子保持一致，假设我的数据库实体的值由Firstinterface复制，而React组件使用存在于Secondinterface中的两个传递的属性。React组件将 * 总是 * 在Second中具有两个值，但不一定具有First的值。
在用户创建新实体的情况下，我希望仅使用Second的值构造React组件，而不必为First中的所有内容指定null值。在用户编辑现有实体的情况下，我将传递First和Second中的所有内容。
在这两种情况下，它将是相同的UI，但使用不同的值集构造。

JavaScript

来源：https://stackoverflow.com/questions/44101534/typescript-optionally-extending-interface

6条答案

按热度按时间

6psbrbz91#

您可以将类型别名与“部分”（Partial）类型上的交集沿着使用：

type First = {
    type1: string;
    type2: string;
}

type Second = Partial<First> & {
    type3: string;
    type4: string;
}

赞(0）回复(0）举报 2022-12-02

t3psigkw2#

您可以对使用Partial类型的接口执行此操作。

interface First {
    type1: string;
    type2: string;
}

interface Second extends Partial<First> {
    type3: string;
    type4: string;
}

赞(0）回复(0）举报 2022-12-02

k4emjkb13#

有一个更好/更简单的方法。使用“忽略”可以只重新定义特定的命名属性。

interface First {
    type1: string;
    type2: string;
}

interface Second extends Omit<First, "type1"> {
    type1?: string;
}

赞(0）回复(0）举报 2022-12-02

vfh0ocws4#

您还可以通过提供一个空接口使所有部分都是可选的：

export interface ISingleScope {
   scope: string;
}

export interface IMultiScope {
   scopes: string[];
   check?: boolean;
}

export interface IProvidedScope 
   extends Partial<ISingleScope>, Partial<IMultiScope> { 
}

然而，通常这需要显式测试used属性是否存在，因为在运行时这些信息都不存在。因此，如果你的对象带有名称 options，那么这就足够了：

if (options && options.scopes) {
   // access properly 'IMultiScope'
}

赞(0）回复(0）举报 2022-12-02

bxjv4tth5#

Partial是伟大的，但有时你想挑选的键，你想使可选，而不是使他们都可选!
为此，请使用：type Optional<T, K extends keyof T> = Partial<Pick<T, K>> & Omit<T, K>
来源：此可选答案来自this question。如果您需要嵌套的可选答案，请转到链接的问题。

赞(0）回复(0）举报 2022-12-02

n53p2ov06#

Typescript中的Extendsinterface表示第二个对象将继承第一个对象所具有的内容，如果第一个对象的属性是可选的或不是可选的，则它们将应用于第二个对象而不进行更改。您无法在Typescript中更改此行为。您问题的答案是：您不应该在您的情况下使用extends。

赞(0）回复(0）举报 2022-12-02