Question

当我尝试使用自定义mixin扩展lodash时，我在使用Lodash时遇到问题。

我未成功的尝试：

假设我使用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;
}

如果我swap在其他文件中，则_上的import _ from "lodash";功能无效。

部分成功尝试：

然后我查找help, and people suggested到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";。

有人请提出一个优雅的解决方案，提供打字稿类型的支持，而链接没有任何代码气味或丑陋.. 谢谢。：）

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

Answer 1

您正在寻找模块扩充。您可以通过重新定义现有模块并添加额外方法来扩展现有模块中的接口。在这种情况下，您应该为静态使用增加LoDashStatic，为链使用增加LoDashExplicitWrapper。当您使用该模块时，您可以先导入lodash，然后导入包含swap的模块以获得其副作用（将方法添加到lodash的副作用）

// 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和打字稿的mixins

1 个答案: