01-props

Step 1 - Props

React function components are functions that accept a single object parameter (aka "props") and return JSX. As a result, they can be typed in TypeScript just like any other function in TypeScript. In fact the majority of the typing for React components are in the props.

🏅 The goal of this step is to practice type-checking props in TypeScript.

⭐ Concepts

• TypeScript environment
• Function component structure
• Declaring props
• Defining default props

💡 Exercises

In App.tsx, convert the propTypes and defaultProps into TypeScript interface definitions using this React PropTypes with TypeScript guide.

(If you run into trouble with the exercises, you can take a peek at the final source code.)

🧠 Elaboration & Feedback

After you're done with the exercise and before jumping to the next step, please fill out the elaboration & feedback form. It will help seal in what you've learned.

🤓 Bonus!

1. DRY up the types

The prop types for ResultsItem & Results have lots of overlap. Share TypeScript prop definitions between them. You can also import the Rating type from data.ts.

2. Add more complex props

For fun, pretend the following prop types also existed on App:

App.propTypes = {
  numItems: PropTypes.number,

  // 👇🏾 pretend additional prop types
  error: PropTypes.instanceOf(Error),
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Error)
  ]),
  children: PropTypes.node.isRequired
}
App.defaultProps = {
  numItems: 10,

  // 👇🏾 pretend additional prop types
  error: undefined,
  value: undefined,
}

Convert them into TypeScript prop definitions for App. Be sure to pay attention to which props are required/optional.

📕 Resources

• React Prop Types with TypeScript
• TypeScript Everyday Types
• TypeScript Functions
• TypeScript Object Types
• React-specific TypeScript types
• Definitely Typed
• react/prop-types ESLint rule

👉🏾 Next Step

Go to Step 2 - Hooks.