TypeScript
Astro est livré avec un support intégré pour TypeScript. Vous pouvez importer des fichiers
.ts et
.tsx dans votre projet Astro, écrire du code TypeScript directement dans votre composant Astro, et même utiliser un fichier
astro.config.ts 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 taper les paramètres de votre composant, 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 en déduit autant qu'elle le peut 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é pour vérifier les erreurs de type à partir de la ligne de commande.
ConfigurationTitre de la section 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.
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 :
De plus, nos modèles incluent un fichier
env.d.ts dans le dossier
src pour fournir Vite's client types à votre projet :
Si vous n'utilisez pas VSCode, vous pouvez installer le plugin Astro TypeScript pour prendre en charge l'importation de fichiers
.astro à partir de fichiers
.ts (ce qui peut être utile pour la réexportation).
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 UITitre de la section Frameworks UI
Si votre projet utilise un framework UI, 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, React, Preact, Solid)
Importations de typesTitre de la section Importations de types
Utilisez autant que possible des importations et des exportations de types explicites.
De cette façon, vous évitez les cas où le bundler d'Astro peut essayer de bundler incorrectement vos types importés comme s'il s'agissait de JavaScript.
Vous pouvez configurer TypeScript pour qu'il applique les importations de types dans votre fichier
tsconfig.json. Mettez
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.
Alias d'importationTitre de la section Alias d'importation
Extension de Titre de la section Extension de window et de globalThis
window et de
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 :
Ceci fournira le typage à
globalThis.myString et
globalThis.myFunction, ainsi qu'à
window.myString et
window.myFunction.
Notez que
window n'est disponible que dans le code côté client.
globalThis est disponible à la fois côté serveur et côté client, mais sa valeur côté serveur ne sera pas partagée avec le client.
Si vous voulez seulement taper une propriété sur l'objet
window, fournissez une interface
Window à la place :
Les paramètres de composantsTitre de la section Les paramètres de composants
Astro prend en charge le typage des propriétés 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'Astro VSCode Extension recherchera automatiquement l'interface
Props et vous fournira le support TS approprié lorsque vous utiliserez ce composant dans un autre template.
Modèles courants de types d'accessoiresTitre de la section Modèles courants de types d'accessoires
-
- 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
-
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 typeTitre de la section Utilitaires de type
Ajouté à la version :
email@example.com
Astro est livré avec des types utilitaires intégrés pour les types d'objets courants. Ils sont disponibles sous l'endpoint
astro/types.
Attributs HTML intégrésTitre de la section Attributs HTML intégrés
Astro fournit le type
HTMLAttributes pour vérifier que votre balisage utilise des attributs HTML valides. Vous pouvez utiliser ces types pour vous aider à construire des paramètres de composants.
Par exemple, si vous construisez un composant
<Link>, vous pouvez faire ce qui suit pour refléter les attributs HTML par défaut pour les balises
<a> dans les types d'éléments de votre composant.
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.
astroHTML est injecté globalement dans les composants
.astro. Pour l'utiliser dans les fichiers TypeScript, utilisez une directive triple barre oblique :
Type Titre de la section Type ComponentProps
ComponentProps
Ajouté à la version :
firstname.lastname@example.org
Cette exportation de type vous permet de référencer les
Props acceptés par un autre composant, même si ce composant n'exporte pas directement ce type de
Props.
L'exemple suivant montre l'utilisation de l'utilitaire
ComponentProps de
astro/types pour référencer les types
Props d'un composant
<Button /> :
Type polymorpheTitre de la section Type polymorphe
Ajouté à la version :
email@example.com
Astro inclut une aide pour faciliter la construction de composants qui peuvent être rendus comme différents éléments HTML avec une sécurité de type complète. Ceci est utile pour les composants comme
<Link> qui peuvent être rendus comme
<a> ou
<button> en fonction des accessoires qui lui sont passés.
L'exemple ci-dessous implémente un composant entièrement typé et polymorphe qui peut être rendu comme n'importe quel élément HTML. Le type
HTMLTag est utilisé pour s'assurer que la propriété
as est un élément HTML valide.
Inférer les types Titre de la section Inférer les types getStaticPaths().
getStaticPaths().
Ajouté à la version :
firstname.lastname@example.org
Astro inclut des aides pour travailler avec les types retournés par votre fonction
getStaticPaths() pour les routes dynamiques.
Vérification des typesTitre de la section Vérification des types
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 :
astro check vérifie tous les fichiers inclus dans votre projet TypeScript. Pour vérifier les types dans les fichiers Svelte et Vue, vous pouvez utiliser les paquets
svelte-check et
vue-tsc respectivement.
.ts dans Astro.
Résolution des problèmesTitre de la section Résolution des problèmes
Erreurs de typage de plusieurs frameworks JSX en même tempsTitre de la section Erreurs de typage de plusieurs frameworks JSX en même temps
Un problème peut survenir lors de l'utilisation de plusieurs frameworks JSX dans le même projet, car chaque framework requiert des paramètres différents, parfois contradictoires, dans
tsconfig.json.
Solution: Définissez le paramètre
jsxImportSource à
react (par défaut),
preact ou
solid-js en fonction du framework que vous utilisez le plus. Ensuite, utilisez un pragma comment à 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 :