関連

単にその型の持つプロパティを足し算したようなものです。JavaScriptが分かる人ならオブジェクト同士をObject.assignしたようなものだと想像すると分かりやすいと思います。

Intersection の例

interface Foo {
  foo: string;
}

interface Bar {
  bar: string;
}

type FooBar = Foo & Bar;
// 以下と同等
// interface FooBar {
//   foo: string;
//   bar: string;
// }

const fooBar: FooBar = {
  foo: 'foo',
  bar: 'bar'
};

使用場所

個人的には、自分で渡したいのはTだけだけど、実際の関数渡されるのはT & Uにしたいというのような場合に使っています。ここで言うUという型は、デフォルト値だったり別な所から渡ってきたりするものです。

interface Props {
  something: any;
}

interface RouterProps {
  history: any;
}

const Router = {
  // モック
  get(): RouterProps {
    return;
  }
}

// こっちは自分から呼び出すことはしない
const realRender: (props: Props & RouterProps) => null = props => null;
const render: (props: Props) => null = props => {
  const routerProps = Router.get();
  const realProps = {
    ...props,
    ...routerProps,
  };
  return realRender(realProps);
};

例えばこれはDecoratorで同じプロパティを使う時とか、ReactのContextとpropsで一緒に渡したい時とかに使うことができます。

JavaScript で飯食べたい歴約 8 年、 純( nju33 ) によるノートサイトです。

このサイトではドリンク代や奨学金返済の為、広告などを貼らせて頂いてますがご了承ください。

Change Log