TypeScript泛型交叉类型结合Partial使用的类型不兼容问题求解

TypeScript 抛出该错误的核心原因是泛型参数 T 未做约束，TS 无法保证 { extraData: 'changed' } 对任意类型的 T 都符合 Partial<T & MyBar> 的类型要求：

• 泛型 T 是调用 bar 时由外部传入的，存在 T 本身包含 extraData 属性的可能，若 T 中 extraData 的类型不是 string（比如是 number），交叉类型 T & MyBar 的 extraData 会被推导为 never，此时传入字符串类型的 extraData 自然不符合类型要求。
• TS 静态检查阶段无法确认 T 的实际类型，因此直接传入仅包含 extraData 的 payload 会被判定为类型不兼容。

方案1：给泛型 T 增加约束 #

明确要求传入的 T 不可包含 MyBar 中已定义的属性，从根源避免同名属性类型冲突：

const bar = <T extends Omit<unknown, keyof MyBar>>(initialState: T) => {
    const {state, dispatch} = foo<T & MyBar>({ ...initialState, extraData: 'some data' });
    
    dispatch({ type: 'UPDATE_STATE', payload: { extraData: 'changed' } });
    return { state, dispatch };
}

方案2：添加安全类型断言 #

你在代码逻辑中已经保证初始化时 extraData 是 string 类型，因此可以直接给 payload 添加类型断言告知 TS 该赋值是合法的：

dispatch({ type: 'UPDATE_STATE', payload: { extraData: 'changed' } as Partial<T & MyBar> });

方案3：拆分公共属性与用户自定义属性 #

调整 foo 函数的类型定义，将公共扩展属性和用户传入的泛型属性分开存储，避免交叉类型带来的不确定性，该方案可维护性最高，后续新增公共属性也不需要修改泛型约束：

// 调整IState定义，拆分公共扩展字段与用户自定义data
interface IState<T, E = Record<string, unknown>> {
    some: string;
    extra: E;
    data: T;
}

type Action<T, E> = { type: 'UPDATE_STATE'; payload: Partial<{ data: T; extra: E }> };

const foo = <T, E>(initalData: T, initialExtra: E) => {
    const state: IState<T, E> = { some: 'foo', extra: initialExtra, data: initalData };
    const dispatch = (action: Action<T, E>) => {
        // do something
    }
    return {state, dispatch};
};

// bar中使用时直接指定extra的类型为MyBar即可
const bar = <T>(initialState: T) => {
    const {state, dispatch} = foo<T, MyBar>(initialState, { extraData: 'some data' });
    // 此时更新extraData不会有类型报错
    dispatch({ type: 'UPDATE_STATE', payload: { extra: { extraData: 'changed' } } });
    return { state, dispatch };
}

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