Comment puis-je ajouter des types TypeScript à un module JavaScript sans passer à TypeScript ?

Je suppose que le titre est quelque peu déroutant, mais je n'ai pas pu le formuler de manière plus concise dans un titre court. Cependant, voici ce que je veux faire :

• J'ai un module npm qui est écrit en JavaScript, pas en TypeScript.
• Certains des utilisateurs de ce module utilisent TypeScript, donc ce serait bien si je pouvais fournir des annotations de type pour mon code JavaScript.
• Mais je ne veux pas passer à TypeScript, je veux rester avec du JavaScript pur.

Donc, ce que je cherche, c’est une sorte de manifeste de déclaration de type externe, ou quelque chose comme ça.

Est-ce possible? Si oui, comment?

Veuillez être indulgent si c'est une question naïve pour les utilisateurs de TypeScript, mais je n'ai absolument aucune expérience avec TypeScript, et donc je ne sais pas quoi chercher sur le web. Peut-être que si quelqu'un peut me pousser dans la bonne direction en me donnant un nom pour ce que je cherche, je serai capable de trouver une solution par moi-même.

Réponse #1

Vous voudrez créer des fichiers de définition. Ces fichiers sont utilisés pour décrire votre JavaScript.

Disons pour simplifier que vous avez une fonction appelée add, elle prendra deux nombres ou un tableau de nombres.

/src/index.js

exports.add = function add(a, b) {
  if (Array.isArray(a)) return a.reduce((sum, val) => sum + val, 0)
  else if (arguments.length === 2 && typeof a === 'number' && typeof b === 'number') return a + b
  throw new Error('Invalid input') 
}

Nous pouvons alors créer un fichier de définition .d.ts, cela décrira notre fonction JavaScript. Vous devriez garder les noms de fichiers et la structure des fichiers identiques à ceux du JS dans un dossier racine tel que types.

/types/index.d.ts

/**
 * Sums up two numbers.
 *
 * @param {number} a The first number to add.
 * @param {number} b The second number to add.
 * @returns {number} The resulting sum of the two numbers.
 */
export declare function add(a: number, b: number): number
/**
 * Sums up a list of numbers.
 *
 * @param {number[]} numbers An array of numbers to add.
 * @returns {number} The resulting sum of all the numbers.
 */
export declare function add(numbers: number[]): number

Remarque : Lors de la création de surcharges, la définition la plus complexe doit être en premier et la définition la moins complexe doit être en dernier, voir l'Ordre des Surcharges ainsi que tous les À faire et À ne pas faire.

Tout ce que ce fichier fait, c'est décrire toutes les fonctions/classes/interfaces/modules, etc. sans aucune logique. Dans le fichier, vous pouvez créer des surcharges comme vous pouvez le voir dans mon exemple. Cela vous permettra de définir plusieurs façons dont la fonction peut être utilisée. Le fichier prend également en charge JSDoc, donc je l'utiliserais aussi.

Si vous souhaitez diviser un fichier en fichiers plus petits, vous devez ensuite inclure le fichier dans le fichier actuel en utilisant un commentaire de référence (il commence par trois / et se termine par />).

/// <reference path="./part-1.d.ts" />
/// <reference path="./part-2.d.ts" />

declare interface {
  someProperty: string;
}

Ensuite, nous devons modifier le package.json, cela indiquera à l'analyseur TypeScript où trouver les définitions de ce package.

/package.json

{
  "types": "types/index.d.ts"
}

Remarque : Le champ "typings" est synonyme de "types" et peut également être utilisé.

Consultez la section Publication pour plus d’informations sur package.json.

C'est essentiellement tout ce qu'il y a à faire pour créer un .d.ts