Signature_pad: Impossible d'importer dans TypeScript

Créé le 5 févr. 2018 · 20Commentaires · Source: szimek/signature_pad

D'après la description, je devrais pouvoir importer ce module dans TypeScript comme suit :
import * as SignaturePad from 'signature_pad';

TypeScript refuse de reconnaître cela comme valide car il n'y a pas de module exporté. Veuillez exporter un module pour la compatibilité TypeScript.

Voici un sujet de débordement de pile à ce sujet.

more info

Source

jamie-thul

👍2

Commentaire le plus utile

Je viens de publier une version bêta qui est réécrite en TypeScript. Les fichiers de déclaration sont désormais fournis par la bibliothèque. Vous pouvez l'installer en utilisant yarn add signature_pad@beta . Le code source est toujours disponible uniquement sur la branche typescript .

Il utilise toujours l'exportation par défaut, mais je l'ai testé avec Webpack 4 et TypeScript 2.7.2 et cela fonctionne si je l'importe en utilisant import SignaturePad from 'signature_pad' .

Ce serait génial d'avoir des commentaires, si cela fonctionne, s'il y a des problèmes, etc.

szimek le 13 mars 2018

👍7

Tous les 20 commentaires

Si cela ne fonctionne pas, vous pouvez essayer d'importer directement depuis signature_pad/dist/signature_pad.mjs .

La prochaine version sera réécrite plus probable dactylographiée - voir tapuscrit branche. J'ai "juste" besoin de trouver du temps libre pour le nettoyer et comprendre la configuration du rollup pour toutes les versions (umd es5, es6, non-minifié, minifié, etc.) et comment générer des fichiers de déclaration TS.

szimek le 5 févr. 2018

👍3

@szimek Peut confirmer que cela ne fonctionne toujours pas dans un fichier .tsx.

import * as SignaturePad from 'signature_pad'; Donne SignaturePad n'est pas un constructeur

import * as SignaturePad from 'signature_pad/dist/signature_pad.mjs'; Donne SignaturePad n'est pas un constructeur

const SignaturePad = require('signature_pad'); Donne SignaturePad n'est pas un constructeur

import SignaturePad from 'signature_pad'; Fonctionne, mais donne une erreur dactylographiée dans la console : ...node_modules/@types/signature_pad/index.d.ts' n'est pas un module.

strongui le 6 févr. 2018

👍1

Que contient exactement la variable SignaturePad dans ce cas ? Le code dans signature_pad/dist/signature_pad.mjs est simplement regroupé le code source ES6 avec une exportation par défaut. Cela devrait fonctionner, à moins que TS ne gère pas les exportations par défaut.

szimek le 6 févr. 2018

@szimek TS gère très bien les exportations par défaut, le problème réside dans les définitions @types/signature_pad index.d.ts.

strongui le 6 févr. 2018

Mais cette bibliothèque ne fournit pas de fichiers de déclaration TypeScript.

szimek le 6 févr. 2018

@szimek non ? Ensuite, ce qui est installé lorsque vous faites install @types/signature_pad --save-dev , il y a certainement des fichiers de déclaration TS. Ce ne sont pas les mêmes personnes ??

strongui le 6 févr. 2018

Je ne sais pas ;) Vous pouvez voir tous les fichiers publiés par exemple ici : https://www.jsdelivr.com/package/npm/signature_pad.

szimek le 6 févr. 2018

@szimek Je viens de remarquer que mon commentaire précédent n'affichait pas toute la ligne d'installation, à cause du caractère @ . Je l'ai édité. Fondamentalement, si vous faites install @types/signature_pad --save-dev , vous verrez les définitions installées dans le dossier @types/signature_pad . Je me demande qui fait ça ? Peut-être que nous devons les contacter et le réparer et le fusionner dans le package par défaut lol

strongui le 6 févr. 2018

On dirait que vous utilisez un fichier de définition de

Si je lis correctement la déclaration, cela pourrait fonctionner (désolé de ne pas l'avoir essayé, je viens de tomber sur ce problème):
import { SignaturePad } from 'signature_pad';

MrJoe le 9 févr. 2018

👎2

@strongui j'ai eu la même erreur que toi. J'ai tout essayé dans les commentaires,
J'ai aussi essayé vos commentaires @szimek . Absolument pas travaillé.
J'utilise maintenant le pavé de signature dans le fichier JS mais je dois changer de place pour TS
J'utilise la version de nœud v6.11.2 et la version Typescript est la v2.6.2
npm version { npm: '3.10.10', ares: '1.10.1-DEV', node: '6.11.2', zlib: '1.2.11' }

Selman-EE le 13 févr. 2018

Je viens de l'essayer avec TypeScript 2.7.2 et cela fonctionne bien.

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' ]
  }
};

Exécutez yarn add signature_pad typescript webpack ts-loader && yarn run webpack . Ensuite, ouvrez index.html et cela devrait fonctionner.

szimek le 18 févr. 2018

🎉1 👍1

@szimek merci ça marche pour moi

Selman-EE le 23 févr. 2018

Fonctionne pour moi en utilisant TypeScript 2.4.2 et en l'important comme @szimek dans le commentaire ci-dessus.

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 le 26 févr. 2018

Pour ceux qui obtiennent SignaturePad n'est pas une erreur de default , comme:
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

onurkose le 2 mars 2018

👍3

Il utilise toujours l'exportation par défaut, mais je l'ai testé avec Webpack 4 et TypeScript 2.7.2 et cela fonctionne si je l'importe en utilisant import SignaturePad from 'signature_pad' .

Ce serait génial d'avoir des commentaires, si cela fonctionne, s'il y a des problèmes, etc.

szimek le 13 mars 2018

👍7

Nous utilisons la version bêta dans une application TypeScript 2.8 et cela fonctionne bien.

Juste des problèmes mineurs :

Obtention d'une erreur non gérée à la fin du toucher car const touch = event.targetTouches[0] n'est pas défini.
La méthode toDataURL doit avoir ses arguments marqués comme facultatifs si vous voulez correspondre à la méthode toDataURL canvas.

StevenBarnettST le 12 avr. 2018

❤1

@StevenBarnettST Corrigé ! Merci d'avoir signalé ces problèmes. Demain, je publierai une nouvelle version bêta.

szimek le 12 avr. 2018

Quelle est la bonne façon de lier le TYPE/l'interface de signaturepad à une variable, pour la saisie semi-automatique et la vérification ts ?

Ross-Rawlins le 19 févr. 2019

Pour ceux qui obtiennent SignaturePad n'est pas une erreur de default , comme:
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

Cela fonctionne pour moi. Merci beaucoup! (Symfony Webpack Encore)