为第 3 方节点模块创建打字稿定义文件 (react-signature-canvas)

Question

我将使用 React-Signature-Canvas 作为示例。

react-signature-canvas 节点模块安装在我的项目目录中如下所示：

react-signature-canvas
    build
         index.js
    src
        bezier.js
        index.js
        point.js
    LICENSE
    package.json
    README.md

index.js 文件看起来具有以下签名：

export default class SignatureCanvas extends Component {

这看起来很简单。我想我会在模块的根目录中创建一个 index.d.ts，让它工作，然后找出一个更好的地方将它存储在我的项目中（即，在 node_modules 之外，在gitignore).

但我似乎无法让它工作。我的打字文件如下所示：'

declare module 'react-signature-canvas'
{
    interface ISignatureCanvasProps
    {
        velocityFilterWeight?: number;
        minWidth?: number;
        maxWidth?: number;
        dotSize?: number;
        penColor?: string;
        backgroundColor?: string;
        onEnd?: () => void;
        onBegin?: () => void;
        canvasProps?: any;
    }

    class SignatureCanvas extends React.Component<ISignatureCanvasProps, any>
    {
    }

    export = SignatureCanvas;
}

我正在尝试像这样使用签名板：

import * as React from 'react';
import SignatureCanvas = require('react-signature-canvas');

export class DeliverySignature extends React.Component<any, undefined>
{
    public render(): JSX.Element
    {
        return (
            <div>
                <h4>Signature</h4>
                <SignatureCanvas
                    canvasProps={{width: 500, height: 200}} />
            </div>
        );
    }
}

一切都编译得很好，Webpack 似乎很开心。但是当我去加载页面时，我得到

Uncaught (in promise) TypeError: Cannot read property 'replaceChild' of null at Function.replaceChildWithTree (DOMLazyTree.js:69) at Object.dangerouslyReplaceNodeWithMarkup (Danger.js:41) at Object.dangerouslyReplaceNodeWithMarkup [as replaceNodeWithMarkup] (DOMChildrenOperations.js:124) at ReactCompositeComponentWrapper._replaceNodeWithMarkup (ReactCompositeComponent.js:784) at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:774) at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:724) at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:645) at ReactCompositeComponentWrapper.performUpdateIfNecessary (ReactCompositeComponent.js:561) at Object.performUpdateIfNecessary (ReactReconciler.js:157) at runBatchedUpdates (ReactUpdates.js:150)

我在这里错过了什么？我假设我输入错误。

谢谢。

Answer 1

TypeScript 与您的错误无关。声明文件的目的是帮助编译器帮助你，但你的代码可以运行没有它们。

但是，您的声明文件不正确。它不应该包含任何实现。 {} 也是一种实现。考虑 this question 来解决这个问题。但同样，这不是您错误的根源。

此外，命名约定是 filename.d.ts，而不是 .dt.ts

看来您导入正确。您可以将其更改为：

import * as SignatureCanvas from 'react-signature-canvas';

但其实是一样的，只不过后者是兼容ES6的。

Answer 2

如您在 this pull request 中所见，react-signature-canvas 的类型已添加到 DefinitelyTyped 库中。

您可以通过执行以下命令将其添加到您的项目中：

yarn add @types/react-signature-canvas

或（使用 NPM）

npm i @types/react-signature-canvas.

为第 3 方节点模块创建打字稿定义文件 (react-signature-canvas)

Create a typescript definition file for a 3rd party node module (react-signature-canvas)

npm

typescript

reactjs

typescript-typings