Signature_pad: Tidak Dapat Mengimpor dalam TypeScript

Dibuat pada 5 Feb 2018 · 20Komentar · Sumber: szimek/signature_pad

Menurut deskripsi, saya harus dapat mengimpor modul ini ke TypeScript sebagai berikut:
import * as SignaturePad from 'signature_pad';

TypeScript menolak untuk mengenali ini sebagai valid karena tidak ada modul yang diekspor. Harap ekspor modul untuk kompatibilitas TypeScript.

Berikut adalah topik stack overflow mengenai hal ini.

more info

Sumber

jamie-thul

👍2

Komentar yang paling membantu

Saya baru saja merilis versi beta yang ditulis ulang dalam TypeScript. File deklarasi sekarang disediakan oleh perpustakaan. Anda dapat menginstalnya menggunakan yarn add signature_pad@beta . Kode sumber masih tersedia hanya di typescript branch .

Itu masih menggunakan ekspor default, tetapi saya mengujinya dengan Webpack 4 dan TypeScript 2.7.2 dan berfungsi jika saya mengimpornya menggunakan import SignaturePad from 'signature_pad' .

Akan luar biasa untuk mendapatkan umpan balik, jika berhasil, jika ada masalah, dll.

szimek pada 13 Mar 2018

👍7

Semua 20 komentar

Jika tidak berhasil, Anda dapat mencoba mengimpor langsung dari signature_pad/dist/signature_pad.mjs .

Versi berikutnya kemungkinan besar akan ditulis ulang di naskah - lihat naskah cabang. Saya "hanya" perlu mencari waktu luang untuk membersihkannya dan mencari tahu konfigurasi rollup untuk semua versi (umd es5, es6, non-minified, minified, dll.) dan cara menghasilkan file deklarasi TS.

szimek pada 5 Feb 2018

👍3

@szimek Dapat

import * as SignaturePad from 'signature_pad'; Memberi SignaturePad bukan konstruktor

import * as SignaturePad from 'signature_pad/dist/signature_pad.mjs'; Memberi SignaturePad bukan konstruktor

const SignaturePad = require('signature_pad'); Memberi SignaturePad bukan konstruktor

import SignaturePad from 'signature_pad'; Berfungsi, tetapi memberikan kesalahan TypeScript

strongui pada 6 Feb 2018

👍1

Apa sebenarnya yang ada di variabel SignaturePad dalam kasus ini? Kode di signature_pad/dist/signature_pad.mjs hanya dibundel bersama kode sumber ES6 dengan ekspor default. Seharusnya hanya berfungsi, kecuali TS tidak menangani ekspor default.

szimek pada 6 Feb 2018

@szimek TS menangani ekspor default dengan baik, masalahnya ada di definisi index.d.ts @types/signature_pad.

strongui pada 6 Feb 2018

Tetapi perpustakaan ini tidak menyediakan file deklarasi TypeScript.

szimek pada 6 Feb 2018

@szimek bukan? Lalu apa yang diinstal ketika Anda melakukan install @types/signature_pad --save-dev , pasti ada file deklarasi TS. Bukankah itu dibuat oleh orang yang sama??

strongui pada 6 Feb 2018

Saya tidak tahu ;) Anda dapat melihat semua file yang diterbitkan misalnya di sini: https://www.jsdelivr.com/package/npm/signature_pad.

szimek pada 6 Feb 2018

@szimek Saya baru saja memperhatikan komentar saya sebelumnya tidak menunjukkan seluruh baris instal, karena karakter @ . Saya sudah mengeditnya. Pada dasarnya jika Anda melakukannya install @types/signature_pad --save-dev , Anda akan melihat definisi diinstal di folder @types/signature_pad . Aku ingin tahu siapa yang melakukan itu? Mungkin kita perlu menghubungi mereka dan memperbaikinya dan menggabungkannya ke dalam paket default lol

strongui pada 6 Feb 2018

Sepertinya Anda menggunakan file definisi dari PastiTyped .

Jika saya membaca deklarasi dengan benar, ini mungkin berhasil (maaf tidak mencobanya, saya baru saja menemukan masalah ini):
import { SignaturePad } from 'signature_pad';

MrJoe pada 9 Feb 2018

👎2

@strongui Saya mendapat kesalahan yang sama seperti Anda. Saya mencoba semuanya di komentar,
Saya juga mencoba komentar Anda @szimek . Benar-benar tidak berhasil.
Saya menggunakan pad tanda tangan di file JS sekarang tetapi saya harus mengubah tempat ke TS
Saya menggunakan versi simpul v6.11.2 dan versi TypeScript adalah v2.6.2
npm version { npm: '3.10.10', ares: '1.10.1-DEV', node: '6.11.2', zlib: '1.2.11' }

Selman-EE pada 13 Feb 2018

Saya baru saja mencobanya menggunakan TypeScript 2.7.2 dan berfungsi dengan baik.

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

Jalankan yarn add signature_pad typescript webpack ts-loader && yarn run webpack . Kemudian buka index.html dan itu akan berfungsi.

szimek pada 18 Feb 2018

🎉1 👍1

@szimek terima kasih ini bekerja untuk saya

Selman-EE pada 23 Feb 2018

Bekerja untuk saya menggunakan TypeScript 2.4.2 dan mengimpornya seperti @szimek di komentar di atas.

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 pada 26 Feb 2018

Bagi mereka yang mendapatkan SignaturePad bukan kesalahan default , seperti:
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

onurkose pada 2 Mar 2018

👍3

Itu masih menggunakan ekspor default, tetapi saya mengujinya dengan Webpack 4 dan TypeScript 2.7.2 dan berfungsi jika saya mengimpornya menggunakan import SignaturePad from 'signature_pad' .

Akan luar biasa untuk mendapatkan umpan balik, jika berhasil, jika ada masalah, dll.

szimek pada 13 Mar 2018

👍7

Kami menggunakan versi beta di aplikasi TypeScript 2.8 dan berfungsi dengan baik.

Hanya masalah kecil:

Mendapatkan kesalahan yang tidak tertangani di ujung sentuh karena const touch = event.targetTouches[0] tidak ditentukan.
Metode toDataURL harus memiliki argumen yang ditandai sebagai opsional jika Anda ingin mencocokkan metode toDataURL kanvas.

StevenBarnettST pada 12 Apr 2018

❤1

@StevenBarnettST Diperbaiki! Terima kasih telah melaporkan masalah ini. Besok saya akan merilis versi beta baru.

szimek pada 12 Apr 2018

Apa cara yang benar untuk mengikat TYPE/antarmuka signaturepad ke variabel, untuk pelengkapan otomatis dan pemeriksaan ts?

Ross-Rawlins pada 19 Feb 2019

Bagi mereka yang mendapatkan SignaturePad bukan kesalahan default , seperti:
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

Ini bekerja untuk saya. Terima kasih banyak! (Symfony Webpack Encore)