TypeScript 泛型，提升函数返回类型答案

【问题标题】：TypeScript generics, hoist function return typeTypeScript 泛型，提升函数返回类型
【发布时间】：2020-11-24 20:04:51
【问题描述】：

我正在缓慢但肯定地将我的代码库迁移到打字稿，但我无法以某种方式将可调用的返回类型推断为其父包装器。为了清楚起见，功能被剥离。看看：

// component.ts
export function Component(name, factory, defaults = {}) {
    return (elem, properties) => {
        try {
            let instance = factory(elemental, settings) || {};
        } catch(error) {
        }

        return instance;
    }
}

现在，我使用这个函数来注册 'clickProxy' 组件：

// clickProxy.ts
export default Component('clickProxy', (component, settings) => {
    component.el.addEventListener('click', () => {
        document.querySelector(settings.target)?.click();
    })

    return {
        customReturnType: true
    }
})

但现在如果我执行以下操作，则不会推断出类型 {customReturnType: boolean}（这是我需要泛型或其他解决方案的部分）。

// index.ts
import clickProxy from 'clickProxy';

let nonInferred = clickProxy(document, {
    target: '#random'
});

// nonInferred will be `{customReturnType: true}`

非常感谢任何帮助/资源（因为 TypeScript 文档没有说明如何将泛型与可调用对象结合使用）。

【问题讨论】：

如果你分享可以在TS游乐场编译的代码会更容易
好的，我帮你做吧

标签： typescript

【解决方案1】：

好的，所以我最终找到了方法，这导致我的代码如下所示。我添加了一个在初始化组件时传递的类型：


export interface ResponsiveComponentResult {
    pause?(): void;
    resume?(): void;
    destroy?(): void;
}

type ComponentCallable<T = ResponsiveComponentResult> = (component, settings?: any) => T

export function <Type extends ResponsiveComponentResult = ResponsiveComponentResult>
Component(name: string, factory: ComponentCallable, defaults: Object = {}): (elem: HTMLElement, properties?: Object) => Type {
    return (elem, properties): Type => {
        try {
            let instance = factory(elemental, settings);
            return instance;
        } catch(error) {
            throw new Error(error);
        }
    }
}

这让我现在可以执行以下操作：

interface ClickProxyComponent {
    customReturnType: boolean;
}

export default Component<ClickProxyComponent>('clickProxy', (component, settings) => {
    component.el.addEventListener('click', () => {
        document.querySelector(settings.target)?.click();
    })

    return {
        customReturnType: true
    }
})

这将推断出正确的类型。

【讨论】：