ウェブサイト検索

javascript - TypeScriptでスプレッド演算子を使用する

別のコンポーネントでラップされたコンポーネントを返す関数を書きたいです。私が書こうとしている関数は、以下のようなJavaScriptのものです。

function GetGroup({ name, text, isRequired, ...props })

ここで、name、text、および isRequired は渡された引数から取得され、他のものは別のコンポーネントに props として送られます。

TypeScriptでそれを書くにはどうすればいいですか？

回答 #1

まず第一に、オブジェクトのレスト/スプレッドは、標準化に向けて順調に進んでいる提案されたECMAScriptの機能で、ステージ4に達しており、正式に採用される過程にあります。

ご存知の通り、その使用法から、プレーンなJavaScriptオブジェクトを扱うことを非常に柔軟にします。

この機能の型付けに関する情報は、TypeScript 2.1 のドキュメントで入手可能です。ドキュメントには非常に雄弁に次のように述べられています：

オブジェクトレストはオブジェクトスプレッドの双対であり、要素を分解するときに拾われなかった余分なプロパティを抽出することができます。

そして実際、実際に二つの特徴が作用しており、一方がもう一方を補完しています。

オブジェクトの残り

機能のRest部分が使用されると、残りのプロパティをそれらで構成された新しいオブジェクトに収集できるようにすることで、オブジェクトの分割代入が強化されます。

他の値に対して行うように、型注釈を書くことができます。例えば

interface GroupProperties {
  name: string;
  text: string;
  isRequired?: boolean;
  values: string[];
  flagged: boolean;
}

function Group({ name, text, isRequired, ...rest }: GroupProperties) {
  console.log(rest);
}

これは型システムに、name と text が string 型であり、is required が boolean 型であることを通知します。さらに、型システムは rest がそれぞれ boolean 型と string 型の values と flagged の二つのプロパティを持つことを認識します。rest の型は推論されます。

オブジェクトスプレッド

機能のSpread部分が使用されると、複数のソースからオブジェクトを宣言的に構築すること、派生オブジェクトを簡単に作成すること、そして容易に未定義化やオーバーライドを行うことによって、オブジェクト構築が強化されます。

型システムは、スプレッド式の意味も理解し、それらが評価される型を推論します。

const o = {x: 1, y: 'hello'};

const o1 = {
  ...o,
  y: 1
};

上記では、o1 の型は {x: number, y: number} です。

関連記事