5 modele avansate TypeScript pentru ingineri seniori

TypeScript a devenit standardul industrial pentru dezvoltarea web la scara larga. In timp ce majoritatea dezvoltatorilor cunosc bazele interfetelor si tipurilor, adevarata putere sta in sistemul avansat de tipuri. Iata 5 modele care te vor diferentia ca inginer senior.

1. Generic Constraints

Genericele sunt puternice, dar uneori trebuie sa limitezi ce poate fi transmis. extends este prietenul tau aici.

interface HasId {
  id: string;
}

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

Asigurand ca T extinde HasId, garantam ca accesarea .id in interiorul functiei este sigura.

2. Conditional Types

Tipurile conditionale iti permit sa creezi mapari de tipuri neuniforme. Sintaxa este similara cu operatorul ternar din JavaScript.

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

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

Un caz practic de utilizare este filtrarea tipurilor dintr-o uniune:

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

3. Mapped Types

Tipurile mapate iti permit sa creezi tipuri noi pe baza celor existente prin transformarea proprietatilor.

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

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

type ReadOnlyUser = ReadOnly<User>;

Poti chiar adauga sau elimina modificatori:

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

4. Template Literal Types

Introduse in TypeScript 4.1, acestea iti permit sa manipulezi tipuri de stringuri direct.

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"

Acest lucru este incredibil de util pentru tipizarea stringurilor care urmeaza un model specific, cum ar fi clasele CSS sau numele evenimentelor.

5. Cuvantul cheie infer

Cuvantul cheie infer din cadrul tipurilor conditionale iti permite sa extragi tipuri din alte tipuri.

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

function check(): boolean {
  return true;
}

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

Aici, cerem TypeScript sa "deduca" tipul de return R al unei functii si sa il returneze.

Concluzie

Stapanirea acestor modele iti permite sa scrii biblioteci si utilitare robuste care ofera o experienta excelenta pentru dezvoltatori (DX). Scopul TypeScript avansat nu este complexitatea de dragul complexitatii, ci siguranta si expresivitatea.