web-dev-qa-db-ja.com

型付き反応-「タイプ」または「インターフェース」としての小道具

反応コードがあります

export default class MyComponent extends Component<Props,State>

問題は、typeやinterfaceのような小道具を書くことですか？

type Props = {
    isActive: Boolean,
    onClick: Function
}

または

interface Props {
    isActive: Boolean,
    onClick: Function
}

また、TypeScriptではなく、クラシックなwebpack + babelセットアップを使用している場合の方向性は何ですか？

それとも、私にとって重要なことですか？

reactjstypescriptflowtype
9
Ivan Hanák

インターフェースは、対応する型宣言よりも少し強力ですが、一連の反応小道具の場合、それはおそらく問題ではありません。タイプとインターフェースの違いについて読むことができます この質問では 。

そのインターフェースを拡張したり他の場所で拡張したりすることはほとんどないので、どちらを使用しても問題ないでしょう。ただし、オブジェクトタイプを定義する場合は、インターフェイスの方がやや柔軟であるため、一般的にはインターフェイスの方が好ましいと言えます。

7
CRice

それは現在2020年であり、typeの小道具でほとんどすべての場合にReactを支持します（一般的なタイプ対インターフェイスの投稿は ここ です）。タイプエイリアスでのみ表現できる一般的なケース：

// given some props from another comp that are to be altered
type ExternalProps = { a: string; b: { c: number } };

type Props_IndexType = ExternalProps["b"]; // { c: number; }
type Props_MappedType = { [K in keyof ExternalProps]: number }; // { a: number; b: number; }
type Props_DiscriminatedUnionType = { tag: "tag1"; foo: string } | { tag: "tag2"; foo: boolean}
type Props_typeOf = { foo: string } & typeof defaultProps; // see class comp example

// conditional types - ok, this one is a bit contrived, but you get the point
type Props_ConditionalType<T> = T extends true ? { a: string } : { b: number };
const Comp = <T extends {}>(props: Props_ConditionalType<T>) =>
  <div>{"a" in props && (props as any).a}</div>
render(<Comp<true> a="foo" />, document.getElementById("root"));

クラスコンポーネント example の例（OPではそれらについて言及していますが、上記のケースはフックにも適用されます）：

// cannot do that with interfaces
type Props = ({ tag: "tag1"; foo: string } | { tag: "tag2"; foo: boolean }) &
  typeof defaultProps;
type State = typeof initState;

const defaultProps = { a: "A" };
const initState = { c: "C" };

class App extends React.Component<Props, State> {
  static readonly defaultProps = defaultProps;
  state = initState;

  render() { ... }
}

render(<App tag="tag1" foo="foo" />, document.getElementById("root"));

唯一の場合、私はインターフェースを検討します：

  • あなたは 宣言のマージ グローバルスコープ内のプロップタイプの（現在では珍しい）
  • インターフェイスがエラーメッセージで使用される新しい名前を作成するときに、型の実装の詳細を非表示にする必要がありますIDE型情報など（ docs ）
2
ford04