react-toastify配置项添加colored主题出现类型不兼容错误如何解决

TypeScript 默认会将你定义的options对象里的theme属性推断为宽泛的string类型，但react-toastify的ToastOptions定义中，theme字段的类型是'light' | 'dark' | 'colored'的字面量联合类型Theme，二者类型不匹配就触发了报错。内联传入配置时TypeScript可以直接推断字面量符合类型要求，所以不会报错。

方案1：给options显式标注ToastOptions类型（最推荐） #

先从react-toastify导入对应的类型，再给你的全局配置标注类型即可：

import {
  Slide,
  toast,
  type ToastOptions // 导入类型
} from 'react-toastify';

// 显式标注options的类型为ToastOptions
const options: ToastOptions = {
  autoClose: 5000,
  position: toast.POSITION.TOP_CENTER,
  transition: Slide,
  closeOnClick: true,
  closeButton: false,
  theme: 'colored' // 这里TS会自动校验值是否符合Theme类型要求
};

这种方式还能获得TypeScript的配置项智能提示，写错属性也会提前提示。

方案2：用as const固化对象类型 #

如果不想额外导入类型，可以直接给options对象加上as const，让TypeScript把所有属性都推断为字面量类型，不会做类型拓宽：

const options = {
  autoClose: 5000,
  position: toast.POSITION.TOP_CENTER,
  transition: Slide,
  closeOnClick: true,
  closeButton: false,
  theme: 'colored'
} as const;

此时theme的类型会被推断为字面量'colored'，符合Theme类型的要求。

方案3：单独给theme字段指定类型 #

也可以只给theme字段加上as const来限制类型：

const options = {
  autoClose: 5000,
  position: toast.POSITION.TOP_CENTER,
  transition: Slide,
  closeOnClick: true,
  closeButton: false,
  theme: 'colored' as const
};

内容的提问来源于stack exchange，提问作者Greg-A