类型化反应 - 道具作为“类型”或“接口”

Question

我有反应代码

导出默认类 MyComponent 扩展组件

问题是，我写的道具是类型还是接口？

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

或

interface Props {
    isActive: Boolean,
    onClick: Function
}

另外，当我不使用typescript，而是使用经典的webpack babel设置时，方向是什么？

或者，这对我来说很重要吗？




Answer 1

接口比相应的类型声明更强大一些，但是对于一组react道具来说，这可能无关紧要。你可以在这个问题中读到类型和接口之间的区别。

由于您不太可能扩展该接口或在其他地方对其进行扩展，因此使用任何一个都可能没问题。但我想说的是，接口通常是定义对象类型的首选，因为它们更灵活一些。

Answer 2

现在是2020年，在几乎所有带有React道具的情况下，我都会喜欢type（这里是一般类型vs接口帖子）。只能用类型别名表示的常见情况：

// 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"));

用于说明的类组件示例(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"));

唯一的情况是，我会考虑接口：

• 您在全局范围内对prop类型进行声明合并（现在不常见）
• 您想隐藏类型实现详细信息，因为接口会创建错误消息、IDE类型信息等中使用的新名称。（文档）