web-dev-qa-db-fra.com

Fichiers de déclaration personnalisés TypeScript pour les modules npm non typés

Je consomme un composant React appelé shiitake from npm dans mon projet où j'utilise TypeScript. Cette bibliothèque n'a pas de déclaration TypeScript, alors j'ai pensé en écrire une. Le fichier de déclaration se présente comme ci-dessous (il peut ne pas être complet mais ne vous inquiétez pas trop):

import * as React from 'react';

declare module 'shiitake' {

    export interface ShiitakeProps {
        lines: number;
    }

    export default class Shiitake extends React.Component<ShiitakeProps, any> { 
    }
}

J'ai mis ceci dans le fichier ./typings/shiitake.d.ts et sur le code VS, je vois l'erreur ci-dessous:

[ts] Nom de module non valide en augmentation. Le module 'shiitake' se transforme en un module non typé à 'd: /dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js', qui ne peut pas être augmenté.

Du côté de la consommation, j'obtiens toujours la même erreur même si avec la déclaration ci-dessus (puisque j'ai le commutateur noImplicitAny du compilateur activé):

/// <reference path="../../../../typings/shiitake.d.ts" />
import * as React from 'react';
import Shiitake from 'shiitake';

[ts] Impossible de trouver un fichier de déclaration pour le module 'shiitake'. 'd: /dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js' possède implicitement un type 'quelconque'.

La raison habituelle pour l’acquisition de fichiers de déclaration pour ce type de modules se fait par le biais de @types/ et cela fonctionne bien. Cependant, je ne peux pas obtenir le travail de frappe personnalisé. Des pensées?

reactjstypescriptecmascript-6visual-studio-codetypescript2.0
22
tugberk

La déclaration declare module 'shiitake'; doit être dans une portée globale. c'est-à-dire une déclaration de niveau supérieur dans un non module (où un module est un fichier avec au moins un niveau supérieur import ou export).

Une déclaration de la forme declare module '...' { } dans un module est une augmentation. Pour plus de détails, voir Extension de module TypeScript .

Donc, vous voulez que ce fichier ressemble à:

declare module 'shiitake' {

    import * as React from 'react';

    export interface ShiitakeProps {
        lines: number;
    }

    export default class Shiitake extends React.Component<ShiitakeProps, any> { 
    }
}
59
mohamed hegazy

D'après mon expérience, un fichier de définition échouera de cette manière s'il contient des exportations ou des importations déclarées en dehors de la définition du module. Si vous utilisez un IDE avec importation automatique, soyez averti!

0
Ed Staub

J'ai eu le même problème aujourd'hui.

Il s'avère que je colle les interfaces exportées en dehors de la déclaration de module . Le fichier de typages que j'ai utilisé comme modèle avait des interfaces privées à la fin du fichier.

Ainsi, mes interfaces exportées ont été déclarées en dehors de la déclaration de module . Ceci est un moteur pour le compilateur TypeScript.

Une fois que j'ai déplacé les interfaces dans les limites du module, tout a été corrigé.

0
Sergey Dryganets