Angular学习疑问：TypeScript变量声明中|运算符的作用是什么？

你看到的|符号不是JavaScript中的位或运算符，这是TypeScript的类型语法，仅在编译阶段做类型检查用，运行时会被完全移除，不会执行任何位运算逻辑。

语法含义 #

product: Product | undefined是TypeScript的联合类型声明，含义是：

• 变量product允许的取值类型有两种：要么是符合Product类型（你项目中定义的商品类/接口）结构的实例，要么是undefined（未赋值状态）
• 这段声明是告诉TypeScript编译器，product变量有可能是空值，后续使用该变量时必须先处理空值场景，否则编译器会抛出类型错误。

Angular场景下的使用原因 #

在商品详情组件的常规业务逻辑里，product的值通常是通过异步请求（调用接口、从路由参数匹配全局数据等）获取的：

• 组件初始化后、异步请求完成前，product还没有被赋值，值为undefined
• 这种显式声明空值可能性的写法，可以提前在编译阶段规避空值调用报错的问题，比如你必须用可选链product?.name或者先做非空判断才能访问product的属性，避免运行时出现Cannot read properties of undefined的错误。

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