Découvrez toutes les fonctionnalités introduites par cette dernière version de TypeScript.

TypeScript, le langage de programmation populaire de Microsoft, continue d'impressionner avec sa dernière version, TypeScript 5.1. Dotée de nouvelles fonctionnalités et d'améliorations passionnantes, cette version promet d'apporter votre expérience de codage à de nouvelles hauteurs.

Retours de fonction simplifiés et types d'accesseurs

En JavaScript, lorsque vous créez une fonction et l'exécuter sans rencontrer d'instruction return, il renvoie automatiquement la valeur indéfini.

TypeScript 5.1 a introduit une nouvelle fonctionnalité qui permet aux fonctions retournant undefined d'omettre complètement l'instruction return. Cette amélioration améliore la lisibilité et la concision du code.

fonctionjournalMessage(message: chaîne): indéfini{
console.log (message);
// Aucune instruction de retour nécessaire ici
}

Cet exemple utilise la fonction journalMessage pour afficher un message sur la console. Cependant, la fonction ne renvoie explicitement aucune valeur.

instagram viewer

TypeScript 5.1 introduit une nouvelle fonctionnalité qui permet l'utilisation de types non liés pour les getters et les setters, tant que vous fournissez des annotations de type explicites.

Cette amélioration s'avère très avantageuse dans les situations où vous devez appliquer des types distincts pour accéder et modifier une propriété.

classe Utilisateur {
privé _nom: chaîne | nul = nul;

ensemble nom (nouveauNom: chaîne) {
ce._name = nouveauNom ;
}

obtenir nom(): chaîne {
retource._nom?? 'Inconnu';
}
}

Dans cet exemple, la classe User a un private _nom propriété qui peut être soit un chaîne ou nul. Le nom le passeur prend une chaîne nouveau nom et l'attribue à _nom. Le getter de nom renvoie la valeur de _nom si ce n'est pas nul, ou Inconnu Si c'est.

Cela vous permet d'imposer que la propriété name ne peut être définie qu'avec une chaîne, mais lors de l'obtention de la propriété name, il peut s'agir d'une chaîne ou Inconnu s'il n'a pas encore été défini.

Cette fonctionnalité permet des définitions de type plus flexibles et expressives, comme illustré dans l'exemple ci-dessous.

interface CSSStyleRule {
// Lit toujours comme une `CSSStyleDeclaration`
obtenir style(): déclaration de style CSS ;

// Ne peut écrire qu'une `chaîne` ici.
ensemble style (nouvelleValeur: chaîne);
}

Dans l'exemple ci-dessus, la propriété style a un getter qui renvoie une CSSStyleDeclaration et un setter qui accepte une chaîne. Ces types ne sont pas liés, mais TypeScript 5.1 autorise ce type de définition de type.

Améliorations JSX

TypeScript 5.1 introduit plusieurs améliorations pour JSX. Il permet désormais une vérification de type découplée entre les éléments JSX et les types de balises JSX, qui peuvent être utile pour les bibliothèques comme redux qui permettent aux composants de renvoyer plus que de simples éléments JSX.

importer * comme Réagir depuis"réagir";

asynchronefonctionComposant asynchrone() {
retour

Chargé</div>;
}

// Ceci est désormais autorisé :
laisser élément = ;

Dans cet exemple, le Composant asynchrone La fonction est une fonction asynchrone qui renvoie un élément JSX. TypeScript 5.1 vous permet d'utiliser ce type de fonction en tant que composant JSX, ce qui n'était pas possible dans les versions précédentes.

TypeScript 5.1 introduit également la prise en charge de la nouvelle transformation JSX introduite dans React 17. Cela vous permet d'utiliser JSX sans importer React.

// Avant
importer Réagir depuis"réagir";

fonctionComposant() {
retour

Bonjour, monde! </h1>;
}

// Après
fonctionComposant() {
retour

Bonjour, monde! </h1>;
}

Dans l'exemple ci-dessus, la fonction Component renvoie un élément JSX. Dans TypeScript 5.1 et React 17, vous n'avez plus besoin d'importer React pour utiliser JSX.

Améliorations des performances et changements significatifs dans TypeScript 5.1

TypeScript 5.1 introduit plusieurs optimisations pour améliorer les performances, notamment des optimisations de vitesse, de mémoire et de taille de package, éviter les instanciations de type inutiles, les vérifications de cas négatives pour les littéraux d'union et les appels réduits dans le scanner pour JSDoc analyse.

Voici un exemple d'évitement d'instanciation de type inutile dans les types d'objets connus pour ne pas contenir de références à des paramètres de type externes et de vérifications plus rapides des littéraux d'union.

taper Syndicat = 'un' | 'b' | 'c';

fonctionvérifier(valeur: Syndicat) {
// ...
}

Dans cet exemple, TypeScript 5.1 peut vérifier rapidement si une valeur fait partie du type Union sans avoir à vérifier chaque type de l'union.

Voici un autre exemple :

taper Point = {x: nombre, y: nombre };

fonctiontraduire(point: Point, dx: nombre, dy: nombre): Indiquer{
retour { x: point.x + dx, y: point.y + dy } ;
}

laisser p: Point = { x: 1, y: 2 };
p = traduire (p, 1, 1);

Dans cet exemple, le type Point est un type d'objet qui ne contient aucun paramètre de type. Lorsqu'il appelle la fonction de traduction, TypeScript 5.1 peut éviter une instanciation de type inutile, ce qui peut considérablement accélérer la vérification de type.

Adopter TypeScript 5.1

TypeScript 5.1 introduit une gamme de fonctionnalités et d'optimisations puissantes qui révolutionnent le développement JavaScript. Des retours de fonction simplifiés aux améliorations de JSX et à l'amélioration des performances, TypeScript 5.1 vous permet d'écrire un code plus propre et plus expressif tout en améliorant la vérification de type et les performances globales.

En adoptant TypeScript 5.1, vous pouvez ouvrir de nouvelles possibilités et élever vos projets JavaScript vers de nouveaux sommets d'efficacité et d'innovation. Laissez TypeScript 5.1 être votre passerelle vers une expérience de développement JavaScript plus avancée et rationalisée.