TypeScript 如何做可选属性

在写代码时，你肯定遇过这种情况：给对象传参数，有的参数可填可不填。比如做外卖小程序，用户填地址是必须的，但填“备注”“门牌号”就不是强制的——总不能让用户每次都随便填“无”吧？这时候TypeScript的可选属性就能帮上大忙，不用再靠写一堆判断语句来处理“可能存在也可能不存在”的情况。

先看不用可选属性的麻烦

假设你要定义一个“用户信息”的对象，要求必须有姓名、年龄，要不要加“职业”呢？如果不用可选属性，就得把所有属性都写成必填，比如：

`typescript

interface UserInfo {

name: string;

age: number;

job: string; // 这里强制要填

}

`

但实际用的时候，很多人刚入职还没确定职业，总不能硬让他填个空吧？要是漏了job，TypeScript会直接报错，代码根本跑不起来。就算你硬填个空字符串，后续代码里用job的时候，还得反复判断“是不是真的有值”，写起来特别累。

可选属性的简单实现

解决这个问题的方法很简单，就是在属性名后面加个?，告诉TypeScript：“这个属性可填可不填，就算不写也没问题”。还是刚才的用户信息例子，改完之后是这样：

`typescript

interface UserInfo {

name: string;

age: number;

job?: string; // 加个?就变成可选属性了

}

`

现在你定义对象的时候，既可以写全所有属性：

`typescript

const user1: UserInfo = {

name: "小李",

age: 28,

job: "设计师" // 没问题，必填项都填了

};

`

也可以只填必填项：

`typescript

const user2: UserInfo = {

name: "小王",

age: 22 // 少了job属性，TypeScript也不会报错

};

`

是不是比之前灵活多了？这就像你买奶茶，“加珍珠”是可选的，店家不会逼你必须加。

用可选属性时要注意的小细节

虽然可选属性好用，但用的时候得避开两个常见的坑，不然代码还是会出问题。

第一个坑：别直接用可选属性的值。比如你想输出用户的职业，直接写console.log(user2.job)，TypeScript会提示“job可能是undefined”——因为你没填这个属性，它的值就是undefined。这时候得加个简单判断，比如用??运算符（空值合并运算符）：

`typescript

// 输出职业，没填的话就显示“未知职业”

console.log(user2.job ?? "未知职业");

`

第二个坑：别硬给可选属性赋值。比如你想给user2加个职业，直接写user2.job = "实习生"是可以的，但如果写user2.job = null，TypeScript又会报错——因为我们定义的job是string类型，不是string | null，要是允许空值，得把类型声明改对。

生活化的类比再理解一下

其实可选属性就像你手机里的“常用联系人”：姓名、手机号是必须存的（必填属性），但“备注”（比如“高中同学”）是可选的——你可以写也可以不写，完全不影响联系人的基本功能。要是没有可选属性，就像手机必须让你填备注才能存联系人，想想都麻烦。

掌握了这个小技巧，你在写TypeScript代码时，就能更灵活地处理那些“不是所有信息都必须给”的场景，不用再为了必填属性硬加冗余代码，让你的代码既规范又好用。