Typescript 5.0 und der neue const-Modifikator für Typparameter

In diesem Blog-Beitrag sehen wir uns an, wie Sie den neuen Vorschlag const in Typescript verwenden können, um wörtliche Typen für Objekte zu erhalten, jetzt aber innerhalb von Funktionen. Wir werden auch erörtern, wie Sie generische Typen verwenden können, um dynamischere und leistungsfähigere Typen für unsere Objekte zu erstellen, und wie die kommende Version 5.0 von Typescript dies noch einfacher machen wird.

Schauen wir uns zunächst an, wie wir as const verwenden können, um literale Typen für unsere Objekte zu erhalten. Wenn wir ein Objekt wie dieses erstellen:

Wenn Sie ein Objekt wie dieses erstellen:

const typesLiteral = {
  paul: 'McCartney',
  john: 'Lennon',
}

erhalten Sie diese Typen zurück:

const typesLiteral: {
  paul: string;
  john: string;
}

aber wenn Sie den echten Wert wollen, können Sie as const

const typesLiteral = {
  paul: 'McCartney',
  john: 'Lennon',
} as const

und dies gibt den folgenden Typ zurück:

const typesLiteral: {
    readonly paul: "McCartney";
    readonly john: "Lennon";
}

aber manchmal müssen Sie dieses Objekt an eine Funktion senden und die Rückgabe mit dem literalen Typ unter Verwendung von Generika erhalten:

const parseNames = <T>(names:<T>) => {
  return names
} 

const result = parseNames({
  paul: 'McCartney',
  john: 'Lennon',
})

aber dies gibt den Typ wie folgt zurück:

  paul: string;
  john: string;

es ist möglich, die ts-toolbelt Bibliothek zu verwenden, aber die Dokumentation ist verwirrend

const parseNames = <T>(names:F.Narrow<T>) => {
  return names
} 

Aber mit typescript 5.0 unter github.com/microsoft/TypeScript/pull/51865

auf diese Weise implementiert werden kann:

  // note that doesn't work with arrow functions
  function parseNames <const T>(names:T) {
    return names
  } 

und dies macht das zurückgegebene Objekt dynamischer, leistungsfähiger und flexibler für die Arbeit innerhalb der Funktionen, die die Autovervollständigung verbessern.

also die in diesem Beispiel:

function parseNames<const T extends {name: string, yearOfBirth: number}>(names: T[]) {
  const getName = (name: T['name'])=>  names.find(n => n.name && n.name === name)?.yearOfBirth
  return getName
}

const getData = parseNames([
  {
    name: 'Paul',
    yearOfBirth: 1942,
  },
  {
    name: 'Lennon',
    yearOfBirth: 1940,
  }
]);

const year = getData("Paul");

erhalten wir eine Funktion mit Autovervollständigung wie diese

  const getData: (name: "Paul" | "Lennon") => number

Dies ist eine enorme Verbesserung, um die Daten dynamischer und zuverlässiger zu machen.

Die endgültige Version von Typescript 5.0 wird für den 14. März erwartet.