如何在 typescript 中使用 prop-types 作为类型定义？

Question

情况：

考虑让 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）。

Answer 1

由于您使用的是 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",
  ...
};

Answer 2

我们可以使用 @types/prop-types 包中的 InferProps 从 prop-type 对象中提取 raw-type，例如：

import PropTypes, { InferProps } from 'prop-types'

const myTypes = {
  activeColor: PropTypes.string,
  // ...
}

type MyComponentProps = InferProps<typeof myTypes>

const dark_theme_properties: MyComponentProps = {
  activeColor: 'green'
  // ...
};

Answer 3

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;