70 votes

Quelle configuration TypeScript produit une sortie la plus proche des capacités de Node.js 14 ?

Avec Node.js apportant un support mis à jour pour ES2020 et ajoutant un support pour les modules ES, comment TypeScript peut-il être configuré pour produire du code JavaScript qui tire parti de toutes ces nouvelles fonctionnalités ?

207voto

Linus Unnebäck Points 1855

A partir de Node.js 14.0.0 100% de l'ES2020 est supporté, et le support des modules ES est arrivé ! Si vous savez que vous visez cette version ou une version plus récente, la configuration optimale ressemblerait à ceci :

  • "module": "ES2020" & "moduleResolution": "node"

    Node.js 14 supporte le chargement de modules au lieu de l'ancien format CommonJS, nous n'avons pas besoin de dire à TypeScript que nous utilisons les règles de Node.js pour résoudre les modules.

  • "allowSyntheticDefaultImports": true

    Pour assurer une compatibilité ascendante, Node.js vous permet d'importer les paquets CommonJS avec un import par défaut. Ce drapeau indique à TypeScript qu'il est correct d'utiliser import sur les modules CommonJS.

  • "target": "ES2020"

    Cela indique à TypeScript qu'il est possible d'afficher du JavaScript. syntaxe avec des caractéristiques de l'ES2020. En pratique, cela signifie qu'il produira, par exemple, des opérateurs de chaînage optionnels et une syntaxe async/await au lieu d'intégrer un polyfill.

  • "lib": ["ES2020"]

    Cela indique à TypeScript qu'il est possible d'utiliser les éléments suivants fonctions et propriétés introduit dans l'ES2020 ou avant. En pratique, cela signifie que vous pouvez utiliser par exemple Promise.allSettled y BigInt .

La configuration complète serait donc :

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "lib": ["ES2020"],
    "module": "ES2020",
    "moduleResolution": "node",
    "target": "ES2020"
  }
}

En plus de cela, nous devons également dire à Node.js de traiter .js dans ce projet en tant que modules ES. La raison en est que Node.js doit maintenir une compatibilité ascendante avec le code écrit pour les anciennes versions de Node.js. Ceci peut être fait en ajoutant "type": "module" à votre package.json :

{
  "type": "module"
}

Un autre changement si vous venez d'une version antérieure de Node.js est que l'extension de fichier lors de l'importation de fichiers est désormais obligatoire . Cela signifie que vous devez écrire .js à la fin de vos importations locales. Notez que c'est .js même si vous importez un fichier TypeScript qui porte en fait l'extension de fichier .ts . Cela peut sembler un peu déroutant mais ce commentaire d'un des contributeurs du TS explique pourquoi il en est ainsi .

Voici quelques exemples de la manière de rédiger votre import déclarations :

// Built-in Node.js modules
import { readFileSync } from 'fs'

// CommonJS packages from Npm
import md5File from 'md5-file'

// The local file "a.ts"
import { a } from './a.js'

Si vous voulez vous en tenir à CommonJS pour l'instant, pour éviter les problèmes expliqués ci-dessus, vous pouvez utiliser la configuration suivante :

{
  "compilerOptions": {
    "lib": ["ES2020"],
    "module": "CommonJS",
    "target": "ES2020"
  }
}

Si vous exécutez Node.js 16, vous pouvez voir mes réponse similaire pour Node.js 16 ici

Si vous exécutez Node.js 12, vous pouvez voir mes réponse similaire pour Node.js 12 ici

Si vous exécutez Node.js 10, vous pouvez voir mes réponse similaire pour Node.js 10 ici

Si vous exécutez Node.js 8, vous pouvez voir mes réponse similaire pour Node.js 8 ici

3 votes

Il y a un moyen d'omettre le .js lors de l'importation, et j'ai documenté cela dans mon document projet modern-typescript repo. En dehors de cela, merci d'avoir repoussé les limites de la génération de code ES Modules avec TypeScript ! Espérons que les auteurs de modules TypeScript commenceront à adopter cette méthode et publier les modules ES appropriés .

0 votes

@DanDascalescu ouais, j'ai débattu de l'opportunité de l'inclure. --experimental-specifier-resolution=node ou non, mais j'ai finalement décidé de ne pas le faire car je ne voulais pas que trop de personnes commencent à utiliser --experimental-* drapeaux. Merci pour le lien ! :)

2 votes

Qu'en est-il esModuleInterop ? J'en déduis qu'il peut ou doit être faux, puisque vous définissez explicitement les conditions suivantes allowSyntheticDefaultImports .

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X