What are some examples of type assertions in React using TypeScript?

What are some examples of type assertions in React using TypeScript?

Type assertions in TypeScript allow you to specify a type for a variable. In React, you can use them to ensure your props or state have the correct types. For example, if you have a prop that should be a string, you can assert its type like this: const myProp = props.myProp as string;.

Can you show me a more detailed example?

Sure! Let's say you have a component that receives a prop called user. You can assert its type like this:

interface User {
  name: string;
  age: number;
}

const MyComponent: React.FC<{ user: User }> = (props) => {
  const user = props.user as User;
  return <div>{user.name} is {user.age} years old.</div>;
};

What if the prop could be null?

In that case, you can use a union type. For example:

const MyComponent: React.FC<{ user: User | null }> = (props) => {
  const user = props.user as User | null;
  return <div>{user ? `${user.name} is ${user.age} years old.` : 'No user data available.'}</div>;
};