web-dev-qa-db-ja.com

Typescriptオプションの拡張インターフェース

私には2つのinterfacesがあり、一方がもう一方を拡張しています。ただし、最初のinterfaceを拡張して、そのすべての型をオプションにできるようにしたいと思います。最初のinterfaceのすべての定義を2番目の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
}

私は自分の調査を行って、 この質問 と非常によく似た答えを見つけましたが、その質問に触れてから1年が経過し、/を作成したいので、私の問題はまったく同じではないと思いますentire拡張されたinterfaceオプション。

TypeScriptでこれを行う方法はありますか？それを吸い上げて長い秒のinterfaceを作成する必要があるだけですか？

更新（なぜこの作業が必要なのかを説明するため）：

React Webアプリであり、ユーザーがエンティティの任意の値を編集できるようにデータベースのエンティティを表示するコンポーネントがあります。私のReactコンポーネントは、ユーザーが新しいエンティティを作成している場合や、ユーザーが既存のエンティティを編集している場合を処理します。

上記の例を続けるために、データベースエンティティの値が First interfaceによってレプリケートされ、Reactコンポーネントが存在する2つの渡されたプロップを使用するとします Second interface内。Reactコンポーネントはalwaysに2つの値があります Second 。ただし、必ずしも First の値を持つ必要はありません。

ユーザーが新しいエンティティを作成する場合は、Reactコンポーネントを Second の値のみで構成する必要があります。すべてのnull値を First で指定します。ユーザーが既存のエンティティを編集する場合、 First と秒。

どちらの場合も、UIは同じですが、値のセットが異なります。

javascripttypescriptinterface
18
Louie Bertoncin

Partial タイプで intersection とともに type aliases を使用できます。

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

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

Partial タイプを使用して、インターフェースでこれを行うことができます。

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

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

空のインターフェースを提供することで、すべてのパーツをオプションにすることもできます。

export interface ISingleScope {
   scope: string;
}

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

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

ただし、実行時にはこれらの情報のどちらも存在しないため、通常は使用されるプロパティの明示的なテストが必要になります。したがって、オブジェクトにoptionsという名前が付いている場合、これで十分です。

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

TypeScriptのExtendsinterfaceは、最初のオブジェクトのプロパティがオプションであるかどうかに関係なく、2番目のオブジェクトが最初のオブジェクトのプロパティを継承することを意味します。 TypeScriptでこの動作を変更することはできません。あなたの質問への答えはあなたがあなたのケースのためにextendsを使うべきではないということです。

0
PRAISER