How can I use advanced types in TypeScript with React?

How can I use advanced types in TypeScript with React?

You can use advanced types like generics, intersection types, and mapped types to enhance type safety in your React components.

Can you give me an example of using generics in a React component?

Sure! Here's a simple example:

function Button<T>({ label, onClick }: { label: string; onClick: (arg: T) => void }) {
  return <button onClick={() => onClick(label as unknown as T)}>{label}</button>;
}

This allows you to specify the type of the argument for the onClick function.

What about intersection types? How would that work?

Intersection types allow you to combine multiple types into one. For example:

type User = { name: string; age: number; };
type Admin = { permissions: string[]; };

type AdminUser = User & Admin;

const admin: AdminUser = { name: 'Alice', age: 30, permissions: ['read', 'write'] };

This creates a type that has properties from both User and Admin.

Thanks! Can you explain mapped types next?

Absolutely! Mapped types allow you to create new types by transforming properties of an existing type. For example:

type User = { name: string; age: number; };

type ReadonlyUser = { readonly [K in keyof User]: User[K]; };

This creates a Readonly version of the User type.