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）。

但我似乎无法让它发挥作用。我的打字文件如下所示：＆＃39;

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似乎很开心。但是当我去加载页面时，我得到了

未捕获（承诺）TypeError：无法读取属性＆＃39; replaceChild＆＃39; 为null 在Function.replaceChildWithTree（DOMLazyTree.js：69）在Object.dangerouslyReplaceNodeWithMarkup（Danger.js：41）在Object.dangerouslyReplaceNodeWithMarkup [as replaceNodeWithMarkup]（DOMChildrenOperations.js：124）在ReactCompositeComponentWrapper._replaceNodeWithMarkup（ReactCompositeComponent.js：784）在ReactCompositeComponentWrapper._updateRenderedComponent（ReactCompositeComponent.js：774）在ReactCompositeComponentWrapper._performComponentUpdate（ReactCompositeComponent.js：724）在ReactCompositeComponentWrapper.updateComponent（ReactCompositeComponent.js：645）在ReactCompositeComponentWrapper.performUpdateIfNecessary（ReactCompositeComponent.js：561） at Object.performUpdateIfNecessary（ReactReconciler.js：157）在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

OR（使用NPM）

npm i @types/react-signature-canvas。

为第三方节点模块创建一个打字稿定义文件（react-signature-canvas）

2 个答案: