;
diff --git a/src/content/docs/fr/guides/integrations-guide/netlify.mdx b/src/content/docs/fr/guides/integrations-guide/netlify.mdx
index 3f3c69977fe7e..446c62b2757dd 100644
--- a/src/content/docs/fr/guides/integrations-guide/netlify.mdx
+++ b/src/content/docs/fr/guides/integrations-guide/netlify.mdx
@@ -134,7 +134,7 @@ const {
Bonjour, aimable visiteur de {city} !
```
-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
diff --git a/src/content/docs/fr/guides/integrations-guide/vercel.mdx b/src/content/docs/fr/guides/integrations-guide/vercel.mdx
index 5c03594256633..1f391830ef750 100644
--- a/src/content/docs/fr/guides/integrations-guide/vercel.mdx
+++ b/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`
+
+
**Type :** `VercelWebAnalyticsConfig`
**Disponible pour :** Serverless, Static
+
Avec `@vercel/analytics@1.3.x` 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`
+
+
**Type :** `VercelImageConfig`
-**Disponible pour :** Serverless, Static
+**Disponible pour :** Serverless, Static
+
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`
+
+
**Type :** `boolean`
-**Disponible pour :** Serverless, Static
+**Disponible pour :** Serverless, Static
+
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`
+
+
**Type :** `'sharp' | string`
-**Disponible pour :** Serverless, Static
+**Par défaut :** `sharp`
+**Disponible pour :** Serverless, Static
-**Par défaut :** `sharp`
+
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`
+
+
**Type :** boolean | VercelISRConfig
-**Disponible pour :** Serverless
+**Par défaut :** `false`
+**Disponible pour :** Serverless
-**Par défaut :** `false`
+
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`
+
+
**Type :** `string[]`
**Disponible pour :** Serverless
+
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`
+
+
**Type :** `string[]`
**Disponible pour :** Serverless
+
Utilisez cette propriété pour exclure du processus de regroupement des fichiers qui seraient autrement inclus.
@@ -325,8 +346,11 @@ export default defineConfig({
### `maxDuration`
+
+
**Type :** `number`
**Disponible pour :** Serverless
+
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`
+
+
**Type :** `boolean`
-**Disponible pour :** Serverless
+**Disponible pour :** Serverless
+
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
diff --git a/src/content/docs/fr/guides/middleware.mdx b/src/content/docs/fr/guides/middleware.mdx
index e72e29b664da2..d9f5ac45ba6ed 100644
--- a/src/content/docs/fr/guides/middleware.mdx
+++ b/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 = {
diff --git a/src/content/docs/fr/guides/sessions.mdx b/src/content/docs/fr/guides/sessions.mdx
index 26f5806cc1217..b22cc7f3ae3e9 100644
--- a/src/content/docs/fr/guides/sessions.mdx
+++ b/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 {
diff --git a/src/content/docs/fr/guides/typescript.mdx b/src/content/docs/fr/guides/typescript.mdx
index 9881dfb2c0d64..784cd8c6021bd 100644
--- a/src/content/docs/fr/guides/typescript.mdx
+++ b/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`
-///
-```
-
### 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`
+///
+```
+
+### `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
+///
+
+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
+ 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;
```
-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
-///
-
-type MyAttributes = astroHTML.JSX.ImgHTMLAttributes;
-```
-:::
-
### Type `ComponentProps`