TypeScript中?:与!修饰类属性的区别及适用场景分别是什么？

你遇到的TS2564报错是因为开启了strictPropertyInitialization（严格属性初始化）校验规则，该规则要求所有类属性必须在声明时赋值，或者在构造函数中完成赋值，否则就会抛出错误。接下来分别说明两种写法的差异：

1. id?: number 可选属性修饰 #

• 本质是将属性的类型定义为number | undefined联合类型，代表这个属性可以缺省，未主动赋值时默认值为undefined
• 类型校验层面：TS会强制你在使用该属性前先做非空判断，否则直接访问属性方法会触发类型报错，比如直接写id.toFixed()会被TS拦截，必须先通过if (id) 或者可选链id?.toFixed()处理后才能使用
• 适用场景：
  • 该属性本身就是类的非必要属性，不是所有实例都需要携带该值
  • 你希望TS帮你做空值校验，避免运行时访问undefined的属性/方法触发报错
  • 示例：用户类的avatar属性，不是所有用户都上传了头像，就可以定义为avatar?: string

2. id!: number 非空断言修饰 #

• 本质是你手动向TS承诺：这个属性一定会在实例被使用前完成赋值，不需要TS做初始化检查，你自己为该属性的非空性负责
• 类型校验层面：该属性的类型还是纯number，不会携带undefined类型，后续你直接调用它的任何方法TS都不会做空值校验，默认它一定有值
• 注意风险：如果实际使用时你并没有提前给它赋值，运行时会直接抛出错误，TS不会做任何兜底
• 适用场景：
  • 你确定属性会在实例使用前被赋值，比如由依赖注入、装饰器赋值，或者在框架的生命周期钩子（如Vue的mounted、Angular的ngOnInit）中完成赋值
  • 你不需要TS做空值校验，不想每次使用都重复判断空值，愿意自行承担赋值责任
  • 示例：Vue组件中用@Prop装饰的传入属性，Angular中用@Input装饰的输入属性，这些值会在组件实例化后由框架自动注入，就可以用!修饰

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