Website-Suche

javascript - Typescript-Definitionsdatei ist kein Modul

Ich möchte ein prototypisiertes JavaScript-Objekt in mein Reactjs-Projekt mit einer import-Anweisung laden.

Zuerst habe ich ein prototypisiertes Javascript-Objekt, das ich als Webpack-Modul exportiere:

var FloDialog=function(t){this.id=Date.now(),this.cloak=this.rende // etc //etc

if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
    module.exports = FloDialog;
}

Dann habe ich in der Typdefinitionsdatei flo-dialog.min.d.ts den folgenden Code, den Sie unten sehen:

declare module 'flo-dialog' {

interface FloDialogOptions {
    cache: boolean;
    position: string;
    effect: {
        fade: boolean;
        fill: boolean;
    }
}

interface FloDialog {
    constructor(opts?: FloDialogOptions): void;
    openUrl(title: string, url: string, callback?: () => void): void;
}

const FloDialog: FloDialog;
export = FloDialog;

}

Schließlich verwende ich die Import-Anweisung import * as FloDialog from '../public/js/flo-dialog.min'; in der React-Komponente Main.tsx Datei.

Es funktioniert im Browser, aber ich bekomme den TypeScript-Fehler: TS2306: Datei '/public/js/flo-dialog.min.d.ts' ist kein Modul.

Also, wie importiere ich korrekt ein JavaScript-prototypisiertes Objekt mit der import-Anweisung in React ... und dabei stark typisiert? Was ist bisher an meinem Ansatz falsch?

Update: Kokodoko Kommentar war nützlich.

Ich importiere nun die Typ-Schnittstellen über import {IFloDialog} from './types/index'; und das Webpack-Modul über const FloDialog=require('../public/js/flo-dialog.min');

Ich bin mir nicht sicher, ob dies der richtige Weg ist, es zu tun. Aber es funktioniert, ohne Typescript-Fehler und es gibt Autovervollständigung in der IDE... und es funktioniert im Browser.

Verwandte Artikel