Ep.08: Interfaces in Typescript

cover

Interface is an another way to name an object type just like we did with type aliases but with a slight difference which we'll see later. Basically, an interface provides an interface for the object.

Interfaces are most commonly used in Typescript. The example usecase of it is:

typescript

interface User { readonly _Id: number; email: string; googleId?: string; // function templates startTrial: () => string; // OR endTrial(): string; redeem(couponCode: string, value: number): number; } const john: User = { _Id: 284, email: "john@xyz.au", startTrial: () => { return "Trial started."; }, endTrial: () => { return "Trial ended."; }, redeem: (code: "sam10", off: 10) => { return 10; } }

Interfaces Vs Type Aliases

1. Interfaces have inheritance
If we want to inherit the types of an available interface we can do that by using extends keyword. Similarly, we can extend a type aliases via intersections.

typescript

// Extending an interface via inheritance interface Animal { name: string; } interface Bear extends Animal { honey: boolean; } const bear = getBear(); bear.name; bear.honey; // Extending a type via intersections type Animal = { name: string; } type Bear = Animal & { honey: boolean; } const bear = getBear(); bear.name; bear.honey;

2. Reopening in interfaces
We can add new fields to an existing interface by reopening it but we can't do it in type aliases.

typescript

// Adding new fields in interface interface Window { title: string; } interface Window { ts: TypeScriptAPI; } // But can't add it to a type type Window = { title: string; } type Window = { ts: TypeScriptAPI; } // Error: Duplicate identifier 'Window'.

Beside these differences, almost all features of an interface are available in type.

Paras Chandra@2025 • Dev Bytes Blog

Built using Next JS and Markdown