在React中，将props定义为`type`或`interface`。

15 浏览
0 Comments

在React中，将props定义为`type`或`interface`。

我有一个React代码

export default class MyComponent extends Component

问题是，我应该如何编写props，像type还是interface？

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

还是

interface Props {
    isActive: Boolean,
    onClick: Function
}

此外，当我不使用TypeScript，而是使用经典的webpack+babel设置时，有什么区别吗？

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

0

2 答案

0 Comments

在React中，我们经常需要定义组件接收的props的类型。在TypeScript中，我们可以使用`type`或`interface`来定义props的类型。那么为什么会有这个问题的出现以及解决方法呢？

首先，让我们来了解一下`type`和`interface`之间的区别。`type`用于创建类型别名，可以用来定义对象、联合类型、交叉类型等。`interface`用于定义对象类型，可以包含属性、方法和索引签名。两者在功能上有细微的差别，具体可以参考这个问题：Typescript Interfaces vs Types。

根据上述讨论，我们可以得出结论，对于定义React组件的props来说，两者的差别并不重要。因为我们通常不会在其他地方扩展或增强props的接口，所以使用两者中的任何一个都可以。但是一般来说，对于定义对象类型，使用`interface`更加灵活一些。

然而，需要注意的是，上述讨论可能已经过时了，而且关于接口是否真的“更好”的问题在互联网上还有很多讨论。有人认为，如果为了定义复杂的联合类型而使用接口，那么这可能会违背使用TypeScript的初衷。所以，最终的选择还是个人偏好的问题。

总结一下，对于定义React组件的props，我们可以使用`type`或`interface`。两者之间的区别并不重要，但一般来说，使用`interface`更加灵活。然而，最终的选择还是个人偏好的问题。

希望通过上述内容能够帮助你理解并解决该问题。如果你需要更多关于这个问题的信息，可以参考以下链接：Typescript Interfaces vs Types和Intersection Types vs Interfaces in TypeScript。

0
0 Comments

在React中，使用`type`来定义props的类型是更好的选择，而不是使用`interface`。以下是这个问题出现的原因和解决方法：

原因：

- `type`可以通过类型别名实现一些常见的情况，而`interface`无法做到。

- `type`可以使用索引类型、映射类型、区分联合类型等特性，而`interface`不支持。

- `type`可以使用条件类型，虽然这个特性有点牵强，但是可以实现一些有趣的效果。

解决方法：

- 对于函数组件，可以直接使用`type`来定义props的类型。

- 对于类组件，可以使用`type`来定义props的类型，并通过`typeof`关键字和默认值来声明静态属性`defaultProps`的类型。

- 对于Hooks和函数组件，也适用于上述的解决方法。

以下是一个类组件的示例：

// 定义props的类型
type Props = ({ tag: "tag1"; foo: string } | { tag: "tag2"; foo: boolean }) &
  typeof defaultProps;
// 定义state的类型
type State = typeof initState;
// 默认props
const defaultProps = { a: "A" };
// 初始state
const initState = { c: "C" };
class App extends React.Component {
  static readonly defaultProps = defaultProps;
  state = initState;
  render() {
    // ...
  }
}
// 渲染组件
render(, document.getElementById("root"));

需要注意的是，如果希望在全局范围内进行类型声明合并，或者希望隐藏类型实现细节，那么使用`interface`可能更合适。但是在大多数情况下，使用`type`是更好的选择。

总结起来，根据TypeScript官方的性能建议和在React中使用的便利性，更推荐使用`type`来定义React的props类型。

0