Comment faire la transition de votre application Web vers TypeScript

TypeScript ajoute le typage statique à JavaScript, ce qui améliore l'expérience IDE et réduit les bogues. C'est facile à apprendre, mais la transition d'une application existante vers TypeScript peut être un processus ardu. Nous aborderons certaines des techniques permettant de l'utiliser dans votre application.

Qu'est-ce que TypeScript?

TypeScript est un sur-ensemble syntaxique de JavaScript qui ajoute, entre autres, la prise en charge du typage statique. Il se compile directement dans vanilla JS qui fonctionnera dans n'importe quel navigateur.

Vanilla JS est typé dynamiquement. Les variables peuvent changer de type au moment de l'exécution, et JS l'acceptera. Cela le rend très flexible, mais conduit souvent à un désordre dans les grands projets. TypeScript applique la sécurité de type – vous ne pouvez pas passer un int valeur à une fonction qui prend un string.

Cela seul présente de grands avantages. Étant donné que chaque fonction définit clairement les arguments qu'elles prennent, cela facilite grandement leur travail. TypeScript s'intègre très bien avec les outils IDE, fournissant une saisie semi-automatique riche et une vérification de type où vanilla JS n'aurait que la coloration syntaxique de base.

Cela facilite également la vérification des bogues de base pour votre IDE. S'il vous manque un argument pour une fonction, VS Code vous le fera savoir immédiatement, avant même qu'il ne soit compilé.

Installation de TypeScript et Webpack

Remarque avant de commencer: si vous utilisez un projet React créé avec create-react-app, la configuration Webpack est gérée pour vous dans le cadre de react-scripts. Si vous souhaitez le modifier, vous pouvez éjecter votre configuration (non recommandé sauf si vous souhaitez gérer vous-même la configuration en cours), fork react-scripts, ou utilisez une bibliothèque comme rewired pour le modifier indirectement sans interrompre les mises à jour.

Cependant, si vous démarrez un nouveau projet, vous pouvez simplement utiliser create-react-appModèle TypeScript de s lors de la génération d’un nouveau projet.

npx create-react-app --template typescript

Celui-ci sera préconfiguré pour prendre en charge TypeScript prêt à l'emploi. Si cela fonctionne pour vous, vous pouvez ignorer le reste de cette section. Vous pouvez également effectuer la transition d'un projet existant vers un create-react-app Modèle TypeScript utilisant cette méthode.

Si vous n'utilisez pas React, vous devrez l'installer manuellement. Installez TypeScript en tant que dépendance de développement pour votre projet:

npm install --save-dev typescript

Vous souhaiterez également installer TypeScript globalement sur votre machine, ce qui vous permettra d'utiliser la CLI:

npm install -g typescript

Pour le tester, vous pouvez créer une fonction de base comme la suivante:

function Hello(object: string) {
  console.log(`Hello, ${object}!`);
}

Hello('World')

Enregistré sous test.ts. Tous les fichiers TypeScript doivent avoir un .ts extension (ou .tsx pour JSX). Vous pouvez le compiler manuellement en utilisant tsc:

tsc test.ts

Exécuter ceci avec le -w le drapeau fera tsc surveillez les nouveaux changements et compilez chaque fois que vous enregistrez, mais vous voudrez probablement l'intégrer dans Webpack dans le cadre de votre processus de construction. Si vous n’avez pas Webpack, installez-le à partir de npm:

npm install --save-dev webpack webpack-cli

Créez un fichier de configuration TypeScript sur tsconfig.json qui stockera les paramètres de votre compilateur:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "skipLibCheck": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    }
}

Ensuite, vous souhaiterez créer ou modifier votre webpack.config.json fichier pour résoudre les extensions TypeScript et utiliser ts-loader. Vous souhaiterez également activer les cartes sources pour un débogage amélioré.

module.exports = {
    mode: "production",

    
    devtool: "source-map",

    resolve: {
        
        extensions: (".ts", ".tsx")
    },

    module: {
        rules: (
            {
                test: /.ts(x?)$/,
                exclude: /node_modules/,
                use: (
                    {
                        loader: "ts-loader"
                    }
                )
            },
            
            {
                enforce: "pre",
                test: /.js$/,
                loader: "source-map-loader"
            }
        )
    },

    
    
    
    
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

Maintenant, en cours d'exécution npx webpack ou webpack-dev-server gérera automatiquement le chargement des fichiers TypeScript pour vous.

Comment travailler avec des packages basés sur JS

Si vous venez d'installer TypeScript, remplacez certaines de vos extensions par .ts, et remarqué que tout est maintenant en feu, ne vous inquiétez pas. De nombreuses bibliothèques JS ne prennent pas en charge Typescript par défaut, mais des types tiers sont généralement disponibles à partir de DefinitelyTyped, un référentiel communautaire dédié à la gestion des typages pour les bibliothèques les plus courantes comme installables séparément npm dépendances. Par exemple, React est disponible sur @types/react:

npm install --save-dev @types/react @types/react-dom

Cela éliminera immédiatement les problèmes lors de l'utilisation du package associé. Si vous rencontrez des erreurs de compilation après l'installation d'un nouveau package, essayez d'installer @types/package.

Heureusement, TypeScript va toujours compiler et fonctionner avec JS natif très bien – vous pouvez juste voir des gribouillis rouges vous indiquant que c'est un problème. Si vous voulez vraiment corriger les typages pour un npm package qui n'a pas de types disponibles publiquement, vous pouvez écrire un fichier de déclaration pour celui-ci, éventuellement en forçant DefinatelyTyped (et en soumettant vos nouveaux types au dépôt de la communauté).

Un fichier de déclaration ressemble à ce qui suit, généralement enregistré sous package.d.ts quelque part dans votre src:

export as namespace Package
export = Package

declare namespace Package {
  interface Type {
    value: boolean
  }
  // etc...
}

Ensuite, vous pouvez utiliser la déclaration en ajoutant une référence en haut de tout code utilisant ce package:

///

Comment taper du code hérité

La saisie du code hérité est un processus manuel qui sera spécifique à votre logique métier, donc cela prendra un certain temps en fonction de la taille de votre projet. Cependant, le concept de base n’est pas trop difficile et il consiste simplement à créer des interfaces personnalisées pour les valeurs transmises et renvoyées par les fonctions que vous avez implémentées.

Par exemple, disons que vous avez un composant React qui prend quelques accessoires et restitue certains JSX:

Pour saisir ceci, vous pouvez définir une nouvelle interface pour la fonction à utiliser. Chaque fois que vous référencez une clé sur props dans le code, comme props.divCustomColor ici, ajoutez-le à l'interface avec le type correspondant.

Ensuite, lorsque vous utilisez cette fonction dans un autre fichier, vous obtenez une erreur si vous ne définissez pas props.divCustomColor, ou essayez de lui transmettre un type incorrect. Si votre application gère déjà les valeurs de manière sécurisée, c'est peut-être tout ce dont vous avez besoin pour taper plusieurs de vos composants. Cependant, vous devrez peut-être modifier certaines choses pour mieux gérer la saisie stricte.

Si vous vous grattez vraiment la tête sur quelque chose, vous pouvez toujours abandonner et désactiver les avertissements du compilateur TypeScript en utilisant le ts-ignore drapeau:

//@ts-ignore

Ou ts-nocheck pour un fichier entier.

Ajout de types à l'échelle du projet

Si vous souhaitez ajouter des types personnalisés à l'échelle du projet, vous souhaiterez créer un fichier de déclaration globale. Par exemple, si vous souhaitez créer une énumération référençable stockant les couleurs de votre application, vous permettant de les utiliser directement par nom, vous pouvez enregistrer les éléments suivants sous global.d.ts dans votre src dossier:

declare global {
    enum Color {
        primary = "#6ca583",
        accent = "#9b8dab",
    }
}

export {};

Désactivez toute vérification implicite si vous rencontrez vraiment des problèmes

L'erreur la plus courante que vous rencontrerez probablement est TypeScript se plaignant de "Implicit Any". Vous pouvez faire en sorte que les fonctions acceptent n'importe quel type en utilisant le explicite tout, ou val: any. C'est bien, et même si vous devez généralement faire des typages plus stricts, il est parfois préférable de dire à TypeScript de se détendre.

Par défaut, toutes les valeurs auront implicitement le any type, qui n'est que le système de saisie dynamique JavaScript par défaut. TypeScript s'en plaindra beaucoup. Si vous le souhaitez, vous pouvez désactiver la réclamation en définissant noImplicitAny à faux:

{
  "compilerOptions": {
    "noImplicitAny": false
  }
}

Soyez prudent avec cela, cela ne fait que faire taire l'erreur et ne résout pas le problème racine. Cependant, si vous souhaitez l'activer temporairement pendant que vous travaillez à tout taper, cela permettra à votre code de se compiler entre-temps.