TypeScript未正确校验对象内箭头函数类型的问题及解决

一、为什么直接返回对象字面量时不报错？ #

TypeScript处理函数返回值时，对直接返回的对象字面量会应用宽松的结构兼容性规则，核心原因有三点：

• 函数参数数量的兼容性：JavaScript允许调用函数时传入多余参数（函数会自动忽略），因此TypeScript默认允许「源函数参数数量少于接口要求」的情况。比如接口要求startDrawing(drawingMode: DrawingMode)，你写的startDrawing()被调用时，即使传入DrawingMode参数也不会报错，因此被判定为兼容。
• 非严格模式下的参数类型宽松处理：如果未开启strictFunctionTypes，TypeScript允许函数参数类型的双向协变；同时，当函数作为对象字面量属性直接返回时，TypeScript会默认认为你只是省略了参数，而非类型不匹配，不会触发严格校验。
• 对象新鲜度检查的局限性：对象字面量的新鲜度检查仅针对「额外属性」（比如接口没有的属性），不会校验函数内部的参数匹配度。

而当你把返回值存入变量再返回时，变量的类型会被TypeScript精确推断（比如reenable会被推断为(anyStringThatShouldNotBeAllowed: string) => void），此时再将这个精确类型赋值给接口类型，TypeScript会严格按照函数类型的逆变规则和参数匹配规则校验，因此会报错。

二、如何强制接口严格校验？ #

以下几种方法可以让TypeScript强制校验返回对象完全符合接口要求：

1. 显式给返回变量指定接口类型 #

将返回对象存入变量时，显式声明变量类型为目标接口，TypeScript会在赋值阶段就严格校验所有属性：

export const useMappedXY: LeafletConnectionHook = (currentMap: Ref<L.Map | undefined>) => {
    const onCreated = (layer: L.Layer, drawingMode: DrawingMode) => {
        // 按接口要求实现逻辑
    };

    const startDrawing = (drawingMode: DrawingMode) => {
        // 按接口要求实现逻辑
    };

    const reenable = () => {
        // 按接口要求实现逻辑
    };

    const disable = () => {
        // 按接口要求实现逻辑
    };

    // 显式指定类型，强制校验
    const result: LeafletConnectionHookReturnObject = {
        reenable,
        disable,
        startDrawing,
        onCreated,
    };
    return result;
};

2. 使用satisfies关键字（TypeScript 4.9+推荐） #

satisfies可以在保留变量精确类型的前提下，强制校验变量符合接口要求，是最优雅的方式：

export const useMappedXY: LeafletConnectionHook = (currentMap: Ref<L.Map | undefined>) => {
    // ... 函数实现 ...

    const result = {
        reenable,
        disable,
        startDrawing,
        onCreated,
    } satisfies LeafletConnectionHookReturnObject;
    return result;
};

3. 开启TypeScript严格模式 #

在tsconfig.json中开启strict: true（或单独开启strictFunctionTypes和strictNullChecks），让TypeScript对函数参数进行严格校验：

{
    "compilerOptions": {
        "strict": true
    }
}

开启后，直接返回对象字面量时也会触发严格校验，比如reenable的多余参数会因为strictNullChecks报错（调用时不传参数会导致参数为undefined，无法赋值给string类型），startDrawing缺少参数也会因为strictFunctionTypes的逆变规则报错。

4. 使用类型断言（不推荐） #

直接对返回的对象字面量进行类型断言，强制TypeScript按照接口校验，但这种方式会跳过部分类型检查，仅在你确认实现完全符合接口时使用：

return {
    reenable,
    disable,
    startDrawing,
    onCreated,
} as LeafletConnectionHookReturnObject;

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