TypeScript里怎么正确处理可选属性的类型推断？

Code°春莉提问于 2026-03-01 10:07:26 阅读 5

前端

我在写一个接口的时候，有些字段是可选的，比如 user?: string，但当我从 API 拿到数据后直接解构赋值，TS 就报错说可能为 undefined。我试过加 ! 断言，但感觉不太安全，有没有更稳妥的方式？

比如下面这段代码，明明我后面做了判断，但 TS 还是提示 name 可能是 undefined：

interface User {
  id: number;
  name?: string;
}

const user: User = { id: 1 };
if (user.name) {
  const displayName = user.name.toUpperCase(); // 这里还是报错？
}

Promise 异步编程

我来解答赞 3 收藏

反馈

1 条解答

锦灏~ Lv1

这个问题很经典，TS 的可选属性确实容易踩坑。

你代码里那个 if 判断其实在标准情况下是能正确收窄类型的，如果还是报错，可能是 TS 版本问题或者 strict 模式下的某些配置。不过不管怎样，有几种比较稳妥的处理方式。

第一种，解构时给默认值，这样最省事：

const { name = '' } = user;

const displayName = name.toUpperCase(); // 完事

第二种，用空值合并运算符，这个写法很干净：

const displayName = user.name?.toUpperCase() ?? '默认名称';

第三种，如果你需要在多处使用这个属性，可以先做类型守卫或者提前断言：

// 方式1：显式判断后赋值给新变量

if (user.name !== undefined) {

  const name = user.name; // 这里类型已经收窄为 string

  const displayName = name.toUpperCase();

}



// 方式2：定义一个类型守卫函数

function hasName(user: User): user is User & { name: string } {

  return user.name !== undefined;

}



if (hasName(user)) {

  const displayName = user.name.toUpperCase(); // 类型安全

}

一般这样处理就够了。说实话，可选链 ?. 加上空值合并 ?? 是最常用的组合，代码简洁又能避免运行时报错。非空断言 ! 尽量少用，除非你百分之百确定那个时刻值一定存在，不然线上崩了排查都费劲。

2026-03-01 10:19