TypescriptでPropTypesを使用しようとしていますが、エラーが発生します。
タイプスクリプトなしで私は使用することができました：
class TodoFilterItem extends Component {
constructor (props) {
super(props);
そして一番下に
TodoFilterItem.propTypes = {
name: PropTypes.string,
filter: PropTypes.string,
filterTodos: PropTypes.any
}
そしてそれはPropTypesを持っているだけで（つまりtypescriptなしで）機能しました。
しかし、Typescriptを追加すると、
class TodoFilterItem extends Component<ITodoFilterItem> {
constructor (props:ITodoFilterItem) {
super(props);
...
私はこのようなインターフェースとして小道具を持っています：
interface ITodoFilterItem {
filter: string,
name: string,
filterTodos: any
}
そして私は同じpropTypesを使用します：
TodoFilterItem.propTypes = {
filter: PropTypes.string,
name: PropTypes.string,
filterTodos: PropTypes.any
}
エラーが発生します
Property 'propTypes' does not exist on type 'typeof import("/my_adrs/node_modules/@types/prop-types/index")'.
これに対処し、ReactでTypescriptでPropTypesを使用できるようにする方法は？
PropTypesはTypescriptとは別のものです。再利用propTypesするには、インターフェースまたはタイプに変換する必要があります。
この
TodoFilterItem.propTypes = {
filter: PropTypes.string,
name: PropTypes.string,
filterTodos: PropTypes.any
}
になります
interface ITodoFilterItem {
filter: string;
name: string;
filterTodos: any;
}
インターフェースはシンプルであることを使用して、交換してくださいTodoFilterItemPropsとITodoFilterItem。
慣例では、コンポーネントの小道具に名前を付けますIProps。これをまとめると、コンポーネントは次のようになります。
interface IProps {
name: string;
filter: string;
filterTodos: any;
}
class TodoFilterItem extends Component<IProps> {
constructor (props:IProps) {
super(props);
...
注意事項 any
に入力しないようにしてくださいany。anyタイプは同じで、タイプされていません。のfilterTodos配列だと思いtodosます。その場合は、todoそれを呼び出すためのタイプを作成できます
type Todo = { ...properties of a todo }
次に、次のようなfilterTodos配列にTodoなるように入力します。
type Todo = {
name: string,
status: 'not started' | 'in progress' | 'done'
}
interface IProps {
filter: string;
name: string;
filterTodos: Todo[];
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加