Merge pull request #114 from nfabredev/translate-fr-playground-3-7-syntax-and-messaging

Translate FR: playground/fr/3-7/Syntax and messaging

Author: github-actions[bot]

docs/playground/fr/3-7/Syntax and Messaging/Flattened Error Reporting.ts

@@ -0,0 +1,64 @@
+//// { compiler: {  }, order: 3 }
+
+// Les messages d'erreur TypeScript peuvent être un peu verbeux...
+// Avec la version 3.7, nous avons corrigé quelques cas qui
+// généraient des messages d'erreurs très longs.
+
+// Propriétés imbriquées
+
+let a = { b: { c: { d: { e: "string" } } } };
+let b = { b: { c: { d: { e: 12 } } } };
+
+a = b;
+
+// Auparavant, c'était deux lignes de code par propriété imbriquée, ce qui
+// a rapidement amené les gens à lire
+// uniquement la première et dernière ligne des messages d'erreur.
+
+// Maintenant elles sont en ligne. :tada:
+
+// Auparavant avec la version 3.6:
+//
+// Type '{ b: { c: { d: { e: number; }; }; }; }' is not assignable to type '{ b: { c: { d: { e: string; }; }; }; }'.
+//   Types of property 'b' are incompatible.
+//     Type '{ c: { d: { e: number; }; }; }' is not assignable to type '{ c: { d: { e: string; }; }; }'.
+//       Types of property 'c' are incompatible.
+//         Type '{ d: { e: number; }; }' is not assignable to type '{ d: { e: string; }; }'.
+//           Types of property 'd' are incompatible.
+//             Type '{ e: number; }' is not assignable to type '{ e: string; }'.
+//               Types of property 'e' are incompatible.
+//                 Type 'number' is not assignable to type 'string'
+
+// Ça peut aussi marcher avec des objets de types différents
+// et toujours donner un message d'erreur utile et concis.
+
+class ExampleClass {
+  state = "ok";
+}
+
+class OtherClass {
+  state = 12;
+}
+
+let x = { a: { b: { c: { d: { e: { f: ExampleClass } } } } } };
+let y = { a: { b: { c: { d: { e: { f: OtherClass } } } } } };
+x = y;
+
+// Auparavant avec la version 3.6:
+//
+// Type '{ a: { b: { c: { d: { e: { f: typeof OtherClass; }; }; }; }; }; }' is not assignable to type '{ a: { b: { c: { d: { e: { f: typeof ExampleClass; }; }; }; }; }; }'.
+//   Types of property 'a' are incompatible.
+//     Type '{ b: { c: { d: { e: { f: typeof OtherClass; }; }; }; }; }' is not assignable to type '{ b: { c: { d: { e: { f: typeof ExampleClass; }; }; }; }; }'.
+//       Types of property 'b' are incompatible.
+//         Type '{ c: { d: { e: { f: typeof OtherClass; }; }; }; }' is not assignable to type '{ c: { d: { e: { f: typeof ExampleClass; }; }; }; }'.
+//           Types of property 'c' are incompatible.
+//             Type '{ d: { e: { f: typeof OtherClass; }; }; }' is not assignable to type '{ d: { e: { f: typeof ExampleClass; }; }; }'.
+//               Types of property 'd' are incompatible.
+//                 Type '{ e: { f: typeof OtherClass; }; }' is not assignable to type '{ e: { f: typeof ExampleClass; }; }'.
+//                   Types of property 'e' are incompatible.
+//                     Type '{ f: typeof OtherClass; }' is not assignable to type '{ f: typeof ExampleClass; }'.
+//                       Types of property 'f' are incompatible.
+//                         Type 'typeof OtherClass' is not assignable to type 'typeof ExampleClass'.
+//                           Type 'OtherClass' is not assignable to type 'ExampleClass'.
+//                             Types of property 'state' are incompatible.
+//                               Type 'number' is not assignable to type 'string'

docs/playground/fr/3-7/Syntax and Messaging/Nullish Coalescing.ts

@@ -0,0 +1,45 @@
+//// { compiler: {  }, order: 2 }
+
+// L'opérateur de coalescence des nuls (nullish coalescing operator) est une
+// alternative à || qui retourne l'expression de droite si celle de gauche
+// est nulle ou non-définie.
+
+// En revanche, || vérifie si la valeur est de type fausse (falsy), ce qui veut dire
+// qu'une chaîne de caractères, ou le nombre 0, seraient considérés faux.
+
+// Un bon example est la gestion des objets partiellement
+// définis, pour lesquels il est possible d'avoir des valeurs par défaut
+// quand une clef est manquante.
+
+interface AppConfiguration {
+  // Défaut: "(no name)"; une chaîne de caractère vide est une valeur valide
+  name: string;
+
+  // Défaut: -1; 0 est une valeur valide
+  items: number;
+
+  // Défaut: true
+  active: boolean;
+}
+
+function updateApp(config: Partial<AppConfiguration>) {
+  // Avec l'opérateur de coalescence des nuls
+  config.name = config.name ?? "(no name)";
+  config.items = config.items ?? -1;
+  config.active = config.active ?? true;
+
+  // Sans l'opérateur de coalescence des nuls
+  config.name = typeof config.name === "string" ? config.name : "(no name)";
+  config.items = typeof config.items === "number" ? config.items : -1;
+  config.active = typeof config.active === "boolean" ? config.active : true;
+
+  // L'opérateur || pourrait retourner des valeurs incorrectes
+  config.name = config.name || "(no name)"; // empêche de passer "" comme valeur
+  config.items = config.items || -1; // empêche de passer 0 comme valeur
+  config.active = config.active || true; // incorrect, sera toujours true
+}
+
+// Plus de détails sur l'opérateur de coalescence des nuls dans la version 3.7
+// sur le blog:
+//
+// https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/

docs/playground/fr/3-7/Syntax and Messaging/Optional Chaining.ts

@@ -0,0 +1,69 @@
+//// { compiler: {  }, order: 1 }
+
+// Le chaînage optionnel a atteint l'étape 3 du TC39 pendant le development
+// de la version 3.7. Le chaînage optionnel permet d'écrire du code qui va
+// interrompre l'execution des expressions dès qu'il atteint une valeur
+// null ou undefined.
+
+// Accès aux propriétés d'un objet
+
+// Imaginons que nous ayons un album où l'artiste, et sa bio, puissent ne pas
+// être present dans les données. Par exemple, une compilation pourrait n'aurait pas un seul artiste.
+
+type AlbumAPIResponse = {
+  title: string;
+  artist?: {
+    name: string;
+    bio?: string;
+    previousAlbums?: string[];
+  };
+};
+
+declare const album: AlbumAPIResponse;
+
+// Avec le chaînage optionnel,
+// vous pouvez écrire le code suivant:
+
+const artistBio = album?.artist?.bio;
+
+// A la place de:
+
+const maybeArtistBio = album.artist && album.artist.bio;
+
+// Dans ce cas ?. agit différemment que le ET logique (&&) car ce dernier traite
+// les valeur fausses (e.g. une chaîne de caractères vide, 0, Nan et false) de
+// façon différente.
+
+// Le chaînage optionnel va seulement arrêter l'évaluation et retourner undefined
+// si la valeur est null ou undefined.
+
+// Accès à un élément optionnel
+
+// Acceder à une propriété se fait avec l'opérateur ., et le chaînage optionnel
+// marche aussi avec l'opérateur [] pour acceder à des éléments.
+
+const maybeArtistBioElement = album?.["artist"]?.["bio"];
+
+const maybeFirstPreviousAlbum = album?.artist?.previousAlbums?.[0];
+
+// Appel optionnel
+
+// Quand il s'agit d'appeler des fonctions qui peuvent être définies ou non définies,
+// le chaînage optionnel permet d'appeler la fonction uniquement si elle existe.
+// Cela peut remplacer le code où l'on écrirait traditionnellement quelque chose comme:
+// if (func) func()
+
+// Par example le chaînage optionnel pour appeler un callback après une requête
+// vers une API:
+
+const callUpdateMetadata = (metadata: any) => Promise.resolve(metadata); // Fake API call
+
+const updateAlbumMetadata = async (metadata: any, callback?: () => void) => {
+  await callUpdateMetadata(metadata);
+
+  callback?.();
+};
+
+// Plus de détails sur le chaînage optionnel dans la version 3.7 sur le blog:
+//
+// https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/