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, non-minified, minified 등)에 대한 롤업 구성과 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'; 작동하지만 콘솔에 typescript 오류가 발생합니다 . ...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일

몰라 ;) 게시 중인 모든 파일을 볼 수 있습니다 . 예:

szimek 에 2018년 02월 06일

@szimek 나는 @ 문자 때문에 전체 설치 라인을 표시하지 않기 전에 내 주석을 발견했습니다. 수정했습니다. 기본적으로 install @types/signature_pad --save-dev 하면 @types/signature_pad 폴더에 설치된 정의를 볼 수 있습니다. 누가 그런 짓을 하는지 궁금하다. 어쩌면 우리는 그들에게 연락하여 수정하고 기본 패키지에 병합해야 할 수도 있습니다.

strongui 에 2018년 02월 06일

확실히 Typed 의 정의 파일을 사용하고 있는 것 같습니다.

선언을 올바르게 읽으면 작동할 수 있습니다(시도하지 않아 죄송합니다. 방금 이 문제를 발견했습니다).
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

여전히 기본 내보내기를 사용하지만 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 검사를 위해 서명 패드의 TYPE/인터페이스를 변수에 바인딩하는 올바른 방법은 무엇입니까?

Ross-Rawlins 에 2019년 02월 19일

그들을 위해 SignaturePad는 requirejs 및 webpack(또는 laravel mix)의 후드 아래에서 가 아닙니다. 다음과 같이 default 와 함께 사용하십시오.
new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

이것은 나를 위해 작동합니다. 정말 감사합니다! (심포니 웹팩 앙코르)

Flinsch 에 2019년 03월 24일

작동하도록 해결 방법을 수행했습니다.
var SignaturePad = require('signature_pad/dist/signature_pad.js');

sharabiania 에 2019년 09월 30일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Signature_pad: TypeScript에서 가져올 수 없음

가장 유용한 댓글

모든 20 댓글

관련 문제