你如何在反應 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

我真的不明白你的意思？ 如果你定義一個沒有可選字段的接口，默認都是必填的？ 你不需要額外的類型檢查。