javascript - How do you mark a prop as required in react typescript? - Stack Overflow

admin管理员组

文章数量:1425753

I am trying to mark a prop as a required prop in a react typescript application, how can I do that? Using react with js, one chains isRequired keyword on the type. How can i do this with ts?

// Here is my typescript code:

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

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

HelloWorld.defaultProps = defaultProps;

Here is the jsx I am trying to reproduce

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;

I am trying to mark a prop as a required prop in a react typescript application, how can I do that? Using react with js, one chains isRequired keyword on the type. How can i do this with ts?

// Here is my typescript code:

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

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

HelloWorld.defaultProps = defaultProps;

Here is the jsx I am trying to reproduce

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;

• javascript
• reactjs
• react-props

Share Improve this question Follow edited May 17, 2020 at 12:50 Gideon Bamuleseyo asked May 17, 2020 at 12:45 Gideon BamuleseyoGideon Bamuleseyo 15711 silver badge66 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I think you have to explicitly specify output type for HelloWorld function

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

or

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

I don't really get what you mean? If you define an interface without optional fields, all of them are required by default? Yout don't need extra type checking.

本文标签： javascriptHow do you mark a prop as required in react typescriptStack Overflow