L'équipe TypeScript indique que la version 2.1 est désormais disponible et apporte le support de async/await pour ES5/ES3 ainsi que les extensions d'objets
Conformément à son calendrier, Microsoft a rendu disponible la version 2.1 de TypeScript. Voici quelques nouveautés.
Fonctions asynchrones :
Cette version de TypeScript apporte les fonctions asynchrones de bas niveau. Les développeurs seront désormais capable d’utiliser async/await et cibler ES3/ES5 sans avoir à utiliser des outils supplémentaires.
Les restes et les extensions d’objets :
Ces objets font partie d’une nouvelle proposition pour ES2017 (ECMA Script 2017) visant à faciliter la copie, la fusion et la séparation partielles des objets. La fonctionnalité est déjà appelée lors de l'utilisation de bibliothèques comme Redux.
Avec les extensions d'objet, la création d'une copie superficielle d'un objet a grandement été simplifiée :
| Code TypeScript : | Sélectionner tout |
1 2 3 4 5 6 7 | let copy = { ...original }; De même, il est possible de fusionner différents objets. Dans cet exemple, nous avons des propriétés de foo, bar et baz. let merged = { ...foo, ...bar, ...baz }; |
Il est même possible d’ajouter de nouvelles propriétés durant le processus :
| Code TypeScript : | Sélectionner tout |
1 2 3 4 5 6 | let nowYoureHavingTooMuchFun = { hello: 100, ...foo, world: 200, ...bar, } |
Microsoft recommande de garder à l’esprit que lorsque vous utilisez les opérateurs d’extensions d’objets, toutes propriétés dans les extensions ultérieures l’emportent sur les propriétés créées précédemment. Ainsi, dans le dernier exemple, si bar avait une propriété nommée world, alors bar.world aurait été utilisé à la place de ce qui a été écrit.
Les restes d'objet sont complémentaires aux extensions d’objets dans la mesure où ils peuvent extraire toutes les propriétés supplémentaires qui ne sont pas obtenues en déstructurant un élément :
| Code TypeScript : | Sélectionner tout |
let { a, b, c, ...defghijklmnopqrstuvwxyz } = alphabet;
Les types keyof et Lookup
Nombreuses sont les bibliothèques qui tirent profit du fait que les objets sont (pour la plupart) une collection de valeurs. Étant donné que TypeScript connaît les propriétés de chaque valeur, il existe un ensemble de chaînes de caractères connues (ou clés) que vous pouvez utiliser pour les recherches. C’est ici qu’intervient l’opérateur keyof :
| Code TypeScript : | Sélectionner tout |
1 2 3 4 5 6 7 | interface Person { name: string; age: number; location: string; } let propName: keyof Person; |
Cet exemple est équivalent à celui-ci
| Code TypeScript : | Sélectionner tout |
let propName: "name" | "age" | "location";
Cet opérateur keyof est en réalité une requête de type d’index ; comme une requête pour des clés sur des types d'objet, de la même façon que typeof pourrait être utilisé comme une requête pour pour des types sur des valeurs.
Les types d’accès indexés, également appelés types lookup, ressemblent dans leur syntaxe à un accès à un élément, mais sont écrits comme des types :
| Code TypeScript : | Sélectionner tout |
1 2 3 4 5 6 7 | interface Person { name: string; age: number; location: string; } let a: Person["age"]; |
Cela revient à dire que "a" obtient le type de la propriété age dans Person. En d'autres termes:
| Code TypeScript : | Sélectionner tout |
let a: number;
Lors de l'indexation avec une union de types littoraux, l'opérateur recherche chaque propriété et regroupe les types respectifs.
| Code TypeScript : | Sélectionner tout |
1 2 | // Equivalent to the type 'string | number' let nameOrAge: Person["name" | "age"]; |
Ce modèle peut être utilisé avec d'autres parties du système de type pour obtenir des recherches de type sécurisé, servant les utilisateurs de bibliothèques comme Ember.
| Code TypeScript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 | function get<T, K extends keyof T>(obj: T, propertyName: K): T[K] { return obj[propertyName]; } let x = { foo: 10, bar: "hello!" }; let foo = get(x, "foo"); // has type 'number' let bar = get(x, "bar"); // has type 'string' let oops = get(x, "wargarbl"); // error! |
Les types mappés
Disons que nous avons un type Person
| Code TypeScript : | Sélectionner tout |
1 2 3 4 5 | interface Person { name: string; age: number; location: string; } |
La plupart du temps, nous voulons prendre un type existant et rendre chacune de ses propriétés entièrement facultative. Avec Person, nous pourrions écrire ce qui suit:
| Code TypeScript : | Sélectionner tout |
1 2 3 4 5 | interface PartialPerson { name?: string; age?: number; location?: string; } |
Remarquez que nous devions définir un type complètement nouveau.
De même, nous pourrions vouloir créer un type apparenté à Person où toutes les propriétés sont booléennes
| Code TypeScript : | Sélectionner tout |
1 2 3 4 5 | interface BooleanifiedPerson { name: boolean; age: boolean; location: boolean; } |
Ou avec des propriétés en lecture seule
| Code TypeScript : | Sélectionner tout |
1 2 3 4 5 | interface FrozenPerson { readonly name: string; readonly age: number; readonly location: string; } |
Remarquez toute cette répétition alors que, dans l’idéal, une grande partie de la même information dans chaque variante de Person aurait pu être partagée.
Voici comment nous pouvons écrire BooleanifiedPerson avec un type mappé.
| Code TypeScript : | Sélectionner tout |
1 2 3 | type BooleanifiedPerson = { [P in "name" | "age" | "location"]: boolean }; |
Les types mappés sont obtenus suite à une union de types littoraux et en calculant un ensemble de propriétés pour un nouveau type d'objet. Ils sont comme des listes de compréhension en Python, mais au lieu de produire de nouveaux éléments dans une liste, ils produisent de nouvelles propriétés dans un type.
Il est possible d’utiliser l’opérateur keyof pour réduire le code
| Code TypeScript : | Sélectionner tout |
1 2 3 | type BooleanifiedPerson = { [P in keyof Person]: boolean }; |
et le généraliser par la suite
| Code TypeScript : | Sélectionner tout |
1 2 3 4 5 | type Booleanify<T> = { [P in keyof T]: boolean }; type BooleanifiedPerson = Booleanify<Person>; |
Avec les types mappés, nous n'avons plus besoin de créer de nouvelles variantes partielles ou en lecture seule des types existants.
| Code TypeScript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 | // Keep types the same, but make every property optional. type Partial<T> = { [P in keyof T]?: T[P]; }; // Keep types the same, but make each property to be read-only. type Readonly<T> = { readonly [P in keyof T]: T[P]; }; |
Source : blog MSDN
Vous avez lu gratuitement 1 042 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.