用于非类型化 npm 模块的 TypeScript 自定义声明文件

Question

我正在使用来自 npm 的名为 shiitake 的 React 组件到我使用 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] Invalid module name in augmentation. Module 'shiitake' resolves to an untyped module at 'd:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js', which cannot be augmented.

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

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

[ts] Could not find a declaration file for module 'shiitake'. 'd:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js' implicitly has an 'any' type.

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

Answer 1

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

模块中 declare module '...' { } 形式的声明是一种扩充。有关详细信息，请参阅 Typescript Module Augmentation。

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

declare module 'shiitake' {

    import * as React from 'react';

    export interface ShiitakeProps {
        lines: number;
    }

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

Answer 2

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

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

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

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

Answer 3

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

用于非类型化 npm 模块的 TypeScript 自定义声明文件

TypeScript custom declaration files for untyped npm modules

typescript

ecmascript-6

reactjs

visual-studio-code

typescript2.0