解构 TypeScript 函数中的对象参数

作者

解构 TypeScript 函数中的对象参数

Destructuring Object parameters in TypeScript functions

在函数中解构对象参数时，用冒号分隔解构的参数和特定属性的类型

索引.ts
// ✅ Destructuring without default properties
function getPerson({ name, age }: { name: string; age: number }) {
  return { name, age };
}

console.log(getPerson({ name: 'Bobby', age: 30 }));

// ✅ Destructuring with default properties
function getPerson2(
  { name = 'Bobby', age }: { name?: string; age: number }
) {
  return { name, age };
}

console.log(getPerson2({ age: 30 }));

不幸的是，当解构 TypeScript 函数中的参数时，我们必须

在键入它们时重复属性。

第一个示例展示了如何解构对象参数的name和属性。age

索引.ts
function getPerson({ name, age }: { name: string; age: number }) {
  return { name, age };
}

console.log(getPerson({ name: 'Bobby', age: 30 }));

我们没有为第一个示例中的属性提供默认值，并且这两个属性都是必需的，因为它们没有使用

问号标记为可选。

使用默认值解构对象参数

第二个示例演示如何从一个对象中解构两个属性并为其中一个属性设置默认值。

索引.ts
function getPerson2(
  { name = 'Bobby', age }: { name?: string; age: number }
) {
  return { name, age };
}

console.log(getPerson2({ age: 30 }));

name我们在解构它时为属性设置一个默认值。请注意，我们使用问号将属性标记为可选。

即使您为对象属性提供了默认值，您仍然必须将该属性标记为可选并设置其类型。

如果对象的所有属性都有默认值，请改为为整个对象设置默认值。

索引.ts
function getPerson(
  { name, age }: { name: string; age: number } = {
    name: 'Bobby Hadz',
    age: 30,
  },
) {
  return { name, age };
}

console.log(getPerson()); // 👉️ { name: 'Bobby Hadz', age: 30 }

这比解构时为每个属性设置默认值要好，因为您仍然必须将
空对象传递给函数。

索引.ts
function getPerson({
  name = 'Bobby Hadz',
  age = 30,
}: {
  name?: string;
  age?: number;
}) {
  return { name, age };
}

// ✅ Works
console.log(getPerson({})); // 👉️ {name: 'Tom', age: 30}

// ⛔️ Error: Expected 1 arguments, but got 0.ts(2554)
console.log(getPerson());

即使我们在解构时为对象的所有属性提供了默认值，我们仍然需要传递一个空对象，因为对象本身是必需的。

使用类型别名或接口

如果您的函数声明太忙，请使用
类型别名。

索引.ts
type GetPersonParams = {
  name?: string;
  age: number;
};

function getPerson({ name = 'Bobby', age }: GetPersonParams) {
  return { name, age };
}

console.log(getPerson({ age: 30 }));

这更容易阅读，因为我们可以清楚地看到该name属性具有默认值并且该函数需要一个 type 的对象GetPersonParams。

在函数体内使用解构

或者，您可以在函数体内使用解构。

索引.ts
type GetPersonParams = {
  name: string;
  age: number;
};

function getPerson(obj: GetPersonParams) {
  const { name, age } = obj;

  return { name, age };
}

console.log(getPerson({ name: 'Bobby', age: 30 }));

您选择哪种方法是个人喜好的问题。您也可以在函数体内解构时设置默认值。

索引.ts
type GetPersonParams = {
  name?: string;
  age: number;
};

function getPerson(obj: GetPersonParams) {
  const { name = 'Bobby Hadz', age } = obj;

  return { name, age };
}

// 👇️ {name: 'Bobby Hadz', age: 30}
console.log(getPerson({ age: 30 }));

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