Signature_pad: No se puede importar en TypeScript

Creado en 5 feb. 2018 · 20Comentarios · Fuente: szimek/signature_pad

De acuerdo con la descripción, debería poder importar este módulo a TypeScript de la siguiente manera:
import * as SignaturePad from 'signature_pad';

TypeScript se niega a reconocer esto como válido porque no hay un módulo exportado. Exporte un módulo para compatibilidad con TypeScript.

Aquí hay un tema de desbordamiento de pila con respecto a esto.

more info

Fuente

jamie-thul

👍2

Comentario más útil

Acabo de lanzar una versión beta que está reescrita en TypeScript. Los archivos de declaración ahora los proporciona la biblioteca. Puede instalarlo usando yarn add signature_pad@beta . El código fuente todavía está disponible solo en la sucursal typescript .

Todavía usa la exportación predeterminada, pero lo probé con Webpack 4 y TypeScript 2.7.2 y funciona si lo importo usando import SignaturePad from 'signature_pad' .

Sería fantástico recibir comentarios, si funciona, si hay algún problema, etc.

szimek en 13 mar. 2018

👍7

Todos 20 comentarios

Si no funciona, puede intentar importar directamente desde signature_pad/dist/signature_pad.mjs .

Lo más probable es que la próxima versión se reescriba en TypeScript; consulte la rama de mecanografiado . "Solo" necesito encontrar algo de tiempo libre para limpiarlo y averiguar la configuración acumulada para todas las versiones (umd es5, es6, no minificadas, minificadas, etc.) y cómo generar archivos de declaración TS.

szimek en 5 feb. 2018

👍3

@szimek Puede

import * as SignaturePad from 'signature_pad'; Gives SignaturePad no es un constructor

import * as SignaturePad from 'signature_pad/dist/signature_pad.mjs'; Gives SignaturePad no es un constructor

const SignaturePad = require('signature_pad'); Gives SignaturePad no es un constructor

import SignaturePad from 'signature_pad'; Funciona, pero da un error de mecanografiado en la consola : ... node_modules/@types/signature_pad/index.d.ts 'no es un módulo.

strongui en 6 feb. 2018

👍1

¿Qué hay exactamente en la variable SignaturePad en este caso? El código en signature_pad/dist/signature_pad.mjs simplemente se incluye junto con el código fuente ES6 con una exportación predeterminada. Debería funcionar, a menos que TS no maneje las exportaciones predeterminadas.

szimek en 6 feb. 2018

@szimek TS maneja bien las exportaciones predeterminadas, el problema está en las definiciones de @ types / signature_pad index.d.ts.

strongui en 6 feb. 2018

Pero esta biblioteca no proporciona archivos de declaración de TypeScript.

szimek en 6 feb. 2018

@szimek , ¿no es así? Entonces, lo que se instala cuando hace install @types/signature_pad --save-dev , definitivamente hay archivos de declaración de TS. ¿No son las mismas personas?

strongui en 6 feb. 2018

No lo sé;) Puede ver todos los archivos que se publican, por ejemplo, aquí: https://www.jsdelivr.com/package/npm/signature_pad.

szimek en 6 feb. 2018

@szimek Acabo de notar que mi comentario antes no mostraba toda la línea de instalación, debido al carácter @ . Lo he editado. Básicamente, si hace install @types/signature_pad --save-dev , verá las definiciones instaladas en la carpeta @types/signature_pad . Me pregunto quién está haciendo eso. Tal vez necesitemos contactarlos y arreglarlo y fusionarlo en el paquete predeterminado lol

strongui en 6 feb. 2018

Parece que está utilizando un archivo de definición de DefinitelyTyped .

Si leo la declaración correctamente, esto podría funcionar (lo siento, no lo probé, me encontré con este problema):
import { SignaturePad } from 'signature_pad';

MrJoe en 9 feb. 2018

👎2

@ Strongui Tuve el mismo error que tú. Probé todo en los comentarios
También probé tus comentarios @szimek . Absolutamente no funcionó.
Estoy usando el panel de firmas en el archivo JS en este momento, pero tengo que cambiar de lugar a TS
Estoy usando la versión de nodo v6.11.2 y la versión de TypeScript es v2.6.2
npm version { npm: '3.10.10', ares: '1.10.1-DEV', node: '6.11.2', zlib: '1.2.11' }

Selman-EE en 13 feb. 2018

Lo acabo de probar con TypeScript 2.7.2 y funciona 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' ]
  }
};

Ejecute yarn add signature_pad typescript webpack ts-loader && yarn run webpack . Luego abre index.html y debería funcionar.

szimek en 18 feb. 2018

🎉1 👍1

@szimek gracias, me funciona

Selman-EE en 23 feb. 2018

Me funciona usando TypeScript 2.4.2 e importándolo como @szimek en el comentario anterior.

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 en 26 feb. 2018

Para aquellos que están obteniendo SignaturePad no es un error de valor predeterminado , como:
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

onurkose en 2 mar. 2018

👍3

Todavía usa la exportación predeterminada, pero lo probé con Webpack 4 y TypeScript 2.7.2 y funciona si lo importo usando import SignaturePad from 'signature_pad' .

Sería fantástico recibir comentarios, si funciona, si hay algún problema, etc.

szimek en 13 mar. 2018

👍7

Estamos usando la versión beta en una aplicación TypeScript 2.8 y funciona bien.

Solo problemas menores:

Obteniendo un error no manejado en el extremo táctil porque const touch = event.targetTouches[0] no está definido.
El método toDataURL debe tener sus argumentos marcados como opcionales si desea hacer coincidir el método toDataURL del lienzo.

StevenBarnettST en 12 abr. 2018

❤1

@StevenBarnettST ¡Arreglado! Gracias por informar de estos problemas. Mañana lanzaré una nueva versión beta.

szimek en 12 abr. 2018

¿Cuál es la forma correcta de vincular el TIPO / interfaz del panel de firmas a una variable, para autocompletar y verificación de ts?

Ross-Rawlins en 19 feb. 2019

Para aquellos que están obteniendo SignaturePad no es un error de valor predeterminado , como:
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

Esto funciona para mi. ¡Muchas gracias! (Symfony Webpack Encore)