React+TypeScript中useState与ErrorModal的类型报错问题

问题出在TypeScript无法确定error &&条件后的error具体类型——你的状态类型是boolean | Error，虽然你知道error为真时一定是Error对象，但TypeScript会考虑到error可能是true（布尔值），而布尔值没有title和message属性，所以会报错。

下面是几种可行的解决方法：

方法一：调整状态类型（推荐） #

把状态类型改成Error | null（或Error | undefined），用null表示“无错误”的状态，语义更明确，TypeScript也能自动推断类型：

interface Error {
    title: string;
    message:string;
}
// 初始状态设为null，表示无错误
const [error, setError] = useState<Error | null>(null);

渲染时直接判断error是否存在即可，TypeScript会自动识别此时error是Error类型：

{error && (
    <ErrorModal
      title={error.title}
      message={error.message}
      onConfirm={() => setError(null)}
    />
)}

方法二：添加类型守卫 #

如果坚持使用boolean | Error的状态类型，可以通过类型守卫告诉TypeScript当前error的具体类型：

方式1：直接用typeof判断 #

// 排除boolean类型，剩下的就是Error类型
{typeof error !== 'boolean' && (
    <ErrorModal
      title={error.title}
      message={error.message}
      onConfirm={() => setError(false)}
    />
)}

方式2：自定义类型谓词函数 #

如果需要多次判断，可以封装一个类型判断函数：

interface Error {
    title: string;
    message:string;
}
const [error, setError] = useState<boolean | Error>(false);

// 自定义类型谓词，明确返回值类型
function isError(err: boolean | Error): err is Error {
    return typeof err !== 'boolean';
}

渲染时调用这个函数判断：

{isError(error) && (
    <ErrorModal
      title={error.title}
      message={error.message}
      onConfirm={() => setError(false)}
    />
)}

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