TypeScript 5 Nouvelles fonctionnalités — Utilisation pratique de l'opérateur satisfait et des décorateurs

// ❌ le problème de l'approche traditionnelle
type Color = "red" | "green" | "blue";
type ColorMap = Record<string, string | number[]>;

// en tant que:
palette const = {
rouge: [255, 0, 0],
vert: "#00ff00",
bleu: [0, 0, 255]
} comme ColorMap;

Nombre de chaînes de caractères
// .map()
palette.red.map(x => x); // Chaîne de caractères: nombre[]

// ✅ satisfies opérateur
type Color = "red" | "green" | "blue";
type ColorMap = Record<Color, string | number[]>;

palette const = {
rouge: [255, 0, 0],
vert: "#00ff00",
bleu: [0, 0, 255]
} satisfait ColorMap;

, / / / /
palette.red.map(x => x); // Numéro de code[]
palette.green.toUpperCase(); // Chaîne de caractères
const wrong = { pourpre: "pourple" } satisfait ColorMap; // Couleur

interface ApiConfig {
  baseUrl: string;
  timeout: number;
  retries: number;
}

// satisfait
const config = {
baseUrl: "https://api.example.com",
durée: 5000,
commandes: 3,
} satisfait ApiConfig;

// config.timeout (numéro)
type TimeoutType = type de config.timeout; // 5000

type Route = {
  path: string;
  component: React.ComponentType;
  auth?: boolean;
};

routes de const = [
{ chemin: "/", composant: Home },
{ chemin: "/tableau de bord", composant: tableau de bord, auth: true },
] satisfait à la procédure[];

// routes[0].path="/" (=")

type TranslationKey = "hello" | "goodbye" | "welcome";
type Translations = Record<TranslationKey, string>;

const ko = {
Bonjour :
Au revoir: "
Bienvenue : "
} satisfait les traductions;

en = {
Bonjour.
Au revoir.
// Bienvenue !
} satisfait les traductions;

// ✅ TypeScript 5 décorateurs standard
function sealed(target: typeof SealedClass) {
  Object.seal(target);
  Object.seal(target.prototype);
}

@scellé
Classe scellée {
salut() { retour "Bonjour!"; }
}

function log(target: any, context: ClassMethodDecoratorContext) {
  const methodName = String(context.name);

fonction de retour (cela: any, ...args: any[]) {
consol.log(`[${methodName}]
const result = cible.call(ceci, ...args);
console.log(`[${methodName}]:`, résultat);
le résultat du retour;
};
}

Calculatrice de classe {
@log
add(a: nombre, b: nombre): nombre {
retourner a + b;
}
}

const calc = nouveau calculateur();
l'alinéa 2 du paragraphe 2 du présent article;
// [ajouter] [1, 2]
[Ajouter]

function readonly(target: any, context: ClassAccessorDecoratorContext) {
  return {
    set() {
      throw new Error(`${String(context.name)} est en lecture seule.`);
    }
  };
}

classe Config {
@readonly
la version d'accessor = "1.0.0";
}

const cfg = nouveau Config();
console.log(cfg.version); // "1.0.0"
cfg.version = "2.0.0"; //

// utilisation de l'API de métadonnées
function validate(target: any, context: ClassFieldDecoratorContext) {
  context.metadata[context.name] = { required: true };
}

classe UserForm {
@validate
nom!: chaîne;

@validate
e-mail!: chaîne;
}

- Oui.
les métadonnées de const = UserForm[Symbol.metadata];
console.log(metadata); // { nom: { requis: true }, email: { requis: true }

// ❌ approche traditionnelle
function identity<T>(value: T): T {
  return value;
}

résultat const = identité(["a", "b", "c"]);
// résultat: string[]

// Const
identité de la fonctionConst<const T>(valeur: T): T {
valeur de retour;
}

Const result2 = identityConst(["a", "b", "c"]);
// result2: en lecture seule ["a", "b", "c"]

function createRoute<const Path extends string>(path: Path) {
  return { path, url: () => `https://app.example.com${path}` };
}

const homeRoute = createRoute("/");
// homeRoute.path: "/" (-)

Const dashRoute = createRoute("/dashboard");
// dashRoute.path: "/tableau de bord"

// tsconfig.json
{
  "extends": [
    "@tsconfig/strictest/tsconfig.json",
    "@tsconfig/node18/tsconfig.json",
    "./custom.tsconfig.json"
  ],
  "compilerOptions": {
    "outDir": "dist"
  }
}

// Symbol.disposeobjet avec des propriétés
cla