TypeScript中安全消除null/undefined空值的最优实践咨询

以下是针对你描述场景的可落地方案： #

1. 优先使用TS原生非空断言操作符 ! #

这是最轻量化的原生方案，符合你「确定运行时非空、空值直接抛出异常」的需求，不需要额外封装代码，语法层面直接告诉编译器该值必然非空：

currentTarget?: HTMLElement;
// 加!声明非空，运行时如果真为空会直接抛出访问异常，和你直接写不带可选链的效果完全一致
let position = this.currentTarget!.style.position;

链式调用场景使用方式也很简洁：

// 确定非空的节点加!即可，空值时直接抛运行时错误，不会像可选链一样静默返回undefined
someObject!.someProperty!.someMethod()

2. 通用非空校验函数优化 #

你正在使用的nullCast是社区非常普遍的通用方案，你可以扩展自定义报错能力，更方便线上问题定位：

// 函数名常用unwrap/assertNotNull语义更清晰
function unwrap<T>(value: T | null | undefined, errorTip?: string): T {
  if (value === null || value === undefined) {
    throw new Error(errorTip ?? "Unexpected null/undefined value");
  }
  return value;
}

使用时可以传递业务场景的报错信息：

const model = unwrap(this.model, "模型未初始化完成，禁止调用渲染逻辑");
// 后续model自动推导为非空类型，不需要额外断言

这种方案适合需要统一管控非空报错逻辑、需要上报异常的业务场景。

3. 异步加载场景的状态类型拆分 #

针对你提到的websocket拉取数据的场景，可以用联合类型从类型层面彻底消除可空判断：

// 拆分不同阶段的状态类型
type PageState = 
  | { status: "loading" }
  | { status: "ready", model: Model }

// 渲染层先做状态分支判断
if (state.status === "loading") {
  return <div>loading...</div>
}
// 走到这里TS会自动推断state必然带非空的model，不需要任何额外的非空校验/断言
return <MainUI model={state.model} />

这种方案从类型规则层面保证了业务渲染代码不会遇到可空值，是异步场景的最优解。

4. 类属性非空声明 #

对于确定会在类初始化、异步初始化方法中完成赋值的属性，可以直接在属性声明时加!，避免后续所有访问都要做非空判断：

class ModelService {
  // 告诉TS该属性会在后续逻辑中被赋值，不需要标记为可空
  public model!: Model;

  async init() {
    // 从websocket拉取数据完成赋值
    this.model = await fetchModelFromWS();
  }
}

只要你保证调用业务逻辑前初始化方法已经执行完成，就不需要额外的非空处理。

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