如何为Recoil Atom定义TypeScript类型并传入函数参数

1. 用接口/类型直接约束Atom的结构 #

你可以通过给atom函数指定泛型参数的方式，直接用预定义的接口IWipAtom约束Atom的类型，既不用在default里逐个加类型断言，还能让TypeScript自动校验默认值的结构是否符合接口要求：

// 先定义你的接口
export interface IWipAtom {
  data: IGameData | null,
  ex: IEx | null,
}

// 给atom指定泛型参数为IWipAtom
const WipStateAtom = atom<IWipAtom>({
  key: 'wipAtom',
  default: {
    data: null,
    ex: null,
  }
});

这样定义后，Atom的状态值会严格遵循IWipAtom的类型，后续通过useRecoilState或useRecoilValue获取的值也会自动推导为IWipAtom类型。

2. 函数参数的严格类型标注 #

当你通过useRecoilState(WipStateAtom)拿到状态值wip时，它的类型已经是IWipAtom了，直接给函数参数指定IWipAtom类型完全可行，TypeScript会自动提供类型提示并做校验：

const [wip, setWip] = useRecoilState(WipStateAtom);

// 直接用IWipAtom标注参数类型
const myFunction = (thewip: IWipAtom) => {
  // 安全访问thewip.data、thewip.ex，类型错误会被TypeScript及时捕获
  console.log(thewip.data?.name);
};

// 调用时直接传入wip，类型完全匹配
myFunction(wip);

3. 传递Atom实例而非状态值的情况 #

如果你的函数需要接收Atom实例（不是Atom的状态值），可以使用Recoil内置的AtomType类型来标注：

import type { AtomType } from 'recoil';

const handleAtom = (targetAtom: AtomType<IWipAtom>) => {
  // 在这里可以对Atom实例进行操作，比如结合useRecoilState读取它
  const [state, setState] = useRecoilState(targetAtom);
};

// 传入定义好的WipStateAtom
handleAtom(WipStateAtom);

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