web-dev-qa-db-fra.com

Comment consommer les modules npm à partir du manuscrit?

Je donne un coup de feu à TypeScript. Cela fonctionne très bien sur la scène hello world. J'essaie maintenant d'utiliser un module npm:

index.ts =

import _ = require('lodash')

console.log(_.toUpper('Hello, world !'))

Cela ne marche pas:

  • tsc index.ts -> Cannot find module 'lodash'. (2307)
  • node-ts index.js -> Cannot find module 'lodash'. (2307)

Regarder la documentation TypeScript et dans Google n'a pas aidé. Les autres questions sur les S/O sont soit sans réponse ( ici et ici ), soit sans rapport.

Éléments :

  • TypeScript 1.8 dernière
  • Oui, lodash est installé npm i --save lodash et existe dans mon système de fichiers (vérifié)
  • J'ai aussi fait typings i --save lodash
  • les variantes import * as _ from 'lodash' ou const _ = require('lodash') ne fonctionnent pas non plus
  • J'ai essayé de modifier les options tsconfig.json comme suggéré dans d'autres réponses "moduleResolution": "node" et "module": "commonjs" comme suggéré dans certaines réponses, cela ne fonctionne toujours pas.

Comment consommons-nous un paquet npm dans TypeScript?

68
Offirmo

[2018/12] Nouvelle réponse actualisée à la question que j'ai posée en 2016 et qui montre encore beaucoup d'activité malgré des réponses obsolètes.

En bref, TypeScript nécessite des informations de type sur le code de votre paquet (aka " fichiers de déclaration de type " aka "typings") et vous dit à juste titre que vous perdriez sinon tout le sens de TypeScript. Il existe plusieurs solutions pour les fournir ou les désactiver, répertoriées ici par ordre de meilleure pratique:


Solution 0 : le module fournit déjà les typages. Si son package.json contient une ligne comme celle-ci:

"typings": "dist/index.d.ts",

il est déjà compatible avec TypeScript. Ce n'est probablement pas le cas si vous lisez cette page de débordement de pile, alors continuons ...


Solution 1 : utilisez des typages fournis par la communauté à partir de DefinitelyTyped . Pour un module "foo", essayez ceci:

npm add -D @types/foo

si cela fonctionne, jackpot! Vous avez maintenant les saisies et pouvez utiliser votre module. Si npm se plaint de ne pas trouver le module @ types/foo, continuons ...


Solution 2 : fournissez des typographies personnalisées sur ce module. (avec une option pour ne faire aucun effort)

  1. Créez un dossier nommé "typings-custom" à la racine de votre projet
  2. Référencez le contenu de ce dossier dans votre tsconfig.json:
"include": [
    "./typings-custom/**/*.ts"
]
  1. Créez un fichier avec ce nom exact: foo.d.ts [foo = le nom du module] avec le contenu:
declare module 'foo'

Votre code TypeScript devrait maintenant être compilé, bien qu'avec AUCUNE information de type (TypeScript considère le module foo de type "any").

Vous pouvez également essayer d’écrire vous-même les informations de type en consultant le document officiel et/ou des exemples de DefinitelyTyped . Si vous le faites, pensez à contribuer vos saisies soit directement dans le module (solution 0, si l'auteur du module accepte) ou dans DefinitelyTyped (solution 1).

27
Offirmo

[EDIT] Merci beaucoup pour cette réponse! Cependant, en 2018, il est obsolète. Lecteurs, jetez un coup d'œil aux autres réponses.

Il existe plusieurs façons d'importer des modules à partir de npm. Mais si vous n'obtenez pas de frappe, tsc se plaindra toujours de ne pas trouver le module dont vous avez besoin (même si transpiled js est en fait fonctionne).

  • Si vous avez des saisies et n'utilisez pas de tsconfig.json, utilisez reference pour importer les saisies:

    /// <reference path="path/to/typings/typings.d.ts" />
    
    import * as _ from 'lodash`;
    
    console.log(_.toUpper('Hello, world !'))
    
  • Si vous utilisez un fichier tsconfig.json, assurez-vous d’avoir votre fichier de typage inclus (ou non exclu, votre choix), et faites en sorte que la variable import soit identique à celle de l’exemple précédent.

Dans le cas où il n'y a pas de frappe disponible. Vous avez le choix entre deux possibilités: écrire le vôtre dans un fichier .d.ts ou ignorer la vérification du type de la bibliothèque.

Pour ignorer complètement la vérification de type (ce n'est pas la méthode recommandée), importez la bibliothèque sur une variable de type any.

 const _: any = require('lodash');

 console.log(_.toUpper('Hello, world !'))

tsc se plaindra que require n'existe pas. Fournissez les saisies node ou declare pour supprimer l'erreur.

53
Blackus

Il vous manque probablement le fichiers de déclaration .

Voir DefinitelyTyped pour plus d'informations.


Essaye ça:

npm install --save lodash
npm install --save @types/lodash

Maintenant, vous pouvez importer.

import _ from 'lodash';

Si le module que vous importez a plusieurs exportations , vous pouvez le faire:

import { Express, Router } from 'express';

Si le module que vous importez "n'a pas d'export par défaut" , procédez comme suit:

import * as http from 'http';
14
Derek Soike

Cela a fonctionné pour moi.

  1. Créez un dossier nommé "typings".
  2. Dans le dossier typings, créez un nom de fichier nom-module.d.ts. Il contient:

    declare module "module-name";

  3. Dans tsconfig.json, reportez-vous au dossier

    "typesRoots": [ "./typings", "../node_modules/@types" ]

2
Quynh Ngo