Signature_pad: Não é possível importar em TypeScript

Criado em 5 fev. 2018 · 20Comentários · Fonte: szimek/signature_pad

De acordo com a descrição, devo ser capaz de importar este módulo para o TypeScript da seguinte maneira:
import * as SignaturePad from 'signature_pad';

O TypeScript se recusa a reconhecer isso como válido porque não há um módulo exportado. Exporte um módulo para compatibilidade com TypeScript.

Aqui está um tópico de estouro de pilha com relação a isso.

more info

Fonte

jamie-thul

👍2

Comentários muito úteis

Acabei de lançar uma versão beta que foi reescrita em TypeScript. Os arquivos de declaração agora são fornecidos pela biblioteca. Você pode instalá-lo usando yarn add signature_pad@beta . O código-fonte ainda está disponível apenas na filial typescript .

Ele ainda usa a exportação padrão, mas testei com Webpack 4 e TypeScript 2.7.2 e funciona se eu importar usando import SignaturePad from 'signature_pad' .

Seria ótimo receber algum feedback, se funcionar, se houver algum problema, etc.

szimek em 13 mar. 2018

👍7

Todos 20 comentários

Se não funcionar, você pode tentar importar diretamente de signature_pad/dist/signature_pad.mjs .

A próxima versão provavelmente será reescrita em TypeScript - veja o branch de typescript . Eu "só" preciso encontrar algum tempo livre para limpar tudo e descobrir a configuração de rollup para todas as versões (umd es5, es6, não minimizado, minimizado etc.) e como gerar arquivos de declaração TS.

szimek em 5 fev. 2018

👍3

@szimek pode

import * as SignaturePad from 'signature_pad'; Gives SignaturePad não é um construtor

import * as SignaturePad from 'signature_pad/dist/signature_pad.mjs'; Gives SignaturePad não é um construtor

const SignaturePad = require('signature_pad'); Gives SignaturePad não é um construtor

import SignaturePad from 'signature_pad'; Funciona, mas dá um erro de digitação

strongui em 6 fev. 2018

👍1

O que exatamente está na variável SignaturePad neste caso? O código em signature_pad/dist/signature_pad.mjs é simplesmente empacotado junto com o código-fonte ES6 com uma exportação padrão. Deve funcionar, a menos que o TS não lide com exportações padrão.

szimek em 6 fev. 2018

@szimek TS lida muito bem com as exportações padrão, o problema está nas definições de @ types / signature_pad index.d.ts.

strongui em 6 fev. 2018

Mas esta biblioteca não fornece arquivos de declaração TypeScript.

szimek em 6 fev. 2018

@szimek não? Então o que é instalado quando você faz install @types/signature_pad --save-dev , definitivamente há arquivos de declaração do TS. Não são as mesmas pessoas ??

strongui em 6 fev. 2018

Não sei;) Você pode ver todos os arquivos sendo publicados, por exemplo, aqui: https://www.jsdelivr.com/package/npm/signature_pad.

szimek em 6 fev. 2018

@szimek Acabei de notar que meu comentário anterior não mostrava toda a linha de instalação, por causa do caractere @ . Eu editei. Basicamente, se você fizer install @types/signature_pad --save-dev , verá as definições instaladas na pasta @types/signature_pad . Eu me pergunto quem está fazendo isso? Talvez precisemos contatá-los e consertá-lo e mesclá-lo no pacote padrão lol

strongui em 6 fev. 2018

Parece que você está usando um arquivo de definição do DefinitelyTyped .

Se eu ler a declaração corretamente, isso pode funcionar (desculpe, não tentei, acabei de descobrir esse problema):
import { SignaturePad } from 'signature_pad';

MrJoe em 9 fev. 2018

👎2

@strongui ,
Eu também tentei seus comentários @szimek . Absolutamente não funcionou.
Estou usando o bloco de assinatura no arquivo JS agora, mas tenho que mudar de lugar para TS
Estou usando a versão do nó v6.11.2 e a versão Typescript é v2.6.2
npm version { npm: '3.10.10', ares: '1.10.1-DEV', node: '6.11.2', zlib: '1.2.11' }

Selman-EE em 13 fev. 2018

Acabei de experimentar usando o TypeScript 2.7.2 e funciona bem.

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

Execute yarn add signature_pad typescript webpack ts-loader && yarn run webpack . Em seguida, abra index.html e deve funcionar.

szimek em 18 fev. 2018

🎉1 👍1

@szimek obrigado, funciona para mim

Selman-EE em 23 fev. 2018

Funciona para mim usando TypeScript 2.4.2 e importando-o como @szimek no comentário acima.

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 em 26 fev. 2018

Para aqueles que estão obtendo o SignaturePad não é um erro do padrão , como:
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

onurkose em 2 mar. 2018

👍3

Ele ainda usa a exportação padrão, mas testei com Webpack 4 e TypeScript 2.7.2 e funciona se eu importar usando import SignaturePad from 'signature_pad' .

Seria ótimo receber algum feedback, se funcionar, se houver algum problema, etc.

szimek em 13 mar. 2018

👍7

Estamos usando a versão beta em um aplicativo TypeScript 2.8 e funciona bem.

Apenas pequenos problemas:

Obtendo um erro não tratado na extremidade sensível ao toque porque const touch = event.targetTouches[0] é indefinido.
O método toDataURL deve ter seus argumentos marcados como opcionais se você quiser coincidir com o método toDataURL da tela.

StevenBarnettST em 12 abr. 2018

❤1

@StevenBarnettST corrigido! Obrigado por relatar esses problemas. Amanhã vou lançar uma nova versão beta.

szimek em 12 abr. 2018

Qual é a maneira correta de vincular o TIPO / interface do teclado de assinatura a uma variável, para preenchimento automático e verificação de ts?

Ross-Rawlins em 19 fev. 2019

Para aqueles que estão obtendo o SignaturePad não é um erro do padrão , como:
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

Isso funciona para mim. Muito obrigado! (Symfony Webpack Encore)