理解 TypeScript 中的可选属性和函数参数

TypeScript 中的可选属性

在 TypeScript 中，我们可以定义一个类或接口，其中包含一些属性。在某些情况下，我们希望某些属性是可选的，也就是说对象可以包含这些属性，也可以不包含这些属性。

使用 TypeScript 中的可选属性的方式就是在属性名后面加上一个问号（?）。

interface User {
  name: string;
  age?: number;
  address?: string;
}

const user1: User = { name: 'Tom' };
const user2: User = { name: 'Jerry', age: 20 };
const user3: User = { name: 'Mary', age: 25, address: 'Beijing' };

在上面的例子中，User 接口包含了三个属性：name、age 和 address。其中，age 和 address 是可选的属性，我们可以根据需要选择是否在对象中包含它们。

TypeScript 中的可选函数参数

与可选属性类似，在 TypeScript 中我们也可以定义可选函数参数。在 TypeScript 中，函数参数可以是必需的、可选的以及有默认值的。

使用 TypeScript 中的可选函数参数的方式就是在参数名后面加上一个问号（?）。

function greet(name: string, age?: number) {
  if (age) {
    console.log(`Hello ${name}, you are ${age} years old.`);
  } else {
    console.log(`Hello ${name}.`);
  }
}

greet('Tom');
greet('Jerry', 20);

在上面的例子中，greet 函数包含了两个参数：name 和 age。其中，age 是可选参数。如果我们调用 greet 函数时只传了一个参数，那么 age 就会是 undefined。

总结

在 TypeScript 中，可以使用 ? 符号定义对象属性和函数参数的可选性。这种方式非常有用，可以提高代码的可读性和灵活性。

需要注意的是，当我们对一个可选属性或可选参数进行访问时，需要先判断其是否存在，防止出现空指针异常。同时，应该根据实际情况来选择是否使用可选属性或可选参数，以达到更好的可维护性和可扩展性。

参考代码

interface User {
  name: string;
  age?: number;
  address?: string;
}

const user1: User = { name: 'Tom' };
const user2: User = { name: 'Jerry', age: 20 };
const user3: User = { name: 'Mary', age: 25, address: 'Beijing' };

function greet(name: string, age?: number) {
  if (age) {
    console.log(`Hello ${name}, you are ${age} years old.`);
  } else {
    console.log(`Hello ${name}.`);
  }
}

greet('Tom');
greet('Jerry', 20);

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a22cc2add4f0e0ffa3be86