Definitelytyped: Provide lodash per method imports

Created on 2 Apr 2016  Â·  13Comments  Â·  Source: DefinitelyTyped/DefinitelyTyped

@bczengel
@chrootsu

Can we provide a way to import individual methods from lodash? Like this:

import add = require('lodash/add');

Per method imports is a very good pattern to import only necessary functions from lodash. It's often used to decrease code size when bundling for in-browser use.

It can be achieved like in core-js typings:

declare module 'lodash/add' {
  import main = require('~lodash/index');
  export = main.add;
}

I can do this for all methods and then open a PR.
But I don't know how to deal with subsets like lodash/array. Any ideas?

Most helpful comment

If you are using webpack, I recommend you https://github.com/efidiles/lodash-ts-imports-loader

Saved me a day.

All 13 comments

This will be very helpful ! I was searching a solution to make it work, thank you.

I'm thinking now about reconsidering the whole lodash typings structure.

I think there are three cases:

Static independent functions

It seems now like LoDashStatic is the first-class interface, meaning that all functions are described as its methods.

I think, it'd be better if we created separate interfaces for each function.
LoDashStatic is really a collection of these independent functions, not more.
Then making subsets like lodash/array is no difference than making LoDashStatic interface — they're just collections of independent functions.

Chaining

The other case is chaining. All functions that support chaining are context-aware and should be really the methods of some interface.

lodash/fp

Here are all that independent functions like in the first case, but auto-curried and with reverse order of arguments. I don't know how to describe curried functions in TypeScript. Maybe it could be done manually by providing different signatures of one function.

@Antontelesh , @clemgrim check this PR, please

@stepancar Great! You've definitely done what I wanted to do initially.

@stepancar great job

@stepancar thank you!

@Antontelesh, merged. I think this issue should be closed :)

Hello.

I came across this thread while trying to solve a similar problem, and I figure you can help me with this, even though it's more of a TypeScript question.

If I wanted to solve this problem for another file, let's say for lodash 3.10, how would I declare a new modal?

I want to be able to write something like this:

import difference from "lodash/array/difference";

// or maybe
// import difference = require("lodash/array/difference");

Just on it's own, I get the dreaded error TS2307: Cannot find module 'lodash/array/difference'.

So I'd like to do something like this:

declare module "lodash/array/difference" {
  import _ = require("lodash");
  export = _.difference;
}
import difference from "lodash/array/difference";

(There are probably multiple problems with the above code, but the idea is to solve the issue locally for this single instance, and have TS compile to the correct module pattern, so for commonjs, it would need to compile to require("lodash/array/difference"), while still using the general global lodash typings.)

However, the above code gives me this error: error TS2664: Invalid module name in augmentation, module 'lodash/array/difference' cannot be found..

I tried for a while to Google my way out of this with no luck, so any help would be greatly appreciated!

You can try to add this in a .d.ts file

declare module "lodash/array/difference" {
  const difference: typeof _.difference;
  export = difference;
}

and in your ts file

import * as difference from 'lodash/array/difference';

// or import difference = require('lodash/array/difference');

Thanks @clemgrim! That worked 😄

I guess I was missing the fact that it had to be declared in a different file.

If you are using webpack, I recommend you https://github.com/efidiles/lodash-ts-imports-loader

Saved me a day.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

JWT
svipas picture svipas  Â·  3Comments

csharpner picture csharpner  Â·  3Comments

JudeAlquiza picture JudeAlquiza  Â·  3Comments

ArtemZag picture ArtemZag  Â·  3Comments

victor-guoyu picture victor-guoyu  Â·  3Comments