TypeScript uses `number` for all numeric values, including decimals. There's no separate float or decimal type.

The interface defines `price` as a `number`, but '1999' is a string. TypeScript will show an error because string is not assignable to number.

Use `?` after the property name to make it optional. `description?: string` means the property can be a string OR can be omitted entirely.

This is a union of literal types. Only the exact strings 'card', 'upi', or 'cod' are valid values - not other strings like 'paypal'.

The `find()` method returns `undefined` if no match is found, so the return type is `Product | undefined`. Always handle the possibility of not finding a result!

Use a generic constraint with `extends`. `<T extends { id: string }>` means T must have at least an `id` property of type string, but can have other properties too.

`Partial<T>` makes all properties optional. This is useful for update operations where you might only want to change some fields.

Use `useState<Product | null>(null)` to explicitly tell TypeScript the state can be either a Product or null. Just `useState(null)` would infer type as `null` only.

React has its own event types. For a button click, use `React.MouseEvent<HTMLButtonElement>`. The generic parameter specifies which HTML element the event comes from.

This is a discriminated union (also called tagged union). The `type` property is the discriminant - it tells TypeScript which variant of the union you have.