如何为 npm 模块创建声明？答案

【问题标题】：How to create a declaration for an npm module?如何为 npm 模块创建声明？
【发布时间】：2017-04-05 22:19:06
【问题描述】：

我不知道如何为特定的 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”都包含我需要的类。

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

【问题讨论】：

标签： typescript typescript-typings

【解决方案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 />));

【讨论】：

谢谢你。我没想到有人会为我写它，但现在我可以看到它，我明白为什么它会以这种特殊方式设置。
很高兴为您提供帮助！ :)

【解决方案2】：

一个拉取请求刚刚在DefinitelyTyped 上合并。见this link。现在任何想使用带有bbcode-to-react 模块的打字稿的人都可以轻松做到

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

用于强类型。

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

【讨论】：