TypeScript中useReducer类型定义失效，如何修复类型提示？

问题重现 #

你在实现useReducer时遇到两个类型相关问题：

1. 调用setScannerState时没有对象键的代码提示
2. 访问scannerState.showAction时提示属性不存在于object类型

原代码如下：

export interface ScannerState {
    showAction: boolean;
    data?: QRData;
}

export function mergeObjReducer<S extends object>(state: S, changes: Partial<S>): S {
    return { ...state, ...changes };
}

const [scannerState, setScannerState] = useReducer(
     mergeObjReducer,
     { data: undefined, showAction: false },
);

// 无代码提示
setScannerState({data: "some data value"});

// 报错：Property 'showAction' does not exist on type 'object'.
const test = scannerState.showAction;

解决方案 #

核心问题是TypeScript无法自动推断出useReducer绑定的具体状态类型，通过以下方式明确类型约束即可解决：

方式一：给useReducer指定泛型参数 #

直接在useReducer调用时指定状态类型为ScannerState，同时约束action的类型为Partial<ScannerState>：

import { useReducer, Reducer } from 'react';

// ScannerState和mergeObjReducer定义不变

const [scannerState, setScannerState] = useReducer<Reducer<ScannerState, Partial<ScannerState>>>(
     mergeObjReducer,
     { data: undefined, showAction: false },
);

方式二：给初始状态标注类型 #

给初始状态变量明确指定ScannerState类型，让TypeScript自动推断useReducer的泛型参数：

// ScannerState和mergeObjReducer定义不变

const initialScannerState: ScannerState = { data: undefined, showAction: false };
const [scannerState, setScannerState] = useReducer(
     mergeObjReducer,
     initialScannerState,
);

方式三：给mergeObjReducer指定泛型 #

在调用mergeObjReducer时直接指定泛型为ScannerState：

// ScannerState和mergeObjReducer定义不变

const [scannerState, setScannerState] = useReducer(
     mergeObjReducer<ScannerState>,
     { data: undefined, showAction: false },
);

效果验证 #

修改后：

• 调用setScannerState时会自动提示data和showAction键
• 访问scannerState.showAction不会再出现类型错误，且能获得正确的类型提示

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