web-dev-qa-db-ja.com

フロー：別のタイプを拡張してフロータイプを作成する

type someType = {
  keyOne: string,
  keyTwo: string,
};

type someOtherType = {
  keyOne: string,
  keyTwo: string,
  keyThree: string,
};

これらのタイプは両方ともkeyOneとkeyTwoを含むオブジェクトであり、唯一の違いは後者ですextends前者にkeyThreeの追加キーがあります。

複製されたコードを書くのではなく、someOtherTypeを拡張することでsomeTypeフロータイプを構築することは可能ですか？私の考えでは、ES6オブジェクトのレスト/スプレッドが思い浮かびますが、Flowでこのようなことをどのように達成するかはわかりません。

ありがとう！

javascriptcastingtype-conversionflowtype
20
Jon Cursi

探しているのは 交差タイプ です。ドキュメントによると：

交差タイプでは、値がすべての入力タイプである必要があります。

構文：交差点：<タイプ1>＆<タイプ2> ...＆<タイプn>

交差タイプは、既存のタイプを拡張し、タイプ要件を追加することを目的としています。

type someType = {
  keyOne: string,
  keyTwo: string
}

type someOtherType = someType & {
  keyThree: string
}

const shouldBeOk: someOtherType = {
  keyOne: 'biz',
  keyTwo: 'buzz',
  keyThree: 'baz',
}

const shouldError: someOtherType = {
  keyOne: 123,
  keyTwo: 'hello',
  keyThree: 'world',
}

// flow error:
16: const shouldError: someOtherType = {
                               ^ object literal. This type is incompatible with
8: type someOtherType = someType & {
                        ^ object type

交差タイプの論理的な反対は、 結合タイプ です。ドキュメントによると：

ユニオン型では、値が入力型の1つである必要があります。

構文：Union：<タイプ1> | <タイプ2> ... | <タイプn>

例として。ユニオン型を使用して、列挙型を作成できます。

type fooBarBazType = 'foo' | 'bar' | 'baz';
const shouldBeOk: fooBarBazType = 'bar';

const shouldError: fooBarBazType = 'buzz';

4: const shouldError: fooBarBazType = 'buzz';
                                      ^ string. This type is incompatible with
4: const shouldError: fooBarBazType = 'buzz';
                      ^ string enum
25
thejohnbackes

申し訳ありませんが、受け入れられた答えは間違っており、完全一致を使用しなかったという理由だけで機能しています。

完全一致を使用すると、エラーが発生します ：

10：const shouldBeOk：someOtherType = {
^プロパティshouldBeOkがオブジェクトタイプ 1 にないため、オブジェクトリテラル 2 に存在するため、オブジェクトリテラルをkeyOneに割り当てることができません。参照：6：タイプsomeOtherType = someType＆{|
^ 1 10：const shouldBeOk：someOtherType = {
^ 2

それを行う正しい方法は、spread操作を使用することです。

type someOtherType = {|
  ...someType,
  keyThree: string
|}

デモ

2
shem