react propTypes && Typescript

I recently read the official documentation and came across the section on using PropTypes for type checking. I found out that PropTypes are very similar to typeScript, so I looked up some sources and found that they can be converted to each other. Here are some examples:

The definition of a basic type

PropTypes writing:

// Import PropTypes from 'prop-types'; PropTypes = {message: proptypes. string, // Define the string type count: proptypes. number, // define the number type disabled: Proptypes.bool, boolEN set type level: proptypes.symbol, // Set symbol type}Copy the code

TypeScript:

interface Props {
  message: string;
  count: number;
  disabled: boolean;
  level: Symbol;
}
Copy the code

Some special types

PropTypes writing:

PropTypes = {error: proptypes.instanceof (error), // is an error instance children: proptypes.node, // define element status: Proptypes.oneof (['inactive', 'inProgress', 'success', 'failed']), // Define the specified value, Must be a value in 'inactive', 'inProgress', 'success', 'failed' : Proptypes.oneoftype ([proptypes.string, proptypes.number, proptypes.instanceof (Error),]), // must be one of these types}Copy the code

TypeScript:

interface Props {
  error: Error;
  children: React.ReactNode;
  status: 'inactive' | 'inProgress' | 'success' | 'failed';
  value: string | number | Error;
}
Copy the code

Arrays and Objects

PropTypes writing:

Example.propTypes = { style: PropTypes.shape({ color: PropTypes.string, fontSize: Proptypes.number,}), // specifies that this object consists of specific type values person: proptypes.exact ({name: proptypes.string, age: PropTypes.number, employed: PropTypes.bool, status: PropTypes.oneOf([ 'single', 'dating', 'engaged', 'married', 'divorced', 'widowed', 'other', ]), }), // // An object with warnings on extra properties names: Proptypes.arrayof (proptypes.string), array items: proptypes.arrayof (proptypes.shape ({id: PropTypes.number, title: PropTypes.string, active: PropTypes.boolean, }), ), }Copy the code

TypeScript:

interface Props {
  style: {
    color: string
    fontSize: number
  };
  person: {
    name: string
    age: number
    employed: boolean
    status:
      | 'single'
      | 'dating'
      | 'engaged'
      | 'married'
      | 'divorced'
      | 'widowed'
      | 'other'
  };
  names: string[];
  items: {
    id: number
    title: string
    active: boolean
  }[];
}
Copy the code

PropTypes function:

Example.propTypes = {
  onClick: PropTypes.func,
  onChange: PropTypes.func,
  onSelect: PropTypes.func,
}
Copy the code

TypeScript:

interface Props {
  onClick: () => void
  onChange: (val: string) => void
  onSelect: (id: string, val: number) => void
}
Copy the code

The way to write the required parameters

PropTypes writing:

Example.propTypes = {
  description: PropTypes.string.isRequired,
  isActive: PropTypes.bool,
}
Copy the code

TypeScript:

interface Props { description: string isActive? : boolean }Copy the code

conclusion

There’s not much value in using PropTypes in a TypeScript React application, but the example above shows how simple TypeScript writing is, right

Reference:

React Prop Types with TypeScript

PropTypes in a TypeScript React Application