web-dev-qa-db-fra.com

Mélanger JavaScript et TypeScript dans Node.js

Tout en ayant des parties d'un Node.js dans ES6 ordinaire, est-il possible de mélanger certains modules TypeScript dans le même projet?

Par exemple. avoir certains types définis dans TypeScript qui sont importés via require dans des fichiers ES6 simples?

javascriptnode.jstypescriptjsdoc
15
Alexander Zeitler

Oui c'est possible.

Combinez les indicateurs de compilateur suivants

  1. --allowJs

    Prise en charge explicite de sources mixtes JavaScript et TypeScript

  2. --outDir

    Puisque tous les fichiers seront transpilés, il est nécessaire de sortir le JavaScript résultant dans un répertoire différent, sinon l'entrée .js les fichiers seraient écrasés 1 .

  3. --checkJs

    C'est complètement facultatif. S'il est spécifié, le compilateur vérifie les fichiers JavaScript, signalant les erreurs comme dans les fichiers TypeScript, où il tolérerait autrement les incohérences.

Quant à l'utilisation des types déclarés dans un fichier TypeScript dans un fichier JavaScript, cela peut en effet être fait.

TypeScript alimente en fait l'intégralité de l'intellisense JavaScript dans des outils comme Visual Studio Code.

Les types peuvent être placés dans JSDoc 2  commentaires. Ces commentaires peuvent faire référence à des types importés de TypeScript (.ts/.tsx/.d.ts) des dossiers. Les IDE comme Visual Studio Code fourniront la mise en évidence de la syntaxe et la complétion automatique dans ces commentaires.

Il y a cependant une mise en garde. Parce qu'il n'y a pas de syntaxe manifeste pour les types en JavaScript, ils ne peuvent pas être importés individuellement mais doivent être attachés à une valeur qui est importée. Ceci est plus facilement réalisé via la fusion de déclaration de TypeScript comme indiqué ci-dessous.

Exemple:

a.ts 

export default createThing;

function createThing(...args): createThing.Thing  {...}

namespace createThing {
  export interface Thing {...}
}

b.js 

import createThing from './a';

/**
 * @param {createThing.Thing} thing
 */
export function takesThing(thing) {}

Remarques:

1 : --outDir n'est pas nécessaire si vous spécifiez en plus le --noEmit drapeau. Vous feriez cela lorsque vous utilisez un outil tel que SystemJS (avec plugin-TypeScript ) ou Webpack (avec awesome-TypeScript- loader ou ts-loader ) pour héberger le transpilateur TypeScript. La même chose s'applique si vous utilisez TS Node .

2 : Bien que appelés commentaires JSDoc , ils sont interprétés dans le contexte du système de type TypeScript, pas le système JSDoc. Des langages et des outils tels que TypeScript et Google Closure Compiler , détournent efficacement la syntaxe JSDoc à leurs propres fins et confèrent ainsi des significations potentiellement conflictuelles à ses constructions. Ce n'est généralement pas un problème, mais il vaut la peine de le savoir car il peut être difficile de déterminer l'applicabilité et l'exactitude de ces commentaires et la compatibilité des types qu'ils référencent ou déclarent.

Remarques:

Bien que cette question et réponse concerne l'importation de types à utiliser dans des fichiers JavaScript, elle est très souvent inutile car le compilateur déduira les types à partir des valeurs de vos expressions.

Il convient également de mentionner que si vous avez besoin d'écrire beaucoup d'annotations de types de style JSDoc, il est presque certainement préférable de convertir le fichier en TypeScript car la syntaxe pour exprimer les types dans JSDoc est maladroite. Grace à --allowJs option, vous pouvez le faire fichier par fichier, comme décrit ci-dessus.

22
Aluan Haddad