javascript - 如何在 typescript 中使用 prop-types 作为类型定义?
问题描述
情况:
考虑让myTypes
prop-types 保持不变(写在一个名为 的文件中my-component.js
),如下所示:
import React from 'react'
import { View } from 'react-native'
import PropTypes from 'prop-types'
export const myTypes = {
activeColor: PropTypes.string,
color: PropTypes.string,
fontFamily: PropTypes.string,
fontSize: PropTypes.number,
fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
height: PropTypes.number,
icon: PropTypes.node,
iconOverlay: PropTypes.node,
marginBottom: PropTypes.number,
marginLeft: PropTypes.number,
marginRight: PropTypes.number,
marginTop: PropTypes.number,
maxHeight: PropTypes.number,
minHeight: PropTypes.number,
onBlur: PropTypes.func,
onChangeText: PropTypes.func,
paddingBottom: PropTypes.number,
paddingLeft: PropTypes.number,
paddingRight: PropTypes.number,
paddingTop: PropTypes.number
}
export default class MyComponent extends React.Component {
static propTypes = myTypes
render () {
return (
<View></View>
);
}
}
您将如何使用myTypes
类型或助手来启用 IDE 自动完成功能?
我尝试的(在另一个文件中写入type-script
)如下:
import MyComponent, { myTypes } from 'my-component';
const dark_theme_properties: myTypes = {
activeColor: 'green'
};
但当然,这会产生'myTypes' refers to a value, but is being used as a type here. ts(2749)
错误,并且typeof myTypes
在 IDE 中使用也不会提供正确的自动完成功能。
请注意,组件是在
JavaScript ES6
预期自动完成时写入的type-script
(其中导入了上述 JS)。
解决方案
我们可以使用包从 prop-type 对象中提取 raw-type,例如InferProps
:@types/prop-types
import PropTypes, { InferProps } from 'prop-types'
const myTypes = {
activeColor: PropTypes.string,
// ...
}
type MyComponentProps = InferProps<typeof myTypes>
const dark_theme_properties: MyComponentProps = {
activeColor: 'green'
// ...
};
推荐阅读
- javascript - Firebase Cloud Messaging - 在发送通知之前获取数据?
- opencv - 有没有任何方法可以在不从 Unity 资产商店购买 EmguCV 包的情况下将 EmguCV 与 Unity 一起用于 UWP(HoloLens)应用程序开发?
- javascript - 通过特殊字符从字符串中查找并提取序列
- angular - 本机脚本 DatePicker 显示错误的月份值
- angular - 在 html 中使用异步管道 => ¿BehaviorSubject 或 Observable?
- time - 标签到轴 - 将 int(秒)转换为小时
- entity-framework - 尝试实体框架代码优先;用法与 Database-first 有什么不同吗?
- python-3.x - 僵尸袭击村庄,蟒蛇
- javascript - R plotly:如何通过带有多个图的图例单击来观察跟踪是隐藏还是显示
- laravel - Connection.php#602 中的 Elasticsearch Missing404Exception