[英]How to use prop-types as type definition in typescript?
Consider having the myTypes
constant holding prop-types (written somewhere in a file called my-component.js
), like below:考虑让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
as a type or helper to enable IDE auto-completion?您将如何使用myTypes
作为类型或帮助程序来启用 IDE 自动完成? What I tried (in another file written in type-script
instead) is below:我尝试过的(在另一个用type-script
编写的文件中)如下:
import MyComponent, { myTypes } from 'my-component';
const dark_theme_properties: myTypes = {
activeColor: 'green'
};
But of course, that gives the 'myTypes' refers to a value, but is being used as a type here. ts(2749)
但是当然,这使'myTypes' refers to a value, but is being used as a type here. ts(2749)
'myTypes' refers to a value, but is being used as a type here. ts(2749)
error, and using typeof myTypes
is not giving the right auto-complete in IDE either. 'myTypes' refers to a value, but is being used as a type here. ts(2749)
错误,并且使用typeof myTypes
也没有在 IDE 中提供正确的自动完成。
Note that the component is written in
JavaScript ES6
while the desired auto-complete is expected intype-script
(where aforementioned JS is imported).请注意,该组件是用JavaScript ES6
编写的,而所需的自动完成功能则是在type-script
(其中导入了上述 JS)中。
We can use InferProps
of @types/prop-types
package to extract raw-type from prop-type objects, like:我们可以使用@types/prop-types
包的InferProps
从 prop-type 对象中提取原始类型,例如:
import PropTypes, { InferProps } from 'prop-types'
const myTypes = {
activeColor: PropTypes.string,
// ...
}
type MyComponentProps = InferProps<typeof myTypes>
const dark_theme_properties: MyComponentProps = {
activeColor: 'green'
// ...
};
Since you're using Typescript you can create an interface as type-helper and autocompletion.由于您使用的是 Typescript,因此您可以创建一个接口作为类型助手和自动完成功能。
import React from 'react'
export interface myTypes {
activeColor: string;
color: string;
fontFamily: string;
fontSize: number;
fontWeight: string | number;
height: number;
icon: React.ReactNode;
iconOverlay: React.ReactNode;
marginBottom: number;
marginLeft: number;
marginRight: number;
marginTop: number;
maxHeight: number;
minHeight: number;
onBlur: () => void;
onChangeText: () => void;
paddingBottom: number;
paddingLeft: number;
paddingRight: number;
paddingTop: number;
}
import { myTypes } from "my-types-interface";
const dark_theme_properties: myTypes = {
activeColor: "green",
...
};
https://fettblog.eu/typescript-react/prop-types/ https://fettblog.eu/typescript-react/prop-types/
import PropTypes, { InferProps } from "prop-types";
import React from 'react';
function Article({
title,
price
}: InferProps<typeof Article.propTypes>) {
return (
<div className="article">
<h1>{title}</h1>
<span>Priced at (incl VAT): {price * 1.2}</span>
</div>
);
}
Article.propTypes = {
title: PropTypes.string.isRequired,
price: PropTypes.number.isRequired
};
export default Article;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.