Augment imported typescript interface

Question

I am using a package — ko-component-router — with the following (condensed) type definitions...

index.d.ts

export { IContext, Context } from './context';
export { Router } from './router';

context.d.ts

export interface IContext {
    $root: IContext;
    $child: IContext;
    $children: IContext[];
    $parent: IContext;
    $parents: IContext[];
    router: Router;
    route: Route;
    params: {
        [k: string]: any;
    };
    path: string;
    pathname: string;
    base: string;
    canonicalPath: string;
}
export declare class Context implements IContext {
  // ...
}

router.d.ts

import { IContext } from './context';
export declare type Middleware = (ctx: IContext, done?: () => any) => {
    beforeRender?: (done?: () => void) => Promise<any> | void;
    afterRender?: (done?: () => void) => Promise<any> | void;
    beforeDispose?: (done?: () => void) => Promise<any> | void;
    afterDispose?: (done?: () => void) => Promise<any> | void;
};
export declare class Router {
    static use(...fns: Middleware[]): void;
}

On the consumer side, middleware is registered that can add properties to the context that is passed into the view component, as such...

import { Router } from 'ko-component-router'


Router.use((ctx) => ({
    beforeRender() {
        ctx.someProperty = 'foo'
    }
}))

As expected, a Property 'someProperty' does not exist on type 'IContext' error is thrown by the compiler.

Based on the documentation on declaration merging, I attempted adding the following in order to make the compiler aware of this new property...

import { Router } from 'ko-component-router'

declare module 'ko-component-router' {
    interface IContext {
        someProperty: string
    }
}

Router.use((ctx) => ({
    beforeRender() {
        ctx.someProperty = 'foo'
    }
}))

But the same error is thrown. I've tried just about everything I can think of, but I'm unable to make the compiler aware of this new property without completely re-implementing the type definitions in my project, which is obviously far from ideal.

Is this possible, and if so, where am I going astray?

You might need to specify a deeper path in your declare module declaration. See this answer: stackoverflow.com/a/44927628/6680611 — cartant
– cartant, Commented Oct 24, 2017 at 20:19

artem · Accepted Answer · 2017-10-24 20:29:20Z

3

As mentioned in cartant's comment, module augmentation does not work for classes and interfaces that are exported "indirectly" - this is a known issue.

It works if you augment the inner module where IContext is defined:

declare module 'ko-component-router/context' {
    export interface IContext {
        someProperty: string
    }
}

Unfortunately, anyone who adds augmentations in this way introduces a dependency on internal structure of your library.

Also, with this augmentation class Context does not compile anymore:

error TS2420: Class 'Context' incorrectly implements interface 'IContext'. Property 'someProperty' is missing in type 'Context'.

So if you add properties to interfaces which are implemented by some classes, these properties must be optional:

declare module 'ko-component-router/context' {
    export interface IContext {
        someProperty?: string
    }
}

answered Oct 24, 2017 at 20:29

artem

52.2k10 gold badges86 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

caseyWebb Over a year ago

Was just coming to this conclusion, but this is definitely it. Working around the nasty declare module 'ko-component-router/dist/context'by moving any interfaces that are expected to be augmented into the index file itself.

Venryx Over a year ago

Important note: declare module thing is NOT the same as declare module "thing". Had me puzzled for some time. (with the quotes, it tries to resolve the module to existing module matches; without, it assumes you're declaring a whole new module/namespace)

Collectives™ on Stack Overflow

Augment imported typescript interface

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related