导出CommonJS模块的其他接口(Typescript)

时间:2017-07-30 19:49:42

标签: javascript typescript typescript-typings typescript2.0 commonjs

我试图在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();
    }
    ....
}

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

1 个答案:

答案 0 :(得分:3)

这里的问题很容易解决。问题是,在导出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'一样,我们污染了环境外部模块的全局命名空间(我知道这是一口气)。虽然暂时不太可能在您的特定项目中引起冲突,但这意味着如果有人为@types添加了google-kgsearch个包,那么您的依赖性又依赖于此@types如果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发送拉取请求,将您的打字(第二个版本)添加到名为 index.d.ts 的文件中。此外,如果维护者不希望包含它们,请考虑通过向DefinitelyTyped发送拉取请求来创建@types/google-kgsearch