Learn React with TypeScript 3

Extending interfaces

Interfaces can extend other interfaces so that they inherit all the properties and methods from its parent. We do this using the extends keyword after the new interface name and before the interface name that is being extended.

Let's look at the following example:

1. We create a new interface, taking Product as a base, and add information about discount codes:

interface Product {  name: string;  unitPrice: number;}interface DiscountCode {  code: string;  percentage: number;}interface ProductWithDiscountCodes extends Product {  discountCodes: DiscountCode[];}

2. We can create an instance of the interface in the usual way, filling in properties from the base interface as well as the child interface:

const table: ProductWithDiscountCodes ...