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

* i18n(fr): update `guides/typescript.mdx`

See #9240, #10148 and #10197

* translate code snippet comments

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

* fix comment in code snippet

---------

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

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

@@ -6,7 +6,7 @@ i18nReady: true
 import Since from '~/components/Since.astro'
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
-Astro est livré avec un support intégré pour [TypeScript](https://www.typescriptlang.org/). Vous pouvez importer des fichiers `.ts` et `.tsx` dans votre projet Astro, écrire du code TypeScript directement dans votre [composant Astro](/fr/basics/astro-components/#le-script-du-composant), et même utiliser un fichier [`astro.config.ts`](/fr/guides/configuring-astro/#le-fichier-de-configuration-dastro) si vous le souhaitez.
+Astro est livré avec un support intégré pour [TypeScript](https://www.typescriptlang.org/). Vous pouvez importer des fichiers `.ts` et `.tsx` dans votre projet Astro, écrire du code TypeScript directement dans votre [composant Astro](/fr/basics/astro-components/#le-script-du-composant), et même utiliser un fichier [`astro.config.ts`](/fr/guides/configuring-astro/#le-fichier-de-configuration-dastro) pour la configuration d'Astro si vous le souhaitez.
 
 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.
 
@@ -15,33 +15,44 @@ Vous n'avez pas besoin d'écrire du code TypeScript dans vos projets Astro pour
 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.
 
 ## Configuration
+
 Les projets de démarrage Astro incluent un fichier `tsconfig.json` dans votre projet. Même si vous n'écrivez pas de code TypeScript, ce fichier est important pour que des outils comme Astro et VS Code sachent comment comprendre votre projet. Certaines fonctionnalités (comme les importations de paquets npm) ne sont pas entièrement supportées par l'éditeur sans un fichier `tsconfig.json`. Si vous installez Astro manuellement, assurez-vous de créer ce fichier vous-même.
 
-### Modèles TypeScript
+### Modèles TSConfig
 
 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"
 }
 ```
 
-De plus, nos modèles incluent un fichier `env.d.ts` dans le dossier `src` pour fournir [Vite's client types](https://vite.dev/guide/features.html#client-types) à votre projet : 
+En complément, nous vous recommandons de définir `include` et `exclude` comme suit pour bénéficier des types Astro et éviter de vérifier les fichiers créés :
+
+```json title="tsconfig.json" ins={3-4}
+{
+  "extends": "astro/tsconfigs/base",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}
+```
+
+Vous pouvez créer le fichier `src/env.d.ts` comme convention pour ajouter des déclarations de types personnalisés, ou pour bénéficier des types Astro si vous n'avez pas de `tsconfig.json` :
+
+```ts title="src/env.d.ts"
+// Déclarations de types personnalisés
+declare var myString: string;
 
-```typescript title="env.d.ts"
+// Types d'Astro, non nécessaire si vous avez déjà un 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.
-
 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
@@ -59,9 +70,7 @@ 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": [
@@ -71,10 +80,8 @@ Ensuite, ajoutez ce qui suit à votre `tsconfig.json` :
     ],
   }
 ```
-
 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.
 
-
 ### Frameworks UI
 
 Si votre projet utilise un [framework UI](/fr/guides/framework-components/), des paramètres supplémentaires dépendant du framework peuvent être nécessaires. Veuillez consulter la documentation TypeScript de votre framework pour plus d'informations. ([Vue](https://vuejs.org/guide/typescript/overview.html#using-vue-with-typescript), [React](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup), [Preact](https://preactjs.com/guide/v10/typescript), [Solid](https://www.solidjs.com/guides/typescript))
@@ -128,7 +135,7 @@ import Layout from '@layouts/Layout.astro';
 
 Vous pouvez vouloir ajouter une propriété à l'objet global. Vous pouvez le faire en ajoutant des déclarations de haut niveau en utilisant le mot-clé `declare` dans votre fichier `env.d.ts` :
 
-```ts title="env.d.ts"
+```ts title="src/env.d.ts"
 declare var myString: string;
 declare function myFunction(): boolean;
 ```
@@ -139,7 +146,7 @@ Notez que `window` n'est disponible que dans le code côté client. `globalThis`
 
 Si vous voulez seulement définir le type d'une propriété de l'objet `window`, fournissez une interface `Window` à la place :
 
-```ts title="env.d.ts"
+```ts title="src/env.d.ts"
 interface Window {
 	myFunction(): boolean;
 }
@@ -161,9 +168,9 @@ 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 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 ; };`.
+- 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
 
@@ -263,19 +270,19 @@ const { as: Tag, ...props } = Astro.props;
 
 <p><Since v="2.1.0" /></p>
 
-Astro inclut des aides pour travailler avec les types retournés par votre fonction [`getStaticPaths()`](/fr/reference/api-reference/#getstaticpaths) pour les routes dynamiques.
+Astro inclut des aides pour travailler avec les types retournés par votre fonction [`getStaticPaths()`](/fr/reference/routing-reference/#getstaticpaths) pour les routes dynamiques.
 
 Vous pouvez obtenir le type de [`Astro.params`](/fr/reference/api-reference/#astroparams) avec `InferGetStaticParamsType` et le type de [`Astro.props`](/fr/reference/api-reference/#astroprops) avec `InferGetStaticPropsType` :
 
-```astro title="src/pages/posts/[...slug].astro" {2,14-15}
+```astro title="src/pages/posts/[...id].astro" {2,14-15}
 ---
 import type { InferGetStaticParamsType, InferGetStaticPropsType, GetStaticPaths } from 'astro';
 
 export const getStaticPaths = (async () => {
   const posts = await getCollection('blog');
   return posts.map((post) => {
     return {
-      params: { slug: post.slug },
+      params: { id: post.id },
       props: { draft: post.data.draft, title: post.data.title },
     };
   });
@@ -284,8 +291,8 @@ export const getStaticPaths = (async () => {
 type Params = InferGetStaticParamsType<typeof getStaticPaths>;
 type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
-const { slug } = Astro.params as Params;
-//               			 ^? { slug: string; }
+const { id } = Astro.params as Params;
+//                   ^? { id: string; }
 const { title } = Astro.props;
 //                			^? { draft: boolean; title: string; }
 ---
@@ -308,7 +315,7 @@ Pour voir les erreurs de type dans votre éditeur, assurez-vous que vous avez in
 
 import ReadMore from '~/components/ReadMore.astro'
 
-<ReadMore>En savoir plus sur [Importations de fichiers`.ts`](/fr/guides/imports/#typescript) dans Astro.</ReadMore>
+<ReadMore>En savoir plus sur les [importations de fichiers`.ts`](/fr/guides/imports/#typescript) dans Astro.</ReadMore>
 
 <ReadMore>En savoir plus sur la [configuration de TypeScript](https://www.typescriptlang.org/tsconfig/).</ReadMore>
 
@@ -320,7 +327,7 @@ Un problème peut survenir lors de l'utilisation de plusieurs frameworks JSX dan
 
 **Solution** : Définissez le paramètre [`jsxImportSource`](https://www.typescriptlang.org/tsconfig#jsxImportSource) à `react` (par défaut), `preact` ou `solid-js` en fonction du framework que vous utilisez le plus. Ensuite, utilisez un [pragma comment](https://www.typescriptlang.org/docs/handbook/jsx.html#configuring-jsx) à l'intérieur de tout fichier conflictuel provenant d'un framework différent.
 
-Pour le réglage par défaut de `jsxImportSource : react`, vous devez utiliser :
+Pour le réglage par défaut de `jsxImportSource: react`, vous devez utiliser :
 
 ```jsx
 // For Preact