你如何在反应 typescript 中根据需要标记道具？

Question

我试图在反应 typescript 应用程序中将道具标记为必需道具，我该怎么做？ 使用 React with js，在类型上使用一个链isRequired关键字。 我怎么能用 ts 做到这一点？

// Here is my typescript code:

interface Props {
  /** Message to display */
  message: string;
}

const defaultProps: Props = {
  message: 'World',
};
/** My first reusable component */
function HelloWorld({ message }: Props) {
  return <div>Hello {message}</div>;
}

HelloWorld.defaultProps = defaultProps;

这是我试图重现的 jsx

import PropTypes from 'prop-types';

function HelloWorld({message}) {
  return <div>Hello {message}</div>
}

HelloWorld.propTypes = {
  message: PropTypes.string.required
};

HelloWorld.defaultProps = {
  message: 'World'
};

export default HelloWorld;

Answer 1

我认为您必须为HelloWorld function 明确指定 output 类型

function HelloWorld({ message }: Props): React.SFC<Props> {
  return <div>Hello {message}</div>;
}

或者

const HelloWorld: React.SFC<Props> = ({ message }) => {
  return <div>Hello {message}</div>;
}

Answer 2

我真的不明白你的意思？ 如果你定义一个没有可选字段的接口，默认都是必填的？ 你不需要额外的类型检查。