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分支上可用。

它仍然使用默认导出，但我使用 Webpack 4 和 TypeScript 2.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' is not a module。

strongui 于 2018-02-06

👍1

在这种情况下， SignaturePad变量究竟是什么？ signature_pad/dist/signature_pad.mjs中的代码只是将 ES6 源代码与默认导出捆绑在一起。它应该可以正常工作，除非 TS 不处理默认导出。

szimek 于 2018-02-06

@szimek TS 可以很好地处理默认导出，问题出在 @types/signature_pad index.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文件夹中安装的定义。我想知道是谁在做那件事？也许我们需要联系他们并修复它并将其合并到默认包中 lol

strongui 于 2018-02-06

看起来您正在使用来自绝对类型的定义文件。

如果我正确阅读了声明，这可能会起作用（抱歉没有尝试，我只是偶然发现了这个问题）：
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 mix）引擎盖下的default ，如：
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

onurkose 于 2018-03-02

👍3

我刚刚发布了一个用 TypeScript 重写的测试版。声明文件现在由库提供。您可以使用yarn add signature_pad@beta安装它。源代码仍然仅在typescript分支上可用。

它仍然使用默认导出，但我使用 Webpack 4 和 TypeScript 2.7.2 对其进行了测试，如果我使用import SignaturePad from 'signature_pad'导入它，它就可以工作。

如果它有效，如果有任何问题等，获得一些反馈会很棒。

szimek 于 2018-03-13

👍7

我们在 TypeScript 2.8 应用程序中使用测试版，它运行良好。

只是小问题：

由于const touch = event.targetTouches[0]未定义，因此在触摸端出现未处理的错误。
如果您想匹配画布的toDataURL方法，则toDataURL方法应该将其参数标记为可选。

StevenBarnettST 于 2018-04-12

❤1

@StevenBarnettST固定！感谢您报告这些问题。明天我将发布一个新的测试版。

szimek 于 2018-04-12

将签名板的类型/接口绑定到变量以进行自动完成和 ts 检查的正确方法是什么？

Ross-Rawlins 于 2019-02-19

对于那些正在获取SignaturePad 不是requirejs 和 webpack（或 laravel mix）引擎盖下的default ，如：
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条评论

相关问题