TypeScript Interfaces #

Interfaces in TypeScript are a powerful way to define contracts within your code and contracts with code outside of your project. They describe the shape of objects.

Basic Interface #

Define the structure of an object:

interface User {
 name: string;
 age: number;
}
function greet(user: User) {
 console.log(`Hello, ${user.name}!`);
}
let myUser: User = { name: "Alice", age: 30 };
greet(myUser);

Optional Properties #

Some properties may not be required:

interface Config {
 color?: string;
 width?: number;
}
function createSquare(config: Config) {
 let newSquare = { color: "white", area: 100 };
 if (config.color) {
 newSquare.color = config.color;
 }
 if (config.width) {
 newSquare.area = config.width * config.width;
 }
 return newSquare;
}
let mySquare = createSquare({ color: "black" });

Readonly Properties #

Properties that can only be modified when an object is first created:

interface Point {
 readonly x: number;
 readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
// p1.x = 5; // Error: Cannot assign to 'x' because it is a read-only property

Function Types #

Interfaces can describe function types:

interface SearchFunc {
 (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
 let result = src.search(sub);
 return result > -1;
};

Extending Interfaces #

Interfaces can extend one or more other interfaces:

interface Shape {
 color: string;
}
interface Square extends Shape {
 sideLength: number;
}
let square: Square = {
 color: "blue",
 sideLength: 10
};
// Multiple inheritance
interface PenStroke {
 penWidth: number;
}
interface ColoredSquare extends Shape, PenStroke {
 sideLength: number;
}
let coloredSquare: ColoredSquare = {
 color: "red",
 sideLength: 20,
 penWidth: 5
};

Class Interfaces #

Use interfaces to define contracts for classes:

interface ClockInterface {
 currentTime: Date;
 setTime(d: Date): void;
}
class Clock implements ClockInterface {
 currentTime: Date = new Date();
 
 setTime(d: Date) {
 this.currentTime = d;
 }
 
 constructor(h: number, m: number) { }
}