i18n(fr): update guides/typescript and linking in other pages

src/content/docs/fr/guides/environment-variables.mdx

@@ -35,7 +35,7 @@ Par défaut, Astro fournit une définition de type pour `import.meta.env` dans `
 
 Bien que vous puissiez définir davantage de variables d'environnement personnalisées dans les fichiers `.env.[mode]`, vous souhaiterez peut-être obtenir l'IntelliSense TypeScript pour les variables d'environnement définies par l'utilisateur qui sont préfixées par `PUBLIC_`.
 
-Pour y parvenir, vous pouvez créer un `env.d.ts` dans `src/` et configurer `ImportMetaEnv` comme ceci :
+Pour y parvenir, vous pouvez créer un fichier `env.d.ts` dans `src/` pour [étendre les types globaux](/fr/guides/typescript/#extension-des-types-globaux) et configurer `ImportMetaEnv` comme ceci :
 
 ```ts title="src/env.d.ts"
 interface ImportMetaEnv {

src/content/docs/fr/guides/integrations-guide/alpinejs.mdx

@@ -8,7 +8,8 @@ githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/int
 category: renderer
 i18nReady: true
 ---
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import Since from '~/components/Since.astro';
 
 Cette **[intégration Astro][astro-integration]** ajoute [Alpine.js](https://alpinejs.dev/) à votre projet afin que vous puissiez utiliser Alpine.js n'importe où sur votre page.
 
@@ -96,6 +97,12 @@ export default defineConfig({
 
 ### `entrypoint`
 
+<p>
+
+**Type :** `string`<br />
+<Since v="0.4.0" pkg="@astrojs/alpinejs" />
+</p>
+
 Vous pouvez étendre Alpine en définissant l'option `entrypoint` sur un spécificateur d'importation relatif à la racine (par exemple `entrypoint: "/src/entrypoint"`).
 
 L'exportation par défaut de ce fichier doit être une fonction qui accepte une instance Alpine avant de démarrer. Cela permet d'utiliser des directives personnalisées, des modules d'extension et d'autres personnalisations pour des cas d'utilisation avancés.
@@ -148,7 +155,7 @@ L'exemple suivant ajoute le module d'extension [Collapse d'Alpine](https://alpin
 
 ## Intellisense pour TypeScript
 
-L'intégration `@astrojs/alpine` ajoute `Alpine` à l'objet global de la fenêtre. Pour l'autocomplétion de l'IDE, ajoutez ce qui suit à votre `src/env.d.ts` :
+L'intégration `@astrojs/alpine` ajoute `Alpine` à [l'objet global de la fenêtre](/fr/guides/typescript/#extension-des-types-globaux). Pour l'autocomplétion de l'IDE, ajoutez ce qui suit à votre `src/env.d.ts` :
 
 ```ts title="src/env.d.ts"
 interface Window {

src/content/docs/fr/guides/integrations-guide/cloudflare.mdx

@@ -429,7 +429,7 @@ Vous pouvez créer un script pnpm pour lancer `wrangler types` automatiquement a
 ```
 :::
 
-Vous pouvez définir un type pour l'objet `runtime` en utilisant `Runtime` :
+Vous pouvez définir un type pour l'objet `runtime` en [étendant les types globaux](/fr/guides/typescript/#extension-des-types-globaux) à l'aide de `Runtime` :
 
 ```ts title="src/env.d.ts"
 type Runtime = import('@astrojs/cloudflare').Runtime<Env>;

src/content/docs/fr/guides/integrations-guide/netlify.mdx

@@ -134,7 +134,7 @@ const {
 <h1>Bonjour, aimable visiteur de {city} !</h1>
 ```
 
-Si vous utilisez TypeScript, vous pouvez obtenir des typages corrects en mettant à jour `src/env.d.ts` pour utiliser `NetlifyLocals` :
+Si vous utilisez TypeScript, vous pouvez [obtenir des typages corrects](/fr/guides/typescript/#extension-des-types-globaux) en mettant à jour `src/env.d.ts` pour utiliser `NetlifyLocals` :
 
 ```ts title="src/env.d.ts"
 type NetlifyLocals = import('@astrojs/netlify').NetlifyLocals

src/content/docs/fr/guides/integrations-guide/vercel.mdx

@@ -101,9 +101,12 @@ Pour configurer cet adaptateur, passez un objet à l'appel de la fonction `verce
 
 ### `webAnalytics`
 
+<p>
+
 **Type :** `VercelWebAnalyticsConfig`<br/>
 **Disponible pour :** Serverless, Static<br/>
 <Since v="3.8.0" pkg="@astrojs/vercel" />
+</p>
 
 Avec `@vercel/[email protected]` ou une version antérieure, vous pouvez définir `webAnalytics: { enabled: true }` dans votre configuration Astro pour injecter les scripts de suivi de Vercel dans toutes vos pages.
 
@@ -125,9 +128,12 @@ export default defineConfig({
 
 ### `imagesConfig`
 
+<p>
+
 **Type :** `VercelImageConfig`<br/>
-**Disponible pour :** Serverless, Static
+**Disponible pour :** Serverless, Static<br />
 <Since v="3.3.0" pkg="@astrojs/vercel" />
+</p>
 
 Options de configuration pour l'[API Image Optimization de Vercel](https://vercel.com/docs/concepts/image-optimization). Voir [la documentation sur la configuration des images de Vercel](https://vercel.com/docs/build-output-api/v3/configuration#images) pour une liste complète des paramètres pris en charge.
 
@@ -150,9 +156,12 @@ export default defineConfig({
 
 ### `imageService`
 
+<p>
+
 **Type :** `boolean`<br/>
-**Disponible pour :** Serverless, Static
+**Disponible pour :** Serverless, Static<br />
 <Since v="3.3.0" pkg="@astrojs/vercel" />
+</p>
 
 Lorsque cette option est activée, un [service d'images](/fr/reference/image-service-reference/) alimenté par l'API Image Optimization de Vercel sera automatiquement configuré et utilisé en production. En développement, le service d'image spécifié par [`devImageService`](#devimageservice) sera utilisé à la place.
 
@@ -191,10 +200,13 @@ import astroLogo from '../assets/logo.png';
 
 ### `devImageService`
 
+<p>
+
 **Type :** `'sharp' | string`<br/>
-**Disponible pour :** Serverless, Static
+**Par défaut :** `sharp`<br />
+**Disponible pour :** Serverless, Static<br />
 <Since v="3.8.0" pkg="@astrojs/vercel" />
-**Par défaut :** `sharp`
+</p>
 
 Permet de configurer le service d'images à utiliser pour le développement lorsque [imageService](#imageservice) est activé. Cela peut être utile si vous ne pouvez pas installer les dépendances de Sharp sur votre machine de développement, mais que l'utilisation d'un autre service d'image comme Squoosh vous permet de prévisualiser les images dans votre environnement de développement. La compilation n'est pas affectée et utilisera toujours l'optimisation d'image de Vercel.
 
@@ -215,10 +227,13 @@ export default defineConfig({
 
 ### `isr`
 
+<p>
+
 **Type :** <code>boolean | VercelISRConfig</code><br/>
-**Disponible pour :** Serverless
+**Par défaut :** `false`<br />
+**Disponible pour :** Serverless<br />
 <Since v="7.2.0" pkg="@astrojs/vercel" />
-**Par défaut :** `false`
+</p>
 
 Permet à votre projet d'être déployé en tant que fonction [ISR (Incremental Static Regeneration)](https://vercel.com/docs/incremental-static-regeneration), qui met en cache vos pages rendues à la demande de la même manière que les pages pré-rendues après la première demande.
 
@@ -287,8 +302,11 @@ export default defineConfig({
 
 ### `includeFiles`
 
+<p>
+
 **Type :** `string[]`<br/>
 **Disponible pour :** Serverless
+</p>
 
 Utilisez cette propriété pour forcer l'intégration de fichiers dans votre fonction. C'est utile lorsque vous remarquez qu'il manque des fichiers.
 
@@ -306,8 +324,11 @@ export default defineConfig({
 
 ### `excludeFiles`
 
+<p>
+
 **Type :** `string[]`<br/>
 **Disponible pour :** Serverless
+</p>
 
 Utilisez cette propriété pour exclure du processus de regroupement des fichiers qui seraient autrement inclus.
 
@@ -325,8 +346,11 @@ export default defineConfig({
 
 ### `maxDuration`
 
+<p>
+
 **Type :** `number`<br/>
 **Disponible pour :** Serverless
+</p>
 
 Utilisez cette propriété pour étendre ou limiter la durée maximale (en secondes) que les fonctions Serverless peuvent exécuter avant de s'arrêter. Voir la [documentation Vercel](https://vercel.com/docs/functions/serverless-functions/runtimes#maxduration) pour la limite par défaut et la limite maximale pour votre plan de compte.
 
@@ -344,9 +368,12 @@ export default defineConfig({
 
 ### `skewProtection`
 
+<p>
+
 **Type :** `boolean`<br/>
-**Disponible pour :** Serverless
+**Disponible pour :** Serverless<br />
 <Since pkg="@astrojs/vercel" v="7.6.0" />
+</p>
 
 Utilisez cette propriété pour activer [Vercel Skew protection](https://vercel.com/docs/deployments/skew-protection) (disponible avec les comptes Vercel Pro et Enterprise).
 
@@ -382,7 +409,7 @@ export default defineConfig({
 });
 ```
 
-L'Edge Middleware a accès au [`RequestContext`](https://vercel.com/docs/functions/edge-middleware/middleware-api#requestcontext) de Vercel avec `ctx.locals.vercel.edge`. Si vous utilisez TypeScript, vous pouvez obtenir les types appropriés en mettant à jour `src/env.d.ts` pour utiliser `EdgeLocals` :
+L'Edge Middleware a accès au [`RequestContext`](https://vercel.com/docs/functions/edge-middleware/middleware-api#requestcontext) de Vercel avec `ctx.locals.vercel.edge`. Si vous utilisez TypeScript, vous pouvez [obtenir les types appropriés](/fr/guides/typescript/#extension-des-types-globaux) en mettant à jour `src/env.d.ts` pour utiliser `EdgeLocals` :
 
 ```ts
 type EdgeLocals = import('@astrojs/vercel').EdgeLocals

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

@@ -139,7 +139,7 @@ export const onRequest = (context, next) => {
 };
 ```
 
-Pour ajouter des types aux informations contenues dans `Astro.locals`, ce qui vous donne l'autocomplétion dans les fichiers `.astro` et le code du middleware, déclarez un espace de noms global dans le fichier `env.d.ts` :
+Pour ajouter des types aux informations contenues dans `Astro.locals`, qui vous donne l'autocomplétion dans les fichiers `.astro` et le code du middleware, [étendez les types globaux](/fr/guides/typescript/#extension-des-types-globaux) en déclarant un espace de noms global dans le fichier `env.d.ts` :
 
 ```ts title="src/env.d.ts"
 type User = {

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

@@ -126,7 +126,7 @@ export const onRequest = defineMiddleware(async (context, next) => {
 
 Par défaut, les données de session sont non typées et vous pouvez stocker des données arbitraires dans n'importe quelle clé. Les valeurs sont sérialisées et désérialisées avec [devalue](https://github.com/Rich-Harris/devalue), qui est la même bibliothèque utilisée dans les collections de contenu et les actions. Cela signifie que les types pris en charge sont les mêmes et incluent les chaînes de caractères, les nombres, `Date`, `Map`, `Set`, `URL`, les tableaux et les objets.
 
-Vous pouvez éventuellement définir des types TypeScript pour vos données de session en créant un fichier `src/env.d.ts` et en ajoutant une déclaration pour le type `App.SessionData` :
+Vous pouvez éventuellement [définir des types TypeScript](/fr/guides/typescript/#extension-des-types-globaux) pour vos données de session en créant un fichier `src/env.d.ts` et en ajoutant une déclaration pour le type `App.SessionData` :
 
 ```ts title="src/env.d.ts"
 declare namespace App {

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

@@ -40,16 +40,6 @@ En complément, nous vous recommandons de définir `include` et `exclude` comme
 }
 ```
 
-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 d'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;
-
-// Types d'Astro, non nécessaire si vous avez déjà un fichier `tsconfig.json`
-/// <reference path="../.astro/types.d.ts" />
-```
-
 ### Module d'extension Typescript pour les éditeurs
 
 Le [module d'extension 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 dans VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Ce module d'extension est automatiquement installé et configuré par l'extension VS Code, et vous n'avez pas besoin d'installer les deux.
@@ -118,7 +108,7 @@ Vous pouvez configurer TypeScript pour qu'il applique les importations de types
 
 ## Alias d'importation
 
-Astro prend en charge 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 prend en charge les alias d'importation que vous définissez dans la propriété `paths` de votre configuration `tsconfig.json`. [Consultez notre guide des importations](/fr/guides/imports/#alias) pour en savoir plus.
 
 ```astro title="src/pages/about/nate.astro" "@components" "@layouts"
 ---
@@ -138,7 +128,19 @@ import Layout from "@layouts/Layout.astro";
 }
 ```
 
-## Extension de `window` et de `globalThis`
+## Extension des types globaux
+
+Vous pouvez créer le fichier `src/env.d.ts` comme convention pour ajouter des déclarations de types personnalisées, ou pour bénéficier des types d'Astro si vous n'avez pas de fichier `tsconfig.json` :
+
+```ts title="src/env.d.ts"
+// Déclarations de types personnalisées
+declare var myString: string;
+
+// Types d'Astro, non nécessaire si vous avez déjà un fichier `tsconfig.json`
+/// <reference path="../.astro/types.d.ts" />
+```
+
+### `window` et `globalThis`
 
 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` :
 
@@ -159,6 +161,56 @@ interface Window {
 }
 ```
 
+### Ajouter des attributs non standard
+
+Vous souhaiterez peut-être définir un type pour des propriétés CSS ou des attributs personnalisés. Vous pouvez é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 title="src/env.d.ts"
+declare namespace astroHTML.JSX {
+  interface HTMLAttributes {
+    "data-count"?: number;
+    "data-label"?: string;
+  }
+
+  // Ajouter une propriété CSS personnalisée à l'objet style
+  interface CSSProperties {
+    "--theme-color"?: "black" | "white";
+  }
+}
+```
+
+:::note
+`astroHTML` est injecté globalement dans les composants `.astro`. Pour l'utiliser dans les fichiers TypeScript, utilisez une [directive triple barre oblique](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html) :
+
+```ts
+/// <reference types="astro/astro-jsx" />
+
+type MyAttributes = astroHTML.JSX.ImgHTMLAttributes;
+```
+:::
+
+### Utilisation d'importations
+
+Vous souhaiterez peut-être étendre les types globaux en réutilisant les types déclarés ailleurs dans votre projet ou à partir d'une bibliothèque externe. Pour ce faire, utilisez les [importations dynamiques](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/import) :
+
+```ts title="src/env.d.ts"
+type Product = {
+  id: string;
+  name: string;
+  price: number;
+};
+
+declare namespace App {
+  interface Locals {
+    orders: Map<string, Product[]>
+    session: import("./lib/serveur/session").Session | null;
+    user: import("ma-bibliotheque-externe").User;
+  }
+}
+```
+
+Un fichier `.d.ts` est une déclaration de [module ambiant](https://www.typescriptlang.org/docs/handbook/modules/reference.html#ambient-modules). Bien que sa syntaxe soit similaire à celle des modules ES, ces fichiers n'autorisent pas les importations/exportations de niveau supérieur. Si Typescript en rencontre un, le fichier sera considéré comme une [augmentation de module](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) et cela brisera vos types globaux.
+
 ## 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 VS Code](/fr/editor-setup/) recherchera automatiquement l'interface `Props` et vous fournira la prise en charge TS appropriée lorsque vous utiliserez ce composant dans un autre modèle.
@@ -211,32 +263,6 @@ const { href, ...attrs } = Astro.props;
 </a>
 ```
 
-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 title="src/custom-attributes.d.ts"
-declare namespace astroHTML.JSX {
-  interface HTMLAttributes {
-    "data-count"?: number;
-    "data-label"?: string;
-  }
-
-  // Ajouter une propriété CSS personnalisée à l'objet style
-  interface CSSProperties {
-    "--theme-color"?: "black" | "white";
-  }
-}
-```
-
-:::note
-`astroHTML` est injecté globalement dans les composants `.astro`. Pour l'utiliser dans les fichiers TypeScript, utilisez une [directive triple barre oblique](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html) :
-
-```ts
-/// <reference types="astro/astro-jsx" />
-
-type MyAttributes = astroHTML.JSX.ImgHTMLAttributes;
-```
-:::
-
 ### Type `ComponentProps`
 
 <p><Since v="4.3.0" /></p>