无类型 npm 模块的 TypeScript 自定义声明文件

Question

我正在将一个名为shiitake的 React 组件从 npm 消耗到我使用 TypeScript 的项目中。 该库没有 TypeScript 声明，所以我想我会写一个。 声明文件如下所示（它可能不完整但不要太担心）：

import * as React from 'react';

declare module 'shiitake' {

    export interface ShiitakeProps {
        lines: number;
    }

    export default class Shiitake extends React.Component<ShiitakeProps, any> { 
    }
}

我已经把它放在./typings/shiitake.d.ts文件和 VS Code 上，我看到以下错误：

[ts] 扩充中的模块名称无效。 模块 'shiitake' 解析为位于 'd:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js' 的无类型模块，无法扩充。

在消费方面，即使使用上述声明，我仍然遇到相同的错误（因为我没有打开noImplicitAny编译器开关）：

/// <reference path="../../../../typings/shiitake.d.ts" />
import * as React from 'react';
import Shiitake from 'shiitake';

[ts] 找不到模块“shiitake”的声明文件。 'd:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js' 隐式具有 'any' 类型。

获取此类模块的声明文件的标准原因是通过@types/方式，并且效果很好。 但是，我无法使自定义类型工作。 有什么想法吗？

Answer 1

声明declare module 'shiitake'; 应该在全局范围内。 即非模块中的顶级声明（其中模块是至少具有一个顶级import或export ）。

declare module '...' { }形式的declare module '...' { }是一种扩充。 有关更多详细信息，请参阅Typescript 模块增强。

所以你希望这个文件看起来像这样：

declare module 'shiitake' {

    import * as React from 'react';

    export interface ShiitakeProps {
        lines: number;
    }

    export default class Shiitake extends React.Component<ShiitakeProps, any> { 
    }
}

Answer 2

根据我的经验，如果定义文件在模块定义之外声明了任何导出或导入，那么它就会以这种方式失败。 如果您使用具有自动导入功能的 IDE，请注意！

Answer 3

我今天遇到了同样的问题。

结果我在模块声明之外粘贴了导出的接口。 我用作模板的打字文件在文件末尾有私有接口。

所以我导出的接口是在模块声明之外声明的。 这是驱动打字稿编译器的坚果。

一旦我将接口移动到模块边界，一切都得到了修复。