Question

我无法弄清楚如何为特定的npm模块创建声明。即bbcode-to-react。

主文件表示为index.js，只有一些代码：

'use strict';

var _parser = require('./parser');

var _parser2 = _interopRequireDefault(_parser);

var _tag = require('./tag');

var _tag2 = _interopRequireDefault(_tag);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

module.exports = new _parser2.default();
module.exports.Parser = _parser2.default;
module.exports.Tag = _tag2.default;

'./parser'和'./tag'都包含我需要的类。

我无法从打字稿文档中找出，如何在d.ts文件中声明/导出此设置。我能找到的与module.exports相关的最好的是关于导出单个类或函数，但我需要Parser和Tag类。

Answer 1

以下是bbcode-to-react的输入：

declare module 'bbcode-to-react' {
    import * as React from 'react';

    function toReact(input: string): JSX.Element;
    function registerTag(name: string, tag: typeof Tag): void;

    class Tag {
        name: string;
        parent: JSX.Element;
        text: string;
        params: { [index: string]: any };
        children: JSX.Element[];

        getComponents(): JSX.Element;
        getContent(raw?: boolean): string;
        toText(contentAsHTML?: boolean): string;
        toHTML(): string;
        toReact(): JSX.Element;
    }
}

将此代码放在bbcode-to-react.d.ts文件中。

确保您已安装@types/react和@types/react-dom

使用此输入的示例：

import * as React from 'react';
import * as parser from 'bbcode-to-react';
import { Tag } from 'bbcode-to-react';
import { renderToString } from 'react-dom/server';

const Example1 = (props: any) => {
    return (
        <p>{parser.toReact('[b]strong[/b]')}</p>
    );
}

console.log(renderToString(<Example1 />));

class YoutubeTag extends Tag {
    toReact() {
        const attributes = {
            src: this.getContent(true),
            width: this.params.width || 420,
            height: this.params.height || 315,
        };
        return (
            <iframe
                {...attributes}
                frameBorder="0"
                allowFullScreen
            />
        );
    }
}

class BoldTag extends Tag {
    toReact() {
        return (
            <b>{this.getComponents()}</b>
        );
    }
}

parser.registerTag('youtube', YoutubeTag);
parser.registerTag('b', BoldTag);

const Example2 = (props: any) => {
    return (
        <p>{parser.toReact('[youtube width="400"]https://www.youtube.com/embed/AB6RjNeDII0[/youtube]')}</p>
    );
}

console.log(renderToString(<Example2 />));

Answer 2

一个拉取请求刚刚在DefinitelyTyped上合并了。参见this link。现在，任何想将bbcode-to-react模块使用打字稿的人都可以轻松地完成

npm install --dev @types/bbcode-to-react

强力打字。

也欢迎您通过在DefinitelyTyped上打开更多拉取请求来提供帮助。希望能对您有所帮助。

如何为npm模块创建声明？

2 个答案: