Étape 05

Prérequis

git checkout --force step-05
pnpm i

Description

Maintenant que l'équipe Book se charge de BooklistItem, elle effectue des modifications et change le contrat d'interface du composant. Malheureusement, personne ne s'aperçoit que l'application ne tourne plus 😱.

apps/book/src/BooklistItem.tsx

-export function BooklistItem({item, className = ''}: {item: Bookshelf.Book; className?: string}) {
+export function BooklistItem({book, index}: {book: Bookshelf.Book; index: number}) {
   return (

Exercice

Modifier la configuration Typescript pour avoir le bon typage dans apps/booklist/src/Booklist.tsx.

Pour cela, nous allons utiliser le path mapping et les project references.

1. Ajoutez le path mapping et la project reference.

apps/booklist/tsconfig.json

 {
   "extends": "tsconfig/react-library.json",
-  "include": ["src/**/*", "src/**/*.json"]
+  "include": ["src/**/*", "src/**/*.json"],
+  "compilerOptions": {
+    "paths": {
+      "book/*": ["../book/src/*"]
+    }
+  },
+   "references": [{"path": "../book"}]
 }

2. Passez en composite tous les packages dans le fichier configs/ts/base.json.
   Il s'agit d'un prérequis pour les project references.

configs/ts/base.json

   "compilerOptions": {
-    "composite": false,
+    "composite": true,
     "declaration": true,

3. Ouvrez le fichier apps/booklist/src/Booklist.tsx et redémarrez le serveur Typescript de votre VSCode avec :
   Cmd/Ctrl + Shift + P => Typescript: Restart TS Server.
   Vous devriez maintenant voir apparaitre les soucis sur l'utilisation de BooklistItem.

4. Corrigez les erreurs dans apps/booklist/src/Booklist.tsx.

apps/booklist/src/Booklist.tsx

       <ul className="flex flex-col">
-        {booklist?.map((bookListItem) => (
+        {booklist?.map((bookListItem, index) => (
           <li key={bookListItem.slug}>
-            <BooklistItem item={bookListItem} className="hover:underline" />
+            <BooklistItem book={bookListItem} index={index} />
           </li>
         ))}
       </ul>

Bonus 01

Modifier la configuration Typescript pour avoir le bon typage dans apps/bookshelf/src/App.

Bonus 02

Faire fonctionner le script pnpm tscheck.

Avec les project references, tsc s'attend maintenant à avoir des fichiers de définitions .d.ts sur chacun de nos packages.
Modifiez les scripts tscheck pour emit les fichiers de définitions.

Bonus 03

Essayer le plugin officiel.

Nous avons trouvé la solution en pur TS plus simple et plus adaptée à cet exemple mais vous pouvez essayer le plugin pour vous faire votre propre avis 😉.

Solution

Pour accéder à la solution :

git checkout --force step-05-result

Pour voir les changements :

git diff step-05..step-05-result

ou sur Github.