Signature_pad: لا يمكن الاستيراد في TypeScript

تم إنشاؤها على ٥ فبراير ٢٠١٨ · 20تعليقات · مصدر: szimek/signature_pad

وفقًا للوصف ، يجب أن أكون قادرًا على استيراد هذه الوحدة إلى TypeScript على النحو التالي:
import * as SignaturePad from 'signature_pad';

ترفض TypeScript التعرف على هذا على أنه صالح لعدم وجود وحدة نمطية مُصدَّرة. الرجاء تصدير وحدة نمطية للتوافق مع TypeScript.

هنا موضوع تجاوز سعة المكدس بخصوص هذا.

more info

مصدر

jamie-thul

👍2

التعليق الأكثر فائدة

لقد أصدرت للتو إصدارًا تجريبيًا تمت إعادة كتابته في TypeScript. يتم توفير ملفات التصريح الآن بواسطة المكتبة. يمكنك تثبيته باستخدام yarn add signature_pad@beta . لا يزال كود المصدر متاحًا فقط في فرع typescript .

لا يزال يستخدم التصدير الافتراضي ، لكنني اختبرته باستخدام Webpack 4 و TypeScript 2.7.2 وهو يعمل إذا قمت باستيراده باستخدام import SignaturePad from 'signature_pad' .

سيكون من الرائع الحصول على بعض التعليقات ، إذا نجحت ، إذا كانت هناك أية مشكلات وما إلى ذلك.

szimek في ١٣ مارس ٢٠١٨

👍7

ال 20 كومينتر

إذا لم ينجح الأمر ، يمكنك محاولة الاستيراد مباشرة من signature_pad/dist/signature_pad.mjs .

من المرجح أن تكون إعادة كتابة النسخة المقبلة في نسخة مطبوعة على الآلة الكاتبة - راجع نسخة مطبوعة على الآلة الكاتبة فرع. أحتاج "فقط" إلى إيجاد بعض الوقت لتنظيفه واكتشاف تكوين التجميع لجميع الإصدارات (umd es5 ، es6 ، non-minified ، minified ، إلخ.) وكيفية إنشاء ملفات إقرار TS.

szimek في ٥ فبراير ٢٠١٨

👍3

szimek هل يمكن أن تؤكد أن هذا لا يزال لا يعمل داخل ملف .tsx.

import * as SignaturePad from 'signature_pad'; Gives SignaturePad ليس مُنشئًا

import * as SignaturePad from 'signature_pad/dist/signature_pad.mjs'; Gives SignaturePad ليس مُنشئًا

const SignaturePad = require('signature_pad'); Gives SignaturePad ليس مُنشئًا

import SignaturePad from 'signature_pad'; يعمل ، لكنه يعطي خطأً مطبوعًا

strongui في ٦ فبراير ٢٠١٨

👍1

ما هو بالضبط في المتغير SignaturePad في هذه الحالة؟ الكود الموجود في signature_pad/dist/signature_pad.mjs يتم تجميعه ببساطة مع كود مصدر ES6 مع تصدير افتراضي. يجب أن يعمل فقط ، ما لم يكن TS لا يتعامل مع الصادرات الافتراضية.

szimek في ٦ فبراير ٢٠١٨

يعالج szimek TS عمليات التصدير الافتراضية بشكل جيد ، والمشكلة تكمن في تعريفات @ types / signature_pad index.d.ts.

strongui في ٦ فبراير ٢٠١٨

لكن هذه المكتبة لا توفر ملفات إعلان TypeScript.

szimek في ٦ فبراير ٢٠١٨

szimek لا؟ ثم ما يتم تثبيته عندما تفعل install @types/signature_pad --save-dev ، هناك بالتأكيد ملفات إقرار TS. أليس هؤلاء هم نفس الناس ؟؟

strongui في ٦ فبراير ٢٠١٨

لا أعرف ؛) يمكنك مشاهدة جميع الملفات التي يتم نشرها ، على سبيل المثال هنا: https://www.jsdelivr.com/package/npm/signature_pad.

szimek في ٦ فبراير ٢٠١٨

szimek لقد لاحظت للتو تعليقي من قبل لم يُظهر سطر التثبيت بالكامل ، بسبب الحرف @ . لقد قمت بتحريره. بشكل أساسي ، إذا قمت بإجراء install @types/signature_pad --save-dev ، فسترى التعريفات المثبتة في المجلد @types/signature_pad . أتساءل من يفعل ذلك؟ ربما نحتاج إلى الاتصال بهم وإصلاحه ودمجها في الحزمة الافتراضية لول

strongui في ٦ فبراير ٢٠١٨

يبدو أنك تستخدم ملف تعريف من DefinitelyTyped .

إذا قرأت الإعلان بشكل صحيح ، فقد ينجح هذا (آسف لم أجربه ، لقد عثرت للتو على هذه المشكلة):
import { SignaturePad } from 'signature_pad';

MrJoe في ٩ فبراير ٢٠١٨

👎2

strongui حصلت على نفس الخطأ مثلك. لقد جربت كل شيء في التعليقات ،
لقد جربت أيضًا تعليقاتك szimek . قطعا لم يعمل.
أنا أستخدم لوحة التوقيع في ملف JS الآن ولكن لا بد لي من تغيير المكان إلى TS
أنا أستخدم إصدار العقدة v6.11.2 وإصدار 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 في ١٣ فبراير ٢٠١٨

لقد جربته للتو باستخدام TypeScript 2.7.2 وهو يعمل بشكل جيد.

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

تشغيل yarn add signature_pad typescript webpack ts-loader && yarn run webpack . ثم افتح index.html و يجب أن يعمل.

szimek في ١٨ فبراير ٢٠١٨

🎉1 👍1

szimek شكرا لأنه يعمل بالنسبة لي

Selman-EE في ٢٣ فبراير ٢٠١٨

يعمل معي باستخدام TypeScript 2.4.2 واستيراده مثل szimek في التعليق أعلاه.

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 في ٢٦ فبراير ٢٠١٨

بالنسبة لأولئك الذين يحصلون على SignaturePad ليس خطأ في افتراضيًا ، على النحو التالي:
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

onurkose في ٢ مارس ٢٠١٨

👍3

سيكون من الرائع الحصول على بعض التعليقات ، إذا نجحت ، إذا كانت هناك أية مشكلات وما إلى ذلك.

szimek في ١٣ مارس ٢٠١٨

👍7

نحن نستخدم الإصدار التجريبي في تطبيق TypeScript 2.8 وهو يعمل بشكل جيد.

فقط قضايا بسيطة:

الحصول على خطأ غير معالج عند اللمس لأن const touch = event.targetTouches[0] غير محدد.
يجب أن يتم وضع علامة اختيارية على الوسيطات الخاصة بالطريقة toDataURL إذا كنت تريد مطابقة طريقة اللوحة القماشية toDataURL .

StevenBarnettST في ١٢ أبريل ٢٠١٨

❤1

تضمين التغريدة شكرا للإبلاغ عن هذه القضايا. غدا سأطلق نسخة تجريبية جديدة.

szimek في ١٢ أبريل ٢٠١٨

ما هي الطريقة الصحيحة لربط TYPE / واجهة Signaturepad بمتغير ، للإكمال التلقائي وفحص ts؟

Ross-Rawlins في ١٩ فبراير ٢٠١٩

بالنسبة لأولئك الذين يحصلون على SignaturePad ليس خطأ في افتراضيًا ، على النحو التالي:
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

هذا يعمل بالنسبة لي. شكرا جزيلا! (Symfony Webpack Encore)