Angular中声明可选string却遇null类型赋值错误求解

我在.ts文件中声明了如下接口：

export interface Payment {
     paymentStatus?: string
}

在component.ts文件中，我创建了如下对象：

filters: PaymentFilters = {
paymentStatus: null
}

控制台出现以下错误：

Type null is not assigned to type string
type string | null is not assigned to type string.

我已声明该变量为可选string类型，为何仍会出现此类错误？

你误解了TypeScript中可选属性?的作用：

• 可选属性?仅表示该属性可以不被定义，但一旦你显式定义了这个属性，它的值必须严格符合声明的类型（这里是string）。
• 在TypeScript的严格类型检查模式下，string类型并不包含null或undefined，null是独立的类型，所以直接赋值null会触发类型不匹配错误。

根据你的实际需求选择以下方案：

1. 允许属性值为string或null
   修改接口，把属性类型扩展为string | null，同时保留可选性：

   export interface Payment {
        paymentStatus?: string | null
   }
   

2. 保持属性为可选的string类型
   如果你只是想让这个属性可选（即可以不设置，或设置为undefined），则需要把对象中的null改为undefined，或者直接移除该属性：

   // 方案一：设置为undefined
   filters: PaymentFilters = {
   paymentStatus: undefined
   }
   // 方案二：直接移除属性（可选属性可不声明）
   filters: PaymentFilters = {}
   

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