TypeScript 中 Binding element ‘X’ implicitly has an ‘any’ type 错误

TypeScript 2月前 80

当我们没有在函数中设置对象参数的类型时，会出现“Binding element ‘X’ implicitly has an ‘any’ type”的错误。要解决该错误，请确保明确键入函数的对象参数。

下面是错误如何在函数和类方法中发生的示例。

// 👇️ With Functions 👇️
// ⛔️ Error: Binding element 'id' implicitly
// has an 'any' type.ts(7031)
function getEmployee({ id, name }) {
  return { id, name };
}

// 👇️ With Class methods 👇️
class Employee {
  id: number;
  name: string;

  // ⛔️ Error: Binding element 'name' implicitly
  // has an 'any' type.ts(7031)
  constructor({ id, name }) {
    this.id = id;
    this.name = name;
  }
}

TypeScript 中 Binding element 'X' implicitly has an 'any' type 错误

问题是函数将对象作为参数，我们解构对象的属性，但不键入对象。

这意味着对象属性的类型被隐式设置为任何。

要解决该错误，请通过用冒号分隔对象参数及其类型来键入对象。

// 👇️ With Functions 👇️
function getEmployee({ id, name }: { id: number; name: string }) {
  return { id, name };
}

// 👇️ With class methods 👇️
class Employee {
  id: number;
  name: string;

  constructor({ id, name }: { id: number; name: string }) {
    this.id = id;
    this.name = name;
  }
}

如果不想显式键入对象参数，但需要抑制错误，请使用 any 类型。

function getEmployee({ id, name }: any) {
  return { id, name };
}

class Employee {
  id: number;
  name: string;

  constructor({ id, name }: any) {
    this.id = id;
    this.name = name;
  }
}

any 类型有效地关闭了类型检查，应该谨慎使用。

在 TypeScript 中键入对象参数时，请始终确保用冒号分隔参数定义和类型。例如，这不是有效的语法。

// ⛔️ Binding element 'number' implicitly has an 'any' type.
function getEmployee({ id: number, name: string }) {
  return { id, name };
}

我们在示例中所做的是解构 id 属性并将其命名为数字。

并从对象中解构 name 属性并将其命名为字符串。

相反，类型应该单独定义。

function getEmployee({ id, name }: { id: number; name: string }) {
  return { id, name };
}

如果我们的函数定义太忙，请将对象类型提取到类型别名或接口中。

type Employee = {
  id: number;
  name: string;
  tasks: string[];
};

function getEmployee({ id, name, tasks }: Employee) {
  return { id, name, tasks };
}