Recoil Refine中创建不含Undefined的Nullable检查器解决类型不兼容

问题背景 #

使用@recoiljs/refine的nullable检查器搭配Recoil Atom时，出现类型错误：

Type 'AtomEffect<Zone | null | undefined>' is not assignable to type 'AtomEffect<Zone | null>'

相关类型定义：

export type Zone = {
  id: string;
  name: string;
  box: {
    min: Point3d;
    max: Point3d;
  };
};

export type Point3d = {
  x: number;
  y: number;
  z: number;
};

Atom使用代码：

effects: [
    syncEffect({
      refine: selectedZoneChecker,
    }),
  ])

自定义检查器代码：

const minMaxChecker = object({
  x: number(),
  y: number(),
  z: number(),
});

const boxChecker = object({
  min: minMaxChecker,
  max: minMaxChecker,
});

const simpleZoneChecker = writableObject({
  id: string(),
  name: string(),
  box: boxChecker,
});
export const selectedZoneChecker = nullable<Zone>(simpleZoneChecker);

问题核心：nullable<T>返回的Checker<T | null | undefined>包含undefined类型，但目标Atom仅接受Zone | null类型，且Atom类型无法修改。

解决方案 #

方案一：自定义仅支持T | null的检查器（推荐） #

封装现有检查器，处理undefined场景并约束类型，完美匹配Atom需求：

import { Checker, nullable, WritableChecker } from '@recoiljs/refine';

// 自定义检查器：仅允许目标类型或null，自动将undefined转换为null
export const onlyNullable = <T>(checker: Checker<T>): Checker<T | null> => {
  const baseChecker = nullable(checker);
  return {
    ...baseChecker,
    check: (value: unknown): T | null => {
      const checkedValue = baseChecker.check(value);
      // 将undefined统一转为null，匹配Atom的类型要求
      return checkedValue === undefined ? null : checkedValue;
    },
  } as WritableChecker<T | null>;
};

替换原nullable的使用：

export const selectedZoneChecker = onlyNullable<Zone>(simpleZoneChecker);

该方案既保留了原检查器的校验逻辑，又通过类型约束和运行时转换消除了undefined类型，完全适配Atom的类型要求。

方案二：类型断言（应急使用） #

若不想自定义检查器，可通过类型断言强制转换，但会跳过类型检查，需确保运行时不会出现undefined：

import { Checker } from '@recoiljs/refine';

export const selectedZoneChecker = nullable<Zone>(simpleZoneChecker) as Checker<Zone | null>;

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