5 Avancerade TypeScript-mönster för Seniora Ingenjörer

TypeScript har blivit industristandarden för storskalig webbutveckling. Medan de flesta utvecklare känner till grunderna med interfaces och typer, ligger den verkliga kraften i det avancerade typsystemet. Här är 5 mönster som kommer att särskilja dig som senior ingenjör.

1. Generic Constraints

Generics är kraftfulla, men ibland behöver du begränsa vad som kan skickas in. extends är din vän här.

interface HasId {
  id: string;
}

function getById<T extends HasId>(list: T[], id: string): T | undefined {
  return list.find((item) => item.id === id);
}

Genom att säkerställa att T utökar HasId, garanterar vi att åtkomst till .id inuti funktionen är säker.

2. Conditional Types

Conditional types låter dig skapa icke-uniforma typmappningar. Syntaxen liknar den ternära operatorn i JavaScript.

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

Ett praktiskt användningsfall är att filtrera bort typer från en union:

type Diff<T, U> = T extends U ? never : T;
type NonNullable<T> = Diff<T, null | undefined>;

3. Mapped Types

Mapped types låter dig skapa nya typer baserade på befintliga genom att transformera egenskaper.

type ReadOnly<T> = {
  readonly [P in keyof T]: T[P];
};

interface User {
  name: string;
  age: number;
}

type ReadOnlyUser = ReadOnly<User>;

Du kan till och med lägga till eller ta bort modifierare:

type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

4. Template Literal Types

Introducerade i TypeScript 4.1, dessa låter dig manipulera strängtyper direkt.

type World = 'world';
type Greeting = `hello ${World}`; // "hello world"

type Color = 'red' | 'blue';
type Quantity = 'light' | 'dark';

type Palette = `${Quantity}-${Color}`;
// "light-red" | "light-blue" | "dark-red" | "dark-blue"

Detta är otroligt användbart för att typa strängar som följer ett specifikt mönster, som CSS-klasser eller händelsenamn.

5. Nyckelordet infer

Nyckelordet infer inom conditional types låter dig extrahera typer från andra typer.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

function check(): boolean {
  return true;
}

type CheckReturn = ReturnType<typeof check>; // boolean

Här ber vi TypeScript att "inferera" returtypen R av en funktion och returnera den.

Slutsats

Att behärska dessa mönster gör det möjligt att skriva bibliotek och verktyg som är robusta och ger en utmärkt utvecklarupplevelse (DX). Målet med avancerad TypeScript är inte komplexitet för komplexitetens skull, utan säkerhet och uttrycksfullhet.