TypeScript中如何正确声明可空变量实现一致的可选类型行为？

核心本质差异 #

首先要明确 TypeScript 中?可选属性和| null可空类型的语义完全不同，不存在写法不统一的问题：

• 接口内的?修饰符作用于属性的存在性，表示该属性可以不存在、或存在时值为undefined，默认不包含null类型。
• 类型声明中的| null作用于值的可空性，表示整个变量的值可以为null。

实现一致可选行为的方案 #

方案1：封装统一可空类型别名（推荐）

自己定义通用可空工具类型，所有需要允许null的场景统一使用该类型，保证写法规范统一：

// 全局定义一次即可
type Nullable<T> = T | null

// 使用时写法统一
var myType: Nullable<IMyType> = null
if (something) { myType = somethingNotNull }

如果需要让接口的可选属性也支持赋值null，可以在tsconfig.json中关闭exactOptionalPropertyTypes编译选项，此时可选属性bar?: IChild等价于bar?: IChild | undefined | null，和外部可空类型的取值范围对齐。

方案2：避免初始赋值为null

如果场景允许，初始化时直接给符合接口结构的默认值，不需要额外声明可空类型：

var myType: IMyType = { foo: '' }
if (something) { myType = somethingNotNull }

方案3：关闭严格空值校验（不推荐）

如果不需要严格的空值校验，可以在tsconfig.json中关闭strictNullChecks，此时所有类型都默认允许赋值为null/undefined，不需要额外加| null声明，但会失去空安全检查能力，不建议中大型项目使用。

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