Support TypeScript

Initialization

Docusaurus prend en charge l'écriture et l'utilisation de composants de thèmes TypeScript. If the init template provides a Typescript variant, you can directly initialize a site with full TypeScript support by using the --typescript flag.

npx @docusaurus/init@latest init my-website classic --typescript

Below are some guides on how to migrate an existing project to TypeScript.

Configuration

Pour commencer à utiliser TypeScript, ajoutez @docusaurus/module-type-aliases et certaines dépendances @types à votre projet :

npm

npm install --save-dev typescript @docusaurus/module-type-aliases @types/react @types/react-router-dom @types/react-helmet @tsconfig/docusaurus

Yarn

yarn add --dev typescript @docusaurus/module-type-aliases @types/react @types/react-router-dom @types/react-helmet @tsconfig/docusaurus

Ensuite, ajoutez tsconfig.json à la racine de votre projet avec le contenu suivant :

tsconfig.json

{  "extends": "@tsconfig/docusaurus/tsconfig.json",  "include": ["src/"]}

Docusaurus n'utilise pas ce tsconfig.json pour compiler votre projet. Il est ajouté juste pour une expérience plus agréable de l'éditeur, bien que vous puissiez choisir d'exécuter tsc pour vérifier votre code pour vous-même ou sur le CI.

Maintenant vous pouvez commencer à écrire des composants de thèmes TypeScript.

Swizzler les composants de thème TypeScript

Pour les thèmes supportant les composants de thèmes TypeScript, vous pouvez ajouter le paramètre --typescript à la fin de la commande swizzling pour obtenir le code source TypeScript. Par exemple, la commande suivante générera index.tsx et styles.module.css dans src/theme/Footer.

npm

npm run swizzle @docusaurus/theme-classic Footer -- --typescript

Yarn

yarn run swizzle @docusaurus/theme-classic Footer -- --typescript

Pour le moment, le seul thème officiel de Docusaurus supportant les composants de thèmes TypeScript est @docusaurus/theme-classic. Si vous êtes un auteur de package de thème Docusaurus voulant ajouter le support TypeScript, consulter la documentation des API du cycle de vie.