如何使用带有链接支持的 lodash 和 typescript 的 mixins

Question

当我尝试使用我的自定义 mixins 扩展 lodash 时，我在将 Lodash 与 typescript 结合使用时遇到了问题。

我的失败尝试：

假设我使用 mixins 向 lodash 添加了一个新函数，如下所示：

//lodashMixins.ts

import * as _ from "lodash";

_.mixin({
  swap
});

function swap(array: Array<any>, index1: number, index2: number) {
    let temp = array[index1];
    array[index1] = array[index2];
    array[index2] = temp;
    return array;
}

如果我在其他文件中 import _ from "lodash";，swap 函数在 _ 上不可用。

部分成功尝试：

然后我寻找到 extend _.LoDashStatic 然后导出 _ 作为新的扩展 interface.

然后我做了以下操作：

//lodashMixins.ts

import * as _ from "lodash";

interface LodashExtended extends _.LoDashStatic {
  swap(array: Array<any>, index1: number, index2: number): Array<any>;
}

_.mixin({
  swap
});

function swap(array: Array<any>, index1: number, index2: number) {
    let temp = array[index1];
    array[index1] = array[index2];
    array[index2] = temp;
    return array;
}

export default _ as LodashExtended;

并使用新的混合如下：

//otherFile.ts

import _ from "./lodashMixins";

function someFn(){
    var array = [1,2,3,4]
    _.swap(array, 1, 2);
}

现在可以了，但是有两个问题:

首先，新的 swap 函数不适用于 lodash 的链接语法（无论是显式链接还是隐式链接）。

这意味着，如果我执行以下任何操作，打字稿就会生气：

//otherFile.ts

import _ from "./lodashMixins";

function someFn(){
    var cantDothis = _.chain([1,2,3,4]).map(x=>x*x).swap(1,2).value();
    //[ts] Property 'swap' does not exist on type 'LoDashExplicitWrapper<number[]>'.

    var neitherThis = _([1,2,3,4]).map(x=>x*x).swap(1,2).value();
    //[ts] Property 'swap' does not exist on type 'LoDashImplicitWrapper<number[]>'.
}

其次，我必须这样做 丑陋的 import _ from "./lodashMixins"; 而不是标准的 import _ from "lodash";.

请有人想出一个优雅的解决方案，在链接时提供 typescript 类型支持，而没有任何代码异味或丑陋.. 谢谢。 :)

可能 John-David Dalton 可以提供帮助。

Answer 1

您正在寻找模块扩充。您可以通过重新定义它们并添加额外的方法来扩展现有模块中的接口。在这种情况下，您应该增加 LoDashStatic 用于静态使用，并增加 LoDashExplicitWrapper 用于链使用。使用模块时，可以先import lodash，再import含有swap的module，因为它的side effects（将方法添加到lodash的side effect）

// swap.ts
import * as _ from "lodash";


declare module "lodash" {
    interface LoDashStatic {
        swap<TValue>(array: Array<TValue>, index1: number, index2: number): TValue[];
    }
    interface LoDashExplicitWrapper<TValue> {
        swap(index1: number, index2: number): LoDashExplicitWrapper<TValue>;
    }
}

_.mixin({
    swap
});

function swap(array: Array<any>, index1: number, index2: number) {
    let temp = array[index1];
    array[index1] = array[index2];
    array[index2] = temp;
    return array;
}

//usage 
import * as _ from "lodash";
import "./swap"


console.log(_.chain([1,2,3,4]).map(x=>x*x).swap(1,2).map(x=> x * 2).value());

var array = [1,2,3,4]
console.log(  _.swap(array, 1, 2));

您可以阅读更多关于模块扩充的内容here

如何使用带有链接支持的 lodash 和 typescript 的 mixins

how to use mixins with lodash and typescript with chaining support

javascript

mixins

chaining

typescript

lodash