javascript - 如何使用带有链接支持的 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 在 _ 上不可用。

部分成功的尝试:

然后我找了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);
}

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

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

这意味着，如果我执行以下任何操作， typescript 会生气:

//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[]>'.
}

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

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

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

Answer 1

您正在寻找模块扩充。您可以通过重新定义它们并添加额外的方法来扩展现有模块中的接口(interface)。在这种情况下，您应该增加 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