Signature_pad: Kann nicht in TypeScript importieren

Erstellt am 5. Feb. 2018 · 20Kommentare · Quelle: szimek/signature_pad

Laut Beschreibung sollte ich dieses Modul wie folgt in TypeScript importieren können:
import * as SignaturePad from 'signature_pad';

TypeScript weigert sich, dies als gültig zu erkennen, da kein exportiertes Modul vorhanden ist. Bitte exportieren Sie ein Modul für die TypeScript-Kompatibilität.

Hier ist ein Stack-Überlauf-Thema dazu.

more info

Quelle

jamie-thul

👍2

Hilfreichster Kommentar

Ich habe gerade eine Betaversion veröffentlicht, die in TypeScript umgeschrieben wurde. Deklarationsdateien werden jetzt von der Bibliothek bereitgestellt. Sie können es mit yarn add signature_pad@beta installieren. Der Quellcode ist weiterhin nur im typescript Zweig verfügbar.

Es verwendet immer noch den Standardexport, aber ich habe es mit Webpack 4 und TypeScript 2.7.2 getestet und es funktioniert, wenn ich es mit import SignaturePad from 'signature_pad' importiere.

Es wäre toll, Feedback zu bekommen, ob es funktioniert, wenn es irgendwelche Probleme gibt usw.

szimek am 13. März 2018

👍7

Alle 20 Kommentare

Wenn es nicht funktioniert, können Sie versuchen, direkt von signature_pad/dist/signature_pad.mjs zu importieren.

Die nächste Version wird höchstwahrscheinlich in TypeScript umgeschrieben - siehe Typescript- Zweig. Ich muss "nur" etwas Freizeit finden, um es aufzuräumen und die Rollup-Konfiguration für alle Versionen (umd es5, es6, nicht minifiziert, minifiziert usw.) herauszufinden und herauszufinden, wie TS-Deklarationsdateien generiert werden.

szimek am 5. Feb. 2018

👍3

@szimek Kann bestätigen, dass dies in einer .tsx-Datei immer noch nicht funktioniert.

import * as SignaturePad from 'signature_pad'; Gibt an, dass SignaturePad kein Konstruktor ist

import * as SignaturePad from 'signature_pad/dist/signature_pad.mjs'; Gibt an, dass SignaturePad kein Konstruktor ist

const SignaturePad = require('signature_pad'); Gibt an, dass SignaturePad kein Konstruktor ist

import SignaturePad from 'signature_pad'; Funktioniert, gibt aber einen Typoskriptfehler in der Konsole aus : ...node_modules/@types/signature_pad/index.d.ts' ist kein Modul.

strongui am 6. Feb. 2018

👍1

Was genau steht in diesem Fall in der Variablen SignaturePad ? Code in signature_pad/dist/signature_pad.mjs wird einfach zusammen mit ES6-Quellcode mit einem Standardexport gebündelt. Es sollte einfach funktionieren, es sei denn, TS verarbeitet keine Standardexporte.

szimek am 6. Feb. 2018

@szimek TS handhabt Standardexporte gut, das Problem liegt in den @types/signature_pad index.d.ts-Definitionen.

strongui am 6. Feb. 2018

Diese Bibliothek stellt jedoch keine TypeScript-Deklarationsdateien bereit.

szimek am 6. Feb. 2018

@szimek tut es das nicht? Was dann installiert wird, wenn Sie install @types/signature_pad --save-dev tun, gibt es definitiv TS-Deklarationsdateien. Sind das nicht dieselben Leute??

strongui am 6. Feb. 2018

Ich weiß es nicht ;) Sie können alle veröffentlichten Dateien zB hier sehen: https://www.jsdelivr.com/package/npm/signature_pad.

szimek am 6. Feb. 2018

@szimek Ich habe gerade bemerkt, dass mein Kommentar zuvor nicht die gesamte Installationszeile @ . Ich habe es bearbeitet. Grundsätzlich, wenn Sie install @types/signature_pad --save-dev ausführen, werden die Definitionen im Ordner @types/signature_pad installiert. Ich frage mich, wer das macht? Vielleicht müssen wir sie kontaktieren und es reparieren und in das Standardpaket zusammenführen lol

strongui am 6. Feb. 2018

Anscheinend verwenden Sie eine Definitionsdatei von DefinitelyTyped .

Wenn ich die Erklärung richtig gelesen habe, könnte dies funktionieren (sorry, ich habe es nicht ausprobiert, ich bin gerade über dieses Problem gestolpert):
import { SignaturePad } from 'signature_pad';

MrJoe am 9. Feb. 2018

👎2

@strongui Ich habe den gleichen Fehler wie du. Ich habe in den Kommentaren alles versucht,
Ich habe auch Ihre Kommentare @szimek ausprobiert . Hat absolut nicht funktioniert.
Ich benutze derzeit das Signaturpad in der JS-Datei, muss aber den Platz in TS ändern
Ich verwende die Knotenversion v6.11.2 und die Typescript-Version ist v2.6.2
npm version { npm: '3.10.10', ares: '1.10.1-DEV', node: '6.11.2', zlib: '1.2.11' }

Selman-EE am 13. Feb. 2018

Ich habe es gerade mit TypeScript 2.7.2 ausprobiert und es funktioniert gut.

index.ts

import SignaturePad from 'signature_pad';

new SignaturePad(document.querySelector('canvas'));

index.html

<html>
  <body>  
    <canvas style="border: 2px solid #000"></canvas>
    <script src="bundle.js"></script>
  </body>
</html>

tsconfig.json

{
  "compilerOptions": {
    "outDir": ".",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es3"
  }
}

webpack.config.js

module.exports = {
  entry: './index.js',  
  output: { filename: 'bundle.js' },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js' ]
  }
};

Führen Sie yarn add signature_pad typescript webpack ts-loader && yarn run webpack . Dann öffne index.html und es sollte funktionieren.

szimek am 18. Feb. 2018

🎉1 👍1

@szimek danke es funktioniert bei mir

Selman-EE am 23. Feb. 2018

Funktioniert bei mir mit TypeScript 2.4.2 und dem Importieren wie @szimek im obigen Kommentar.

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

pablomaurer am 26. Feb. 2018

Für diejenigen, die SignaturePad bekommen, default , als:
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

onurkose am 2. März 2018

👍3

Es verwendet immer noch den Standardexport, aber ich habe es mit Webpack 4 und TypeScript 2.7.2 getestet und es funktioniert, wenn ich es mit import SignaturePad from 'signature_pad' importiere.

Es wäre toll, Feedback zu bekommen, ob es funktioniert, wenn es irgendwelche Probleme gibt usw.

szimek am 13. März 2018

👍7

Wir verwenden die Beta-Version in einer TypeScript 2.8-App und sie funktioniert einwandfrei.

Nur kleinere Probleme:

Erhalten eines nicht behandelten Fehlers am Touch-Ende, weil const touch = event.targetTouches[0] definiert ist.
Die Argumente der Methode toDataURL sollten als optional gekennzeichnet sein, wenn Sie der Methode toDataURL Canvas entsprechen möchten.

StevenBarnettST am 12. Apr. 2018

❤1

@StevenBarnettST Behoben ! Vielen Dank für die Meldung dieser Probleme. Morgen werde ich eine neue Beta-Version veröffentlichen.

szimek am 12. Apr. 2018

Was ist der richtige Weg, um den TYP/die Schnittstelle des Signaturpads für die Autovervollständigung und die ts-Überprüfung an eine Variable zu binden?

Ross-Rawlins am 19. Feb. 2019

Für diejenigen, die SignaturePad bekommen, default , als:
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

Das funktioniert bei mir. Vielen Dank! (Symfony Webpack-Encore)

Flinsch am 24. März 2019

Ich habe einen Workaround gemacht, damit es funktioniert:
var SignaturePad = require('signature_pad/dist/signature_pad.js');

sharabiania am 30. Sept. 2019

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Signature_pad: Kann nicht in TypeScript importieren

Hilfreichster Kommentar

Alle 20 Kommentare

Verwandte Themen