Merging typescript external global interfaces and inheritance

Question

Before exposing the problem, the project I'm referring is here : https://github.com/abauzac/nightwatch-typescript

My problem is with the Nightwatch definitions, it export a lot of interfaces globally (not inside a namespace or module https://github.com/DefinitelyTyped/DefinitelyTyped/blob/38bd4efd5dc8c666f70d77b020a0b64a13ce3980/types/nightwatch/index.d.ts), including :

./node_modules/@types/nightwatch:

export interface NightwatchCustomCommands { /* empty interface */ }
export interface NightwatchCustomAssertions { /* empty interface */ }

export interface NightwatchBrowser extends NightwatchCustomCommands, NightwatchCustomAssertions, ... { ... }

export interface NightwatchAssertions extends NightwatchBrowser { ... }

I have added custom commands and assertions to Nightwatch and tried to merge NightwatchCustomCommands and NightwatchCustomAssertions:

./types/index.d.ts

import {   NightwatchAssertions, NightwatchBrowser } from "nightwatch";

// merge interfaces with nightwatch types

interface NightwatchCustomAssertions  {
    compareScreenshot(this: NightwatchBrowser, filename: string, expected: number, callback: Function);
}

interface NightwatchCustomCommands  {
    wplogin(this: NightwatchBrowser, callback?: Function):this;

    compareScreenshot(this: NightwatchBrowser, filename: string, expected?: number, callback?: Function)
}

but it seems the interfaces are not merged when compiling :

Property 'wplogin' does not exist on type 'NightwatchBrowser'.
Property 'compareScreenshot' does not exist on type 'NightwatchAssertions'.

both @types and types folder are included in tsconfig "typeRoots". So far I tried adding "export" to the interfaces, namespacing... Don't know what I'm missing.

I can't tell what code is actually part of the problem and what is stuff you tried and abandoned. If you show only the code that you are trying i can help. For example, in the second code block you aren't even doing any inheritance so i can't tell what your intent was. — user2080225
What I'm trying is merging interfaces like explained in the second section here : typescriptlang.org/docs/handbook/declaration-merging.html . I'm expecting to see my interfaces (second block) to be taken into account in the inherited interfaces (first block) — bqlou

lilezek lilezek · Accepted Answer · 2017-11-25T21:56:35

I haven't checked this but I think you have to surround that with a module declaration:

import * as NW from "nightwatch";

  declare module "nightwatch" {
    export interface NightwatchCustomAssertions  {
        compareScreenshot(this: NW.NightwatchBrowser, filename: string, expected: number, callback: Function): any;
    }

    export interface NightwatchCustomCommands  {
      wplogin(this: NW.NightwatchBrowser, callback?: Function):this;
      compareScreenshot(this: NW.NightwatchBrowser, filename: string, expected?: number, callback?: Function): any;
    }
  }

Merging typescript external global interfaces and inheritance

1 Answers