在 TypeScript React 应用程序中使用 React.PropTypes 是否有意义，或者这只是“腰带和吊带”的情况？
由于组件类是用Props 类型参数声明的：
interface Props {
// ...
}
export class MyComponent extends React.Component<Props, any> { ... }
添加有什么真正的好处
static propTypes {
myProp: React.PropTypes.string
}
到类定义？
【问题讨论】：
标签： reactjs typescript react-proptypes
我最近在桥接本机代码时使用了 Proptypes 和 TS。该项目是在 React 端用 TypeScript 编写的，我将 React 端的本机组件抽象到它自己的文件中。如果 PropTypes 不在其自己的文件中，则无需担心，因为我已经通过 TypeScript 验证数据。
PropTypes 用于在事件回调中处理来自 Swift 的外部数据。我在这里尝试使用 TypeScript 而不是 PropTypes，但在引用 React 组件时遇到了问题。
最终，PropTypes 更容易实现并且似乎没有缺点，因为运行时的数据验证工作得非常好。
详情请参考这里的代码：
//CoreView.js
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {requireNativeComponent, UIManager, findNodeHandle} from 'react-native';
const COMPONENT_NAME = 'CoreView';
const RNCoreView = requireNativeComponent(COMPONENT_NAME);
export default class CoreView extends Component {
static propTypes = {
label: PropTypes.array,
onUpdate: PropTypes.func,
};
_onUpdate = event => {
if (this.props.onUpdate) {
this.props.onUpdate(event.nativeEvent);
}
};
render() {
const {label, style} = this.props;
return (
<RNCoreView
style={style}
label={label}
onUpdate={this._onUpdate}
ref={ref => (this.ref = ref)}
/>
);
}
update = (...args) => {
UIManager.dispatchViewManagerCommand(
findNodeHandle(this.ref),
UIManager[COMPONENT_NAME].Commands.obtainLabelData,
[...args],
);
};
}
在 Swift 方面：
//CoreViewManager.m
#import <Foundation/Foundation.h>
#import "React/RCTViewManager.h"
@interface RCT_EXTERN_MODULE(CoreViewManager, RCTViewManager)
//Allow React to send data as props
RCT_EXPORT_VIEW_PROPERTY(onUpdate, RCTDirectEventBlock)
RCT_EXTERN_METHOD(
obtainLabelData:(nonnull NSNumber *)node
imageLocation:(nonnull NSString *)imageLocation
)
@end
还有……
import Foundation
@available(iOS 11.0, *)
@objc(CoreViewManager)
class CoreViewManager: RCTViewManager {
override func view() -> UIView! {
return CoreView()
}
@objc func obtainLabelData(_ node: NSNumber, imageLocation: NSString!) {
DispatchQueue.main.async {
let component = self.bridge.uiManager.view(
forReactTag: node
) as! CoreView
component.update(value: imageLocation)
}
}
}
【讨论】：
正如@afonsoduarte 所说。
我想补充一点，你也可以像这样从 PropTypes 生成 Typescript 类型：
const propTypes = {
input: PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
}),
};
type MyComponentProps = PropTypes.InferProps<typeof propTypes>;
const MyComponent: FunctionComponent<MyComponentProps > = (props) => {
// ...
}
MyComponent.propTypes = propTypes;
【讨论】：
我猜想在一些无法在编译时推断道具类型的混乱情况下，查看在运行时使用propTypes 生成的任何警告会很有用。
其中一种情况是在处理来自类型定义不可用的外部源的数据时，例如您无法控制的外部 API。对于内部 API，如果它们尚不可用，我认为编写（或更好地生成）类型定义是值得的。
除此之外，我并没有真正看到任何好处（这就是我从未亲自使用过它的原因）。
【讨论】：
将组件属性同时维护为 TypeScript 类型和 React.PropTypes 通常没有太大价值。
以下是一些有用的情况：
因此，通常这是一个问题，即您可以在多大程度上信任您的编译时验证。
较新版本的 TypeScript 现在可以根据您的 React.PropTypes (PropTypes.InferProps) 推断类型，但生成的类型可能难以在代码中的其他地方使用或引用。
【讨论】：
Typescript 和 PropTypes 有不同的用途。 Typescript 在编译时验证类型，而 PropTypes 在运行时检查。
Typescript 在您编写代码时很有用：如果您将错误类型的参数传递给您的 React 组件，它会发出警告，为您提供函数调用的自动完成功能等。
当您测试组件如何与外部数据交互时，PropTypes 很有用，例如当您从 API 加载 JSON 时。 PropTypes 将通过打印有用的消息来帮助您调试（在 React 的开发模式下）您的组件失败的原因：
Warning: Failed prop type: Invalid prop `id` of type `number` supplied to `Table`, expected `string`
尽管看起来 Typescript 和 PropTypes 做同样的事情，但它们实际上并没有重叠。但是可以从 Typescript 自动生成 PropTypes，这样您就不必指定类型两次，例如：
【讨论】：