为何TypeScript泛型仅识别对象中的箭头函数而非函数表达式？

type C = <
    Methods,
    Attached = (methods: Methods) => void
>(
    options: {
        methods: Methods;
        attached: Attached;
    }
) => any;

var Component: C = () => { }

Component({
    attached(methods) {
        methods.bbb() // throw ts error
    },
    methods: {
        bbb() { }
    }
})

Component({
    attached(methods) {
        methods.bbb() // ok
    },
    methods: {
        bbb: () => { }
    }
})

期望attached函数的methods参数能正确关联methods属性中声明的函数，但仅当methods内使用箭头函数时才生效，请解释原因并提供解决方案。

原因解释 #

• TypeScript对对象字面量里的方法语法（bbb() {}）和箭头函数（bbb: () => {}）的类型推断逻辑存在差异：
  • 方法语法会被推断为宽泛的Function类型，而非具体的函数签名。这导致泛型Methods被推断为{ bbb: Function }，此时TS无法确认bbb的调用参数、返回值等具体信息，调用methods.bbb()会触发类型错误。
  • 箭头函数会被推断为精准的函数类型（比如() => void），泛型Methods能准确匹配为{ bbb: () => void }，attached里的methods参数类型完全对应，调用自然正常。

解决方案 #

方案1：给methods添加显式类型注解

通过明确methods的类型，强制TS使用具体的函数签名进行推断：

// 先定义方法的具体类型
type MyMethods = {
  bbb: () => void;
};

Component({
    attached(methods) {
        methods.bbb() // 正常无报错
    },
    methods: {
        bbb() { }
    } as MyMethods
})

方案2：优化泛型C的约束

修改泛型定义，约束Methods必须是包含函数属性的对象，引导TS更精准地推断方法类型：

// 约束Methods为键是字符串、值是任意函数的对象
type C = <
    Methods extends Record<string, (...args: any[]) => any>,
    Attached = (methods: Methods) => void
>(
    options: {
        methods: Methods;
        attached: Attached;
    }
) => any;

var Component: C = () => { }

// 现在使用方法语法也能正常推断类型
Component({
    attached(methods) {
        methods.bbb() // ok
    },
    methods: {
        bbb() { }
    }
})

内容的提问来源于stack exchange，提问作者lvshihao