在 TS 的函数或类中设置可选参数

作者

目录

Setting optional parameters in Functions using TypeScript

  1. 使用 TypeScript 在函数中设置可选参数
  2. 在 TS 中省略一个可选参数同时提供另一个可选参数
  3. 在 TS 的类构造函数中定义可选参数

使用 TypeScript 在函数中设置可选参数

使用问号在 TypeScript 的函数中设置可选参数。

如果设置为可选，则参数可以具有类型undefined或指定类型，因为未指定的参数获得值undefined。

索引.ts
function sum(a: number, b?: number) {
  if (b) {
    return a + b;
  }

  return a + a;
}

console.log(sum(10)); // 👉️ 20
console.log(sum(10, 3)); // 👉️ 13

代码示例设置了一个没有默认值的可选参数。

下面是一个使用默认值将参数标记为可选的示例。

索引.ts
function multiply(a: number, b = 10) {
  return a * b;
}

console.log(multiply(5)); // 👉️ 50
console.log(multiply(5, 2)); // 👉️ 10

您还可以将对象参数中的属性标记为可选。

索引.ts
function getEmployee({
  name = 'Bobby',
  salary,
}: {
  name?: string; // 👈️ Mark optional
  salary: number;
}) {
  return { name, salary };
}

// 👇️ {name: 'Bobby', salary: 100}
console.log(getEmployee({ salary: 100 }));

在第一个示例中，我们将b参数标记为
可选。

索引.ts
function sum(a: number, b?: number) {
  if (b) {
    return a + b;
  }

  return a + a;
}

// ✅ These 2 lines are the same
console.log(sum(10)); // 👉️ 20
console.log(sum(10, undefined)); // 👉️ 20

可以在不提供参数的情况下调用该函数，该参数将 的值设置b为undefined。

不提供参数和提供一个值为 的参数
undefined是一样的。

必需参数不能跟在可选参数之后

请注意，必需参数不能跟在可选参数之后。

索引.ts
// ⛔️ Error: A required parameter cannot
// follow an optional parameter.ts(1016)
function sum(a?: number, b: number) {
}

您应该始终在函数参数列表的末尾指定可选参数。

隐式设置可选参数

您还可以将函数参数隐式设置为可选 – 通过为其提供默认值。

索引.ts
// ✅ Optional parameter with a default value
function multiply(a: number, b = 10) {
  return a * b;
}

console.log(multiply(5)); // 👉️ 50
console.log(multiply(5, 2)); // 👉️ 10

请注意，我们不必使用问号来?将b参数标记为可选。

我们也不必键入参数，因为 TypeScript 能够根据默认值推断其类型。

您应该始终在函数参数列表的末尾设置默认值。

如果要使用参数的默认值但需要为某些下一个参数指定值，请undefined为特定参数传递。

将对象参数中的属性设置为可选

当您有一个将对象作为参数的函数时，您可能需要将对象中的属性设置为可选或将整个对象设置为可选。

下面是一个将对象参数中的属性设置为可选的示例。

索引.ts
function getEmployee({
  name = 'bobby hadz', // 👈️ default value
  salary,
}: {
  name?: string; // 👈️ Mark optional
  salary: number;
}) {
  return { name, salary };
}

// 👇️ { name: 'bobby hadz', salary: 100 }
console.log(getEmployee({ salary: 100 }));

我们将name对象中的属性设置为可选，并为其提供默认值。

如果不需要，则不必提供默认值，但即使提供了默认值，也必须将该属性标记为可选。

让我们看看如何将整个对象参数设置为可选。

索引.ts
function getEmployee({
  name,
  salary,
}: { name?: string; salary?: number } = {}) {
  return { name, salary };
}

// 👇️ {name: undefined, salary: undefined}
console.log(getEmployee());

我们使用问号将对象中的所有属性设置为可选，并提供一个空对象作为默认值。

在 TS 中省略一个可选参数同时提供另一个可选参数

要省略一个可选参数，同时在 TypeScript 函数中提供另一个undefined可选参数，请为要省略的可选参数传递一个值，并为下一个参数提供该值。

索引.ts
function logArguments(num: number, str?: string, arr?: string[]) {
  console.log(num);
  console.log(str);
  console.log(arr);
}

// 👇️ omit the second parameter (providing 3rd)
logArguments(100, undefined, ['a', 'b', 'c']);

// 👇️ omit the third parameter
logArguments(100, 'hello');

// 👇️ omit the second and third parameters
logArguments(100);

该logArguments函数有 2 个
可选参数– 其参数列表中的第二个和第三个。

如果我们需要省略第二个参数并为第三个参数提供一个值，我们必须undefined为第二个参数传递一个值。

为函数参数传递undefined值与根本不提供值相同。

如果您不为可选参数传递值，则该参数会被分配一个值undefined。

请注意，必需参数不能跟在可选参数之后。

索引.ts
// ⛔️ Error: A required parameter cannot follow an optional parameter.ts(1016)
function logArguments(a?: number, b: number) {
}

您应该始终在函数参数列表的末尾指定可选参数。

您还可以将函数参数隐式设置为可选 – 通过为其提供默认值。

索引.ts
function logArguments(num: number, str = 'hello', arr?: string[]) {
  console.log(num);
  console.log(str);
  console.log(arr);
}

// 👇️ omit the second parameter (providing 3rd)
logArguments(100, undefined, ['a', 'b', 'c']);

/**
 * Values logged: 👇️
 *   100
 *   "hello"
 *   ['a', 'b', 'c']
 */

我们为函数的第二个参数设置一个默认值。这有效地使str参数可选。

我们在调用函数时为参数传递了一个值，这意味着函数体中undefined的值将是。strhello

请注意，我们不必使用问号?将参数设置str
为可选。

我们也不必键入参数，因为 TypeScript 能够根据默认值推断其类型。

在 TS 的类构造函数中定义可选参数

您可以使用问号在类构造函数中定义可选参数。

或者，您可以为参数设置默认值。

这是提供默认值的示例。

索引.ts
class Employee {
  // 👇️ provide default values
  constructor(public id = 0, public name = '', public tasks: string[] = []) {
    this.id = id;
    this.name = name;
    this.tasks = tasks;
  }
}

const employee = new Employee();
console.log(employee.id); // 👉️ 0

这是一个将参数标记为可选的示例。

索引.ts
class Person {
  // 👇️ mark as optional
  constructor(public address?: { country: string; city: string }) {
    this.address = address;
  }
}

const person = new Person();

console.log(person.address); // 👉️ undefined

第一个类在构造函数中使用参数的默认值来将它们标记为
可选。

请注意，我们不必键入id和name 参数，因为可以根据提供的默认值推断它们的类型。

但是，如果您为数组或对象参数提供默认值，最好显式键入参数。

如果您在实例化类时省略参数或显式
undefined为其传递值，则该参数会被分配默认值。

索引.ts
class Employee {
  // 👇️ provide default values
  constructor(public id = 0, public name = '', public tasks: string[] = []) {
    this.id = id;
    this.name = name;
    this.tasks = tasks;
  }
}


const employee = new Employee(
  undefined,
  undefined,
  ['design', 'development'],
);
console.log(employee.id); // 👉️ 0
console.log(employee.tasks); // 👉️ ['design', 'development']

undefined如果要为第一个参数之一使用默认值，则可以显式传递，但为后一个参数指定一个值。

将构造函数参数标记为可选

或者，您可以使用问号将构造函数参数标记为可选。

索引.ts
class Person {
  // 👇️ mark as optional
  constructor(public address?: { country: string; city: string }) {
    this.address = address;
  }
}

const person = new Person();

console.log(person.address); // 👉️ undefined

该address参数被标记为可选。换句话说，它可以是具有country和city属性的对象，也可以具有undefined值。

请注意，函数中的必需参数不能跟在可选参数之后。

索引.ts
class Employee {
  // ⛔️ Error: A required parameter cannot follow an optional parameter.ts(1016)
  constructor(public id?: number, public name: string) {
    this.id = id;
    this.name = name;
  }
}

该id参数被标记为可选的，因此它后面不能跟有name
必需的参数。

但是，您可以在函数定义的开头使用可选参数，后面跟着具有默认值的参数。
索引.ts
class Employee {
  // ✅ This works
  constructor(public id?: number, public name = '') {
    this.id = id;
    this.name = name;
  }
}

const employee = new Employee();
console.log(employee); // 👉️ {id: undefined, name: ''}

该id参数是可选的，后面跟name有默认值的参数。

如果您的构造函数采用对象参数，则可以使用相同的方法将其某些属性标记为可选。

索引.ts
class Person {
  constructor(public address: { country: string; city?: string }) {
    this.address = address;
  }
}

const person = new Person({ country: 'Chile' });

console.log(person.address); // 👉️ {country: 'Chile'}

该city属性被标记为可选，但是，该country属性是必需的。

下面是一个构造函数的例子，它接受一个带有可选属性的对象，并为整个对象设置一个默认值。

索引.ts
class Person {
  constructor(
    public address: { country: string; city?: string } = { country: '' },
  ) {
    this.address = address;
  }
}

const person = new Person();

console.log(person.address); // 👉️ {country: ''}

我们为整个对象参数提供了默认值，因此在实例化类时不必传递对象。

请注意，我们必须country在默认对象中指定该属性，因为它是必需的。

如果您不想为任何属性提供默认值并希望将空对象设置为默认值，请将所有属性标记为可选。

索引.ts
class Person {
  constructor(public address: { country?: string; city?: string } = {}) {
    this.address = address;
  }
}

const person = new Person();

console.log(person.address); // 👉️ {}

如果您需要将函数作为参数传递，请查看
以下文章。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：