Я пытаюсь создать TSD для fscreen.js но я борюсь с тем фактом, что это экспорт по умолчанию.

Основываясь на руководстве на веб-сайте Typescript, говорит:

Если ваш модуль нельзя вызвать или создать, используйте файл 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 во время выполнения, оно выглядит так:

console info

Я также искал SO для других вопросов, в некоторых других сообщениях предлагается определить его в моем 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, чтобы он правильно определял экспорт по умолчанию?

1
Boland 5 Окт 2019 в 02:07

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;
} 

Вот результат на моем компьютере:

enter image description here

Для краткости я реализовал этот тип лишь частично и использовал unknown, потому что не знаком с fscreen.

Также, если это может помочь, вот мой файл tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }
}
1
Shaun Luttin 5 Окт 2019 в 00:24