如何为具有默认导出的模块创建TSD？

Question

我正试图为fscreen.js创建一个TSD，但我很难理解这是一个默认的导出。

根据关于打字本网站的指南，它说：

如果您的模块不可调用或不可构造，请使用module.d.ts文件。

由于情况如此，我使用的是module.d.ts模板。

因此，index.d.ts文件看起来如下：

export function requestFullscreen(element: any): void;
export function requestFullscreenFunction(element: any): () => void;
export function exitFullscreen();
export function addEventListener(type: string, handler: () => void, options: any): void;
export var fullscreenEnabled: boolean;
export var fullscreenElement: any;
export var onfullscreenchange: (event: any) => void;
export var onfullscreenerror: (event: any) => void;

消费：

import * as fscreen from 'fscreen';

它编译得很好。但是，当我在运行时检查fscreen的实际值时，如下所示：

​

​

我还搜索了其他问题，其他一些帖子建议我在我的TSD中将它定义为：

export default class fscreen {
  fullscreenElement: any;
  ...
}

但是它没有编译，而且它似乎认为fscreen是一个函数？

​

我也试过这样做：

declare class fscreen {
  fullscreenElement: any;
  fullscreenEnabled: any;
  exitFullscreen: any;
  requestFullscreen: any;  
}
export = fscreen;

像这样进口：

import fscreen = require('fscreen');

但是我又发现了一个问题，它似乎认为它是一个函数，它抛出了这些异常：

TS2339: Property 'requestFullscreen' does not exist on type 'typeof fscreen'.

感觉我就快到了。已经在这件事上浪费了那么多时间，我被困住了。那么，我如何修改我的TSD以便它正确地定义默认的导出呢？

Answer 1

如果您在import fscreen from 'fscreen'中使用它，那么下面的内容将在一个*.d.ts文件中工作。

/**
 * Associate this type declaration file with the `fscreen` module.
 */
declare module 'fscreen' {

    /**
     * Declare a type for an object with methods and properties.
     */
    type FScreen = {
        requestFullScreen: (element: unknown) => unknown;
        requestFullScreenFunction: (element: unknown) => unknown;
        exitFullScreen: unknown;
        fullscreenPseudoClass: unknown;
        // other code omitted
    };

    /**
     * Declare an object that implements that type.
     */
    const fscreen: FScreen;

    /**
     * Default export that object.
     */
    export default fscreen;
} 

这是我电脑上的结果：

​

​

为了简洁起见，我只部分地实现了这个类型，并且我使用了unknown，因为我不熟悉fscreen。

此外，为了防止有帮助，下面是我的tsconfig.json文件：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }
}