绑定和返回函数中的“this”上下文中的打字稿错误

Question

我有一个函数URLBuilder，它作为一个模块工作（它返回一个包含各种函数的对象，并且这些函数与上下文对象很好地绑定，所以this 绑定按预期工作，我们可以访问@ 987654323@里面这些函数正确）

我的问题是为什么打字稿不理解URLBuilder 的返回对象内的函数this 绑定？即使我尝试手动添加返回类型，Typescript 也会抱怨 when using the URLBuilder 在没有 this 上下文的情况下无法接受该函数。

我们如何让 typescript 理解返回对象中这个绑定函数的this？

我要解决的 Typescript 错误是：

The 'this' context of type 'URLBuilderAPI' is not assignable to method's 'this' of type 'ExecutionContext'.

interface URLBuilderOptions {
    baseURL: string,
}

interface ExecutionContext {
    options: URLBuilderOptions,
    predefinedValues: { protocol: string },
}


/************************* */

function generateRequestURL(this: ExecutionContext, customOptions: { subRoute: string }) {

    return `${this.predefinedValues.protocol}:${this.options.baseURL}/api/v3/${customOptions.subRoute}/some-url`;
}

/************************* */


function URLBuilder(options: URLBuilderOptions) {

    const predefinedValues = {
        protocol: 'https',
    }

    const context = {
        options,
        predefinedValues,
    }

    const API = {
        generateRequestURL: generateRequestURL.bind(context)
    }

    return API;
}


/*********************** */

// 1st try

let urlInstance = URLBuilder({ baseURL: 'www.url.com' });

urlInstance.generateRequestURL({}); 
// typescript cannot understand function params and auto suggest them!

/*********************** */


interface URLBuilderAPI {
    generateRequestURL: typeof generateRequestURL,
}

function URLBuilder_WithReturnTypes(options: URLBuilderOptions): URLBuilderAPI {

    const predefinedValues = {
        protocol: 'https',
    }

    const context = {
        options,
        predefinedValues,
    }

    const API = {
        generateRequestURL: generateRequestURL.bind(context)
    }

    return API;
}


/*********************** */

// 2nd try

let urlInstanceWithTypes = URLBuilder_WithReturnTypes({ baseURL: 'www.url.com' });

urlInstanceWithTypes.generateRequestURL({ subRoute: '/test/' })
/**
 * typescript error:
 * The 'this' context of type 'URLBuilderAPI' is not assignable to method's 'this' of type 'ExecutionContext'.
 */
/*********************** */

Answer 1

如果您使用strictBindCallApply 编译器选项，则代码将按预期工作，并且您将在第一次尝试时获得完成 (Playground Link)。如果没有strictBindCallApply，bind 将返回any，因此您将无法检查函数的参数（Playground Link）

如果您不想启用此选项，您可以对bind 的结果使用类型断言来获取具有相同参数和返回类型的类型，但删除this 的类型：

....
    const API = {
        generateRequestURL: generateRequestURL.bind(context) as OmitThisParameter<typeof generateRequestURL>
    }
...

Playground Link

你也可以定义你的接口来省略this参数：

interface URLBuilderAPI {
    generateRequestURL: OmitThisParameter<typeof generateRequestURL>,
}

Playground Link