i18n(fr): update guides/typescript.mdx (#11130)

See #11111

Co-authored-by: Thomas Bonnet <[email protected]>

src/content/docs/fr/guides/typescript.mdx

@@ -10,7 +10,7 @@ Astro est livré avec un support intégré pour [TypeScript](https://www.typescr
 
 En utilisant TypeScript, vous pouvez éviter les erreurs à l'exécution en définissant les formes des objets et des composants dans votre code. Par exemple, si vous utilisez TypeScript pour [définir le typage des props de votre composant](#les-props-de-composants), vous obtiendrez une erreur dans votre éditeur si vous définissez une option que votre composant n'accepte pas.
 
-Vous n'avez pas besoin d'écrire du code TypeScript dans vos projets Astro pour en bénéficier. Astro traite toujours le code de vos composants comme du TypeScript, et l'[Astro VSCode Extension](/fr/editor-setup/) en déduit autant qu'elle le peut pour fournir une autocomplétion, des astuces et des erreurs dans votre éditeur.
+Vous n'avez pas besoin d'écrire du code TypeScript dans vos projets Astro pour en bénéficier. Astro traite toujours le code de vos composants comme du TypeScript, et l'[extension Astro pour VS Code](/fr/editor-setup/) en déduira autant que possible pour fournir une autocomplétion, des astuces et des erreurs dans votre éditeur.
 
 Le serveur de développement Astro n'effectue aucune vérification de type, mais vous pouvez utiliser un [script séparé](#vérification-des-types) pour vérifier les erreurs de type à partir de la ligne de commande.
 
@@ -23,6 +23,7 @@ Les projets de démarrage Astro incluent un fichier `tsconfig.json` dans votre p
 Trois modèles extensibles `tsconfig.json` sont inclus dans Astro : `base`, `strict`, et `strictest`. Le modèle `base` permet le support des fonctionnalités modernes de JavaScript et est également utilisé comme base pour les autres modèles. Nous recommandons d'utiliser `strict` ou `strictest` si vous prévoyez d'écrire du TypeScript dans votre projet. Vous pouvez voir et comparer les trois configurations de modèles à [astro/tsconfigs/] (https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/).
 
 Pour hériter d'un des modèles, utilisez [le paramètre `extends`](https://www.typescriptlang.org/tsconfig#extends) :
+
 ```json title="tsconfig.json"
 {
   "extends": "astro/tsconfigs/base"
@@ -45,14 +46,18 @@ Vous pouvez créer le fichier `src/env.d.ts` comme convention pour ajouter des d
 // Déclarations de types personnalisés
 declare var myString: string;
 
-// Types d'Astro, non nécessaire si vous avez déjà un tsconfig.json
+// Types d'Astro, non nécessaire si vous avez déjà un fichier `tsconfig.json`
 /// <reference path="../.astro/types.d.ts" />
 ```
 
 ### Plugin Typescript pour les éditeurs
-Le [plugin d'Astro pour TypeScript](https://www.npmjs.com/package/@astrojs/ts-plugin) peut être installé séparément si vous n'utilisez pas l'[extension officielle d'Astro sur VSCode](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Ce plugin est automatiquement installé et configuré par l'extension VSCode, et vous n'avez pas besoin d'installer les deux.
+
+Le [plugin d'Astro pour TypeScript](https://www.npmjs.com/package/@astrojs/ts-plugin) peut être installé séparément si vous n'utilisez pas l'[extension officielle d'Astro sur VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Ce plugin est automatiquement installé et configuré par l'extension VS Code, et vous n'avez pas besoin d'installer les deux.
+
 Ce plugin ne fonctionne que dans l'éditeur. Lorsque vous exécutez `tsc` dans le terminal, les fichiers `.astro` sont entièrement ignorés. À la place, vous pouvez utiliser [la commande CLI `astro check`](/fr/reference/cli-reference/#astro-check) pour vérifier à la fois les fichiers `.astro` et `.ts`.
+
 Ce plugin supporte également l'importation de fichiers `.astro` à partir de fichiers `.ts` (ce qui peut être utile pour la réexportation).
+
 <PackageManagerTabs>
   <Fragment slot="npm">
   ```shell
@@ -70,15 +75,19 @@ Ce plugin supporte également l'importation de fichiers `.astro` à partir de fi
   ```
   </Fragment>
 </PackageManagerTabs>
+
 Ensuite, ajoutez ce qui suit à votre `tsconfig.json` :
+
 ```json title="tsconfig.json"
+{
   "compilerOptions": {
     "plugins": [
       {
         "name": "@astrojs/ts-plugin"
       },
     ],
   }
+}
 ```
 Pour vérifier que le plugin fonctionne, créez un fichier `.ts` et importez-y un composant Astro. Vous ne devriez pas avoir de messages d'avertissement dans votre éditeur.
 
@@ -100,18 +109,17 @@ De cette façon, vous évitez les cas où le bundler d'Astro peut essayer de bun
 Vous pouvez configurer TypeScript pour qu'il applique les importations de types dans votre fichier `tsconfig.json`. Mettez [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax) à `true`. TypeScript vérifiera vos importations et vous dira quand `import type` doit être utilisé. Ce paramètre est activé par défaut dans tous nos presets.
 
 ```json title="tsconfig.json" ins={3}
-  {
-    "compilerOptions": {
-      "verbatimModuleSyntax": true
-    }
+{
+  "compilerOptions": {
+    "verbatimModuleSyntax": true
   }
+}
 ```
 
 ## Alias d'importation
 
 Astro supporte les [alias d'importation](/fr/guides/imports/#alias) que vous définissez dans la propriété `paths` de votre configuration `tsconfig.json`. [Consultez notre guide](/fr/guides/imports/#alias) pour en savoir plus.
 
-
 ```astro title="src/pages/about/nate.astro" "@components" "@layouts"
 ---
 import HelloWorld from '@components/HelloWorld.astro';
@@ -154,13 +162,15 @@ interface Window {
 
 ## Les props de composants
 
-Astro prend en charge le typage des props de vos composants via TypeScript. Pour l'activer, ajoutez une interface TypeScript `Props` au frontmatter de votre composant. Une déclaration `export` peut être utilisée, mais n'est pas nécessaire. L'[extension Astro pour VSCode](/fr/editor-setup/) recherchera automatiquement l'interface `Props` et vous fournira le support TS approprié lorsque vous utiliserez ce composant dans un autre template.
+Astro prend en charge le typage des props de vos composants via TypeScript. Pour l'activer, ajoutez une interface TypeScript `Props` au frontmatter de votre composant. Une déclaration `export` peut être utilisée, mais n'est pas nécessaire. L'[extension Astro pour VS Code](/fr/editor-setup/) recherchera automatiquement l'interface `Props` et vous fournira le support TS approprié lorsque vous utiliserez ce composant dans un autre template.
+
 ```astro title="src/components/HelloProps.astro" ins={2-5}
 ---
 interface Props {
   name: string;
   greeting?: string;
 }
+
 const { greeting = 'Hello', name } = Astro.props;
 ---
 <h2>{greeting}, {name}!</h2>
@@ -169,7 +179,6 @@ const { greeting = 'Hello', name } = Astro.props;
 ### Modèles courants de typage des props
 
 - Si votre composant ne prend pas de propriété ou de contenu slotté, vous pouvez utiliser `type Props = Record<string, never>`.
-
 - Si votre composant doit recevoir des enfants dans son slot par défaut, vous pouvez l'imposer en utilisant `type Props = { children: any ; };`.
 
 ## Utilitaires de type
@@ -187,12 +196,15 @@ Par exemple, si vous construisiez un composant `<Link>`, vous pouvez procéder c
 ```astro title="src/components/Link.astro" ins="HTMLAttributes" ins="HTMLAttributes<'a'>"
 ---
 import type { HTMLAttributes } from 'astro/types';
+
 // utilisez un `type`
 type Props = HTMLAttributes<'a'>;
+
 // ou étendre avec une `interface`
 interface Props extends HTMLAttributes<'a'> {
   myProp?: boolean;
 }
+
 const { href, ...attrs } = Astro.props;
 ---
 <a href={href} {...attrs}>
@@ -202,9 +214,7 @@ const { href, ...attrs } = Astro.props;
 
 Il est également possible d'étendre les définitions JSX par défaut pour ajouter des attributs non standard en redéclarant l'espace de noms `astroHTML.JSX` dans un fichier `.d.ts`.
 
-```ts
-// src/custom-attributes.d.ts
-
+```ts title="src/custom-attributes.d.ts"
 declare namespace astroHTML.JSX {
   interface HTMLAttributes {
     'data-count'?: number;
@@ -239,7 +249,6 @@ L'exemple suivant montre l'utilisation de l'utilitaire `ComponentProps` de `astr
 ```astro title="src/pages/index.astro"
 ---
 import type { ComponentProps } from 'astro/types';
-
 import Button from "./Button.astro";
 
 type ButtonProps = ComponentProps<typeof Button>;
@@ -262,7 +271,6 @@ type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>;
 
 const { as: Tag, ...props } = Astro.props;
 ---
-
 <Tag {...props} />
 ```
 
@@ -293,6 +301,7 @@ type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
 const { id } = Astro.params as Params;
 //                   ^? { id: string; }
+
 const { title } = Astro.props;
 //                			^? { draft: boolean; title: string; }
 ---
@@ -302,11 +311,13 @@ const { title } = Astro.props;
 
 Pour voir les erreurs de type dans votre éditeur, assurez-vous que vous avez installé l'extension [Astro VS Code] (/fr/editor-setup/). Veuillez noter que les commandes `astro start` et `astro build` transpileront le code avec esbuild, mais n'effectueront aucune vérification de type. Pour éviter que votre code ne soit compilé s'il contient des erreurs TypeScript, changez votre script "build" dans `package.json` par ce qui suit :
 
-```json title="package.json" del={2} ins={3} ins="astro check &&"
+```json title="package.json" del={3} ins={4} ins="astro check &&"
+{
   "scripts": {
     "build": "astro build",
     "build": "astro check && astro build",
   },
+}
 ```
 
 :::note