为 CommonJS 模块 (Typescript) 导出附加接口

Question

我正在尝试在 Typescript/React 中使用一个简单的 JS 库，但无法为其创建定义文件。该库是 google-kgsearch (https://www.npmjs.com/package/google-kgsearch)。它以 CommonJS 样式导出单个函数。我可以成功导入和调用该函数，但无法弄清楚如何将参数类型引用到结果回调。

这里是大部分库代码：

function KGSearch (api_key) {
  this.search = (opts, callback) => {
    ....
    request({ url: api_url, json: true }, (err, res, data) => {
      if (err) callback(err)
      callback(null, data.itemListElement)
    })
    ....
    return this
  }
}

module.exports = (api_key) => {
  if (!api_key || typeof api_key !== 'string') {
    throw Error(`[kgsearch] missing 'api_key' {string} argument`)
  }

  return new KGSearch(api_key)
}

这是我尝试对其建模的尝试。大多数接口对服务返回的结果进行建模：

declare module 'google-kgsearch' {

    function KGSearch(api: string): KGS.KGS;
    export = KGSearch;

    namespace KGS {

        export interface SearchOptions {
            query: string,
            types?: Array<string>,
            languages?: Array<string>,
            limit?: number,
            maxDescChars?: number
        }

        export interface EntitySearchResult {
            "@type": string,
            result: Result,
            resultScore: number
        }

        export interface Result {
            "@id": string,
            name: string,
            "@type": Array<string>,
            image: Image,
            detailedDescription: DetailedDescription,
            url: string
        }

        export interface Image {
            contentUrl: string,
            url: string
        }

        export interface DetailedDescription {
            articleBody: string,
            url: string,
            license: string
        }

        export interface KGS {
            search: (opts: SearchOptions, callback: (err: string, items: Array<EntitySearchResult>) => void) => KGS.KGS;
        }
    }
}

我的问题是我无法从另一个文件引用搜索回调返回的 KGS.EntitySearchResult 数组。这是我对图书馆的使用：

import KGSearch = require('google-kgsearch');
const kGraph = KGSearch(API_KEY);

interface State {
    value: string;
    results: Array<KGS.EntitySearchResult>; // <-- Does not work!!
}

class GKGQuery extends React.Component<Props, object> {    

    state : State;

    handleSubmit(event: React.FormEvent<HTMLFormElement>) {
        kGraph.search({ query: this.state.value }, (err, items) => { this.setState({results: items}); });
        event.preventDefault();
    }
    ....
}

非常感谢任何关于如何使结果接口对我的调用代码可见而不弄乱默认导出的建议。

Answer 1

这里的问题很容易解决。问题是当您导出 KGSearch 时，您还没有导出包含这些类型的名称空间 KGS。有几种方法可以解决这个问题，但我推荐的方法是利用 Declaration Merging

您的代码将更改如下

declare module 'google-kgsearch' {

    export = KGSearch;

    function KGSearch(api: string): KGSearch.KGS;
    namespace KGSearch {
        // no changes.
    }
}

然后从消费代码

import KGSearch = require('google-kgsearch');
const kGraph = KGSearch(API_KEY);

interface State {
    value: string;
    results: Array<KGSearch.EntitySearchResult>; // works!!
}

不幸的是，每当我们引入环境外部模块声明时，就像我们在全局范围内编写 declare module 'google-kgsearch' 一样，我们污染了环境外部模块的全局命名空间（我知道这是一个满口）。虽然暂时不太可能在你的具体项目中引起冲突，但这意味着如果有人为 google-kgsearch 添加了一个 @types 包并且你有一个依赖项又依赖于这个 @types package or 如果 google-kgsearch 每个都开始发布自己的类型，我们将运行出错。

为了解决这个问题，我们可以使用非环境模块来声明我们的自定义声明，但这涉及更多的配置。

下面是我们如何解决这个问题

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "." // if not already set
    "paths": { // if you already have this just add the entry below
      "google-kgsearch": [
        "custom-declarations/google-kgsearch"
      ]
    }
  }
}

custom-declarations/google-kgsearch.d.ts（名称无所谓只需要匹配路径）

// do not put anything else in this file

// note that there is no `declare module 'x' wrapper`
export = KGSearch;

declare function KGSearch(api: string): KGSearch.KGS;
declare namespace KGSearch {
    // ...
}

通过将其定义为外部模块而不是环境外部模块，使我们免受版本冲突和传递依赖性问题的影响。

最后要认真考虑的一件事是向 krismuniz/google-kgsearch that adds your typings (the second version) in a file named index.d.ts. Also, if the maintainers do not wish to include them, consider creating an @types/google-kgsearch package by sending a pull request to DefinitelyTyped

发送拉取请求

为 CommonJS 模块 (Typescript) 导出附加接口

Export additional interfaces for CommonJS module (Typescript)

javascript

commonjs

typescript

typescript-typings

typescript2.0