"Best practice" way to extend type definitions (Mixin)

[snebjorn]

I'm hoping to start a discussion on what is "best practice" when extending a type definition (d.ts). A good example of where this is needed is with mixins. For example when using LoDash. The LoDashStatic definition doesn't contain your mixins obviously. So you somehow need to add them.

https://basarat.gitbooks.io/typescript/content/docs/project/globals.html Gives a nice clean way to extend lib.d.ts. But I assume it's limited to lib.d.ts. It also states that the file should be named globals.d.ts.

https://basarat.gitbooks.io/typescript/content/docs/tips/jquery.html Shows how to add your plugin to the jquery definition. It also states that the file should be named jquery-<extension>.d.ts.

So far so good.

Is the "best practice" way to define mixins to have a file called lodash-mixins.d.ts? And the file should look like this:

interface LoDashStatic {
  myMixin: Function;
}

But the only way I could get it to work was like this:

declare module _ {
    interface LoDashStatic {
        myMixin: Function;
    }
}

Personally I like to keep the deceleration and implementation of a mixin together. But I couldn't figure out a way to get the implementation inside the lodash-mixins.d.ts file.

However if the file was renamed to lodash-mixins.ts, then I can do this:

declare module _ {
    interface LoDashStatic {
        myMixin: Function;
    }
}

_.mixin({
    myMixin: function () {}
});

Which is "clean" to me. But it goes against the jquery example :(

Is this a good or bad approach?

A completely different way is to define your own interfaces.

interface ILoDashWithMixins extends _.LoDashStatic {
    myMixin: Function;
}

But I don't like this approach much.

Looking forward to hearing your opinions :)

[basarat]

Creating good quality TypeScript definitions is a bit of a black art that is still evolving. TypeScript 2.0 got support for UMD module definitions : https://github.com/Microsoft/TypeScript/issues/7125.

I need to cover that whole topic once I have some time. For now you can look at the definitions in https://github.com/DefinitelyTyped/DefinitelyTyped/tree/types-2.0 that follow this pattern :rose:

[snebjorn]

It's not so much the declaration of the definition I'm worried about. UMD support is great. But it doesn't change how to add or alter already defined definitions - at least it doesn't seem like that to me.

[alexjlockwood]

I'm curious if there has been any updates on this... I've been trying for a while to extend lodash's type declarations so that my mixins resolve properly in my IDE.

I've set up and installed my mixin so that invoking it using lodash works properly at runtime. I've also installed @types/lodash so that the types resolve properly for the standard lodash functions (like _.some, _.isEmpty, etc.). The types for these standard functions seem to be located in node_modules/@types/lodash/index.d.ts. I can directly modify this file in order to get things working... i.e. if I add something like:

//_.myCustomMixin
interface LoDashStatic {
  myCustomMixin<T>(arg1: any, arg2: string, arg3: any): boolean;
}

This obviously isn't ideal though... is there a way that I can extend/customize these type declarations somehow in my own project? There is some documentation on declaration merging that I've been reading and I feel like it must be possible somehow... but I can't seem to figure it out.

My project is here by the way. I'm relatively new to typescript but it seems like there has recently been some changes with how this stuff all works (beginning with v2.0)... so not really sure if any of this information is outdated now.

BTW, thanks a lot for this book... it's helped me out a lot. :)

[basarat]

I've been trying for a while to extend lodash's type declarations

@alexjlockwood Without looking at lodash's definitions, I hope this helps you http://typestyle.io/#/core/tip-declaring-new-css-stuff If it does please let me know :heart:

This is known as module augmentation :rose:

[eddyw]

It's probably not the best way, but this is what I currently did:

import * as fp from 'lodash/fp'
const mixins = {
    example: v => v
}
const _: typeof mixins & fp.LoDashFp = Object.assign(
    fp.runInContext({}).mixin(mixins)
)

I'm still learning TS, so I disabled strict type checks to get most of my code to work without much change. Is there a better way of achieving this?