如何让TypeScript允许可选链返回undefined且无警告？

针对你遇到的场景，这里提供几种无需给obj显式指定完整类型、同时消除类型警告的方法：

方法一：类型断言为unknown后做类型守卫 #

先将目标值断言为unknown，再通过类型检查缩小类型范围，既保留obj的动态性，又让TypeScript明确类型逻辑：

const obj = {
    row: {
        over: {
            page: () => { },
        },
    },
    col: {
        over: {
            page: () => { }
        }
    },
    el: {
        over: {
            page: () => { },
            row: () => { },
        }
    }
};

function myFn(type: "page" | "row" | "col" | "el") {
    const callback = obj?.[type]?.over?.[type] as unknown;
    if (typeof callback === 'function') {
        console.log("has callback");
    } else {
        console.log("no callback");
    }
}

方法二：利用类型推导保留动态性 #

用as const让TypeScript推导obj的字面量类型，再通过类型工具提取回调的可能类型，后续修改obj结构时类型会自动更新：

const obj = {
    row: {
        over: {
            page: () => { },
        },
    },
    col: {
        over: {
            page: () => { }
        }
    },
    el: {
        over: {
            page: () => { },
            row: () => { },
        }
    }
} as const;

type ObjType = typeof obj;
type CallbackType = ObjType[keyof ObjType]['over'] extends infer O ? O[keyof O] | undefined : undefined;

function myFn(type: "page" | "row" | "col" | "el") {
    const callback = obj?.[type]?.over?.[type] as CallbackType;
    if (callback) {
        console.log("has callback");
    } else {
        console.log("no callback");
    }
}

方法三：临时抑制特定行警告（不推荐滥用） #

若确认代码逻辑安全，可临时用注释抑制该行的any警告，适合小型场景或临时调试：

function myFn(type: "page" | "row" | "col" | "el") {
    // @ts-ignore: 已确认回调为函数或undefined
    const callback = obj?.[type]?.over?.[type];
    if (callback) {
        console.log("has callback");
    } else {
        console.log("no callback");
    }
}

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