Mistj's Digital Garden

Appearance

0x01c-ts声明可选参数入参的几个注意事项

在 TypeScript 中，aa?: number 和 a: number | null 之间有几个关键的区别。

首先，aa?: number 表示 aa 是一个可选属性。这意味着在对象中可以存在这个属性，也可以不存在。如果不存在，TypeScript 会将其视为 undefined。因此，aa 的类型可以是 number 或 undefined。例如：

而 a: number | null 表示 a 是一个必须存在的属性，但它的值可以是 number 或 null。这意味着在对象中，a 必须被定义，但可以被赋值为 null。例如：

js
interface Example {
    aa?: number; // 可选属性
}

const obj1: Example = {}; // 合法，aa 不存在
const obj2: Example = { aa: 5 }; // 合法，aa 存在且为 number


interface Example {
    a: number | null; // 必须存在，但可以是 null
}

const obj1: Example = { a: null }; // 合法，a 存在且为 null
const obj2: Example = { a: 5 }; // 合法，a 存在且为 number
const obj3: Example = {}; // 不合法，a 必须存在
interface Example {
    aa?: number; // 可选属性
}

const obj1: Example = {}; // 合法，aa 不存在
const obj2: Example = { aa: 5 }; // 合法，aa 存在且为 number


interface Example {
    a: number | null; // 必须存在，但可以是 null
}

const obj1: Example = { a: null }; // 合法，a 存在且为 null
const obj2: Example = { a: 5 }; // 合法，a 存在且为 number
const obj3: Example = {}; // 不合法，a 必须存在

小结 ​

简单来说，aa?: number 可以粗略理解为: aa:number|undefined

作为方法入参 ​

?: 或 string | undefined 可以修饰一个可选参数。

而 string | null 必须要有第二个参数。

因此 ?: 后面接一个必填参数,会报错。