如何让TypeScript识别属性的类型守卫？解决类型收窄失效问题

TypeScript的控制流分析无法跨对象属性进行类型窄化传递：

• 你定义的foo会被TypeScript自动推断为类型{ required: string | null; optional: string; }，因为required的值可能是"req"或null。
• 在三元表达式foo.required ? foo : "foo"中，虽然判断了foo.required为真值（非null），但TypeScript无法将这个判断的结果关联到整个foo对象上——它不会自动推断此时foo的required属性已经是string类型，因此认为foo不符合Foo接口（Foo要求required必须是string，不能为null），从而抛出类型错误。

方法1：使用类型断言 #

直接在符合条件的分支里，将foo断言为Foo类型，明确告诉TypeScript此时foo的结构符合要求：

type Foo = {
  required: string;
  optional?: string;
};

function func(prop: Foo | string) {
  prop;
}

const foo = {
  required: Math.random() > 0.5 ? "req" : null,
  optional: "opt",
};

func(foo.required ? foo as Foo : "foo");

注意：类型断言需要你确保运行时foo.required确实为string，否则可能引发运行时错误。

方法2：自定义类型守卫函数 #

通过类型守卫函数明确判断对象是否符合Foo类型，让TypeScript能正确窄化类型：

type Foo = {
  required: string;
  optional?: string;
};

function func(prop: Foo | string) {
  prop;
}

function isFoo(obj: any): obj is Foo {
  return typeof obj === 'object' && obj !== null && typeof obj.required === 'string';
}

const foo = {
  required: Math.random() > 0.5 ? "req" : null,
  optional: "opt",
};

func(isFoo(foo) ? foo : "foo");

这种方式更安全，因为类型守卫会在运行时做校验，同时让TypeScript的类型分析更准确。

方法3：解构后重构对象 #

通过解构分离required属性，利用控制流窄化后的required类型重构对象，让TypeScript自动推断出符合Foo的类型：

type Foo = {
  required: string;
  optional?: string;
};

function func(prop: Foo | string) {
  prop;
}

const foo = {
  required: Math.random() > 0.5 ? "req" : null,
  optional: "opt",
};

const { required, optional } = foo;
func(required ? { required, optional } : "foo");

这里因为required已经被窄化为string，重构后的对象会自动匹配Foo类型，无需额外断言。

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