👋🏿 〰️ 🤹 Utiliser TypeScript en JavaScript sans écrire TypeScript 👨🏿‍🎓 🤙🏼 👲🏽

Je suis un grand fan de TypeScript. Dans la mesure du possible, j'essaie d'utiliser cette langue dans mes projets. TypeScript fournit au développeur des rapports d'erreur et une vérification de type dans le code JavaScript et TypeScript. En outre, toute personne qui écrit TypeScript peut utiliser les fonctionnalités pratiques pour la complétion de code, peut effectuer rapidement et de manière fiable une refactorisation. TypeScript est la première ligne de défense contre les erreurs de code. Un autre point fort de ce langage est qu'il vous permet d'utiliser les dernières fonctionnalités JavaScript lors de l'écriture de programmes. Dans le même temps, ce qui est obtenu en convertissant le code TypeScript en JavaScript sera pris en charge par tous les navigateurs. C'est vraiment bien.

Certes, tous les projets frontaux n'incluent pas TypeScript. Et si vous pouviez utiliser les capacités de TypeScript, mais sans y traduire l'intégralité du projet (et toute l'équipe) et ajouter un nouvel outil au pipeline d'assemblage du projet? Ceci est possible grâce à VS Code et JSDoc.

Mise en place de l'environnement de travail

▍ Numéro d'option 1. Paramètres du code VS (validation globale)

La première façon d'utiliser TypeScript (TS) dans des projets écrits en JavaScript simple (JS) consiste à utiliser TS pour valider tous les fichiers JS. Cela se fait en incluant un paramètre global VS Code. Ce paramètre peut être activé dans les paramètres utilisateur ou espace de travail:

"javascript.implicitProjectConfig.checkJs": true

Si vous faites partie de ceux qui préfèrent utiliser l'interface graphique, vous pouvez l'activer comme indiqué ci-dessous.

Activation de la validation TypeScript JS

▍Option numéro 2. Utilisation du fichier jsconfig.json (validation globale)

Une autre option pour activer la validation globale du code JS à l'aide de TS consiste à utiliser un fichier jsconfig.json. Si un tel fichier existe, les paramètres qui y sont spécifiés remplaceront les paramètres spécifiés dans VS Code.

{
  "compilerOptions": {
    "checkJs": true
  }
}

▍ Numéro d'option 3. Activer la validation pour des fichiers individuels

Une troisième façon d'utiliser TypeScript pour contrôler le code JS consiste à activer la vérification au niveau du fichier individuel. Il consiste à ajouter le commentaire correspondant au début du fichier:

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

En utilisant la même idée, vous pouvez désactiver la vérification de TS pour un seul fichier JS. Cela se fait si la vérification TS est activée globalement en utilisant les méthodes décrites ci-dessus. Un commentaire spécial est également utilisé ici:

// @ts-nocheck
let easy = 'abc';
easy = 123; //

Et si vous souhaitez que TypeScript ignore uniquement une partie du fichier, vous pouvez le faire:

let easy = 'abc';
// @ts-ignore
easy = 123; //

Saisie de code à l'aide de JSDoc

Nous venons de parler de la façon d'activer la vérification TS au niveau fichier. Cela fournit des capacités de vérification de type de base. Ils peuvent être étendus en décrivant les types à l'aide de commentaires au format JSDoc.

▍Typisation des fonctions

Vous pouvez commencer à taper du code à l'aide de JSDoc avec une description de ce que les fonctions acceptent en entrée:

/**
 * @param {number} shippingVal
 */
updateShipping(shippingVal) {
    ...
}

Après cela, l'éditeur pourra donner des conseils par type.

Astuce sur le type de valeur accepté par la fonction

Cette méthode est bien adaptée aux types simples, mais que se passe-t-il si le développeur doit décrire ses propres types? Cela peut être fait en utilisant la balise@typedef. Je recommande de mettre des descriptions de type au début du fichier. Cela facilitera la détection de telles descriptions au cours des travaux:

/**
* @typedef {Object} CreditNoteTaxResponseViewModel
* @property {number} feeAmount
* @property {number} inclGst
* @property {number} subTotal
* @property {number} total
*
* @typedef {Object} ApiResponse
* @property {string} status
* @property {string} message
* @property {CreditNoteTaxResponseViewModel} response
*/

Ces descriptions peuvent être utilisées si nécessaire:

/**
                * @param {CreditNoteTaxRequestViewModel} req
                * @returns {Promise<ApiResponse>}
                */
                createCreditNoteTaxApiCall(req) {
        ...
                }

Un autre cas d'utilisation de cette technique consiste à déplacer des déclarations de type vers des fichiers spéciaux. Disons qu'un tel fichier peut être appelé main.d.ts.

export interface ICreditNoteTaxRequestViewModel{
    orderID: number;
    shippingCredit: number;
    lines: IICreditNoteTaxLineViewModel[]
}

export interface ICreditNoteTaxLineViewModel{
    originalOrderLineID:number;
    creditQuantity: number;
}

export interface ICreditNoteTaxResponseViewModel{
    feeAmount: number;
    inclGst: number;
    subTotal: number;
    total: number;
}

export interface IApiResponse{
    status: string;
    status: message;
    response: ICreditNoteTaxResponseViewModel;
}

Ces types peuvent ensuite être utilisés en JavaScript:

/**
   * @param {import("./main").ICreditNoteTaxRequestViewModel} req
   * @returns {Promise<import("./main").IApiResponse>}
   */
  function createCreditNoteTaxApiCall(req) {
    ///  
    return;
  }

▍Typisation du code régulier

Les exemples ci-dessus résolvent le problème de la saisie des valeurs d'entrée et de sortie des fonctions. Quelque chose de similaire peut être fait en utilisant les commentaires JSDoc intégrés.

Taper une variable régulière

▍Typisation des bibliothèques

VS Code dispose d'un système permettant d'obtenir automatiquement des types pour les bibliothèques tierces. La procédure correspondante s'applique à tous les packages décrits dans le fichier package.json. Mais, si quelqu'un préfère le définir explicitement, il peut effectuer les réglages appropriés dans jsconfig.json:

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

Une fois que le système d'obtention de type a traité la bibliothèque, les types peuvent être utilisés dans JSDoc:

/**
 * @param {JQuery<HTMLElement>} $itemRow
 */
initRow($itemRow) {
    ...
}

Passer à TypeScript

Si vous décidez de convertir un projet tapuscrit JavaScript, dans certaines régions dont tapuscrit est utilisé, vous pouvez simplement le renommer jsconfig.jsonpour tsconfig.jsonet inclure le paramètre dans ce allowJs:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  }
}

Après cela, vous pouvez commencer à renommer les *.js-files en *.ts-files et à taper le code de ces fichiers. Le processus de traduction d'un projet en TypeScript peut se produire progressivement.

Sommaire

Après avoir lu ce document, vous remarquerez peut-être à quel point il est facile de tirer parti des fonctionnalités de TypeScript dans un projet JavaScript. Pour ce faire, configurez simplement VS Code en conséquence. L'approche décrite ici vous permet de ne pas apporter de modifications au processus d'assemblage du projet, de ne pas risquer de violer ce processus et de ne pas forcer l'équipe de développement à basculer d'urgence vers une nouvelle langue.

Si le projet JS, qui n'utilise que certaines des fonctionnalités TypeScript, est décidé d'être entièrement transféré vers TS, cela est également facile à faire. De plus, une telle transition peut être effectuée par étapes.

Voici le référentiel GitHub où vous pouvez trouver les exemples de code utilisés dans cet article.

Chers lecteurs! Que pensez-vous de l'idée de vérifier le type dans le code JS à l'aide des fonctionnalités TypeScript?

Utiliser TypeScript en JavaScript sans écrire TypeScript