Type Alias & Interface

Florent Veillon
publié le : 30 janvier 2023
modifié le : 01 février 2023

Type Alias

Dans la leçon précédente, nous avons vu comment déclarer un type d'objet anonyme :

// type d'objet anonyme
let point: { x: number, y: number } = { x: 10, y: 20 }

function showCoordinates(point: { x: number, y: number }) {
    console.log(`${point.x} ${point.y}`);
}

On pourrait vouloir réutiliser un type d'objet plusieurs fois, pour cela on peut utiliser un alias de type :

// alias de type
type Point = {
    x: number,
    y: number,
    description?: string
}

const p1: Point = { x: 10, y: 20 };
const p2: Point = { x: 10, y: 20, description: 'hello' };

function showCoordinates(point: Point ) {
    console.log(`${point.x} ${point.y}`);
}

function showAllCoordinates(points: Point[]) {
    // ...
}

Par convention on utilise une majuscule pour la première lettre du nom du type déclaré.

Un alias de type ne sert pas qu'à déclarer des objets, il faut penser au type au sens large :

// alias de type à partir d'une union de types 
// + de détails sur les unions dans les prochains chapitres
type Num = 1 | 2 | 3
type MyBool = true | false | "1" | "0"
type User = { firstName: string, lastName: string } | { id: number, username: string }
type MixedTypes = User | boolean | null | any

Interfaces

On peut aussi utiliser une interface pour représenter des objets :

interface User {
    firstName: string,
    lastName: string,
    age?: number
}

let u: User = { firstName: 'Satoshi', lastName: 'Nakamoto' };

function showFullName(u: User) {
    console.log(`${u.firstName} ${u.firstName}`);
}

Type Alias vs Interfaces

Voici quelques différences entre les alias de type et les interfaces, les exemples ont été repris de la doc officielle (Differences Between Type Aliases and Interfaces).

Un type ne peut pas être redéclaré :

(et on ne peut pas lui ajouter de nouveaux champs)

type User = {
    firstName: string,
    lastName: string,
}

type User = {
    firstName: string,
    lastName: string,
    age: number,
}
src/demo.ts:6:6 - error TS2300: Duplicate identifier 'User'.

On peut ajouter des champs à une interface :

interface User {
    firstName: string,
    lastName: string,
}

interface User {
    age: number,
}

let u: User = {
    firstName: 'John',
    lastName: 'Doe',
    age: 99
}

On peut extends une interface ou un type

Interface :

interface ObjectId {
    tokenId: number
}

interface Nft extends ObjectId {
    metadata: {
        name: string,
        num_sales: number,
        banner_image_url: string
    }
}

Type :

(via les intersections, concept que nous verrons un peu plus tard)

type ObjectId = {
    tokenId: number
}

type Nft = ObjectId & {
    metadata: {
        name: string,
        num_sales: number,
        banner_image_url: string
    }
}

Sommaire