Signature_pad: TypeScriptでインポートできません

作成日 2018年02月05日 · 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ブランチでのみ利用可能です。

引き続きデフォルトのエクスポートを使用しますが、Webpack4とTypeScript2.7.2でテストし、 import SignaturePad from 'signature_pad'を使用してインポートすると機能します。

それが機能する場合、問題がある場合など、いくつかのフィードバックを得るのは素晴らしいことです。

szimek 2018年03月13日

👍7

全てのコメント20件

動作しない場合は、 signature_pad/dist/signature_pad.mjsから直接インポートしてみてください。

次のバージョンはTypeScriptで書き直される可能性が高いです-typescriptブランチを参照してください。私はそれをクリーンアップし、すべてのバージョン（umd es5、es6、非縮小、縮小など）のロールアップ構成とTS宣言ファイルを生成する方法を理解するための空き時間を見つける必要があります。

szimek 2018年02月05日

👍3

@szimekこれが.tsxファイル内ではまだ機能しないことを

import * as SignaturePad from 'signature_pad';はSignaturePadがコンストラクターではないことを示します

import * as SignaturePad from 'signature_pad/dist/signature_pad.mjs';はSignaturePadがコンストラクターではないことを示します

const SignaturePad = require('signature_pad');はSignaturePadがコンストラクターではないことを示します

import SignaturePad from 'signature_pad';は機能しますが、コンソールでタイプスクリプトエラーが発生します：... node_modules / @ types / signature_pad / index.d.ts 'はモジュールではありません。

strongui 2018年02月06日

👍1

この場合、 SignaturePad変数には正確に何が含まれていますか？ signature_pad/dist/signature_pad.mjsコードは、デフォルトのエクスポートでES6ソースコードにバンドルされているだけです。 TSがデフォルトのエクスポートを処理しない場合を除いて、これは正常に機能するはずです。

szimek 2018年02月06日

@szimek TSはデフォルトのエクスポートを問題なく処理します。問題は、@ types / signature_padindex.d.tsの定義にあります。

strongui 2018年02月06日

ただし、このライブラリはTypeScript宣言ファイルを提供していません。

szimek 2018年02月06日

@szimekそうではありませんか？次に、 install @types/signature_pad --save-devを実行するとインストールされるものは、間違いなくTS宣言ファイルです。それらは同じ人にされていませんか？

strongui 2018年02月06日

わかりません;）公開されているすべてのファイルを確認できます（例： https ：

szimek 2018年02月06日

@szimek @文字が原因で、インストール行全体が表示されなかった前にコメントに気づきました。編集しました。基本的に、 install @types/signature_pad --save-devを実行すると、定義が@types/signature_padフォルダーにインストールされていることがわかります。誰がやってるのかな？たぶん私たちは彼らに連絡してそれを修正し、それをデフォルトのパッケージにマージする必要があります笑

strongui 2018年02月06日

DefinitelyTypedの定義ファイルを使用しているようです。

宣言を正しく読んだ場合、これは機能する可能性があります（申し訳ありませんが、試してみませんでした。この問題に遭遇しただけです）。
import { SignaturePad } from 'signature_pad';

MrJoe 2018年02月09日

👎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 2018年02月13日

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 2018年02月18日

🎉1 👍1

@szimekありがとう

Selman-EE 2018年02月23日

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 2018年02月26日

取得している場合、 SignaturePadはrequirejsの内部でははなく、 webpack（またはlaravelミックス）はデフォルトで次のように使用し
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

onurkose 2018年03月02日

👍3

それが機能する場合、問題がある場合など、いくつかのフィードバックを得るのは素晴らしいことです。

szimek 2018年03月13日

👍7

TypeScript 2.8アプリでベータ版を使用しており、正常に動作します。

ほんの小さな問題：

const touch = event.targetTouches[0]が未定義であるため、タッチエンドで未処理のエラーが発生します。
toDataURLメソッドでは、canvasのtoDataURLメソッドと一致させる場合は、引数をオプションとしてマークする必要があります。

StevenBarnettST 2018年04月12日

❤1

@StevenBarnettST修正済み！これらの問題を報告していただきありがとうございます。明日、新しいベータ版をリリースします。

szimek 2018年04月12日

オートコンプリートとtsチェックのために、signaturepadのTYPE /インターフェイスを変数にバインドする正しい方法は何ですか？

Ross-Rawlins 2019年02月19日

取得している場合、 SignaturePadはrequirejsの内部でははなく、 webpack（またはlaravelミックス）はデフォルトで次のように使用し
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

これは私のために働きます。どうもありがとう！（Symfony Webpack Encore）

Flinsch 2019年03月24日

私はそれを機能させるために回避策を実行しました：
var SignaturePad = require('signature_pad/dist/signature_pad.js');

sharabiania 2019年09月30日

このページは役に立ちましたか？

0 / 5 - 0 評価

Signature_pad: TypeScriptでインポートできません

最も参考になるコメント

全てのコメント20件

関連する問題