绑定元素“X”隐式具有“任何”类型 [已解决]

作者

目录

Binding element ‘X’ implicitly has an ‘any’ type in TS

  1. 绑定元素“X”在 TypeScript 中隐式具有“任何”类型
  2. 绑定元素“X”在 React.js 中隐式具有“任何”类型

如果您在使用 React.js 时遇到错误，请单击第二个副标题。

绑定元素 ‘X’ 在 TypeScript 中隐式具有 ‘any’ 类型

当我们没有在函数中设置对象参数的类型时，会出现“绑定元素隐式具有‘任何’类型”的错误。

要解决该错误，请确保明确键入函数的对象参数。

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

索引.ts
// 👇️ 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;
  }
}

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

这意味着对象属性的类型隐式设置为. any

正确输入对象参数

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

索引.ts
// 👇️ 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。

索引.ts
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 中键入对象参数时，请始终确保用冒号分隔参数定义和类型。例如，这不是有效的语法。

索引.ts
// ⛔️ Binding element 'number' implicitly has an 'any' type.
function getEmployee({ id: number, name: string }) {
  return { id, name };
}
我们在示例中所做的是解构id属性并将其命名为number.

并name从对象中解构属性并将其命名为
string.

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

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

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

索引.ts
type Employee = {
  id: number;
  name: string;
  tasks: string[];
};

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

这更容易阅读，尤其是当您的函数采用的对象包含许多属性时。

想了解更多有关在 TypeScript 中键入对象的信息吗？ 查看这些资源： 如何在 TypeScript 中初始化类型化的空对象，在 TypeScript 中声明和键入嵌套对象，在 TypeScript 中声明返回对象或数组的函数。

绑定元素 ‘X’ 在 React.js 中隐式具有 ‘any’ 类型

当我们定义一个函数时会出现“Binding element implicitly has an ‘any’ type”的错误，例如一个React组件将一个对象作为参数但没有为对象设置类型。

要解决该错误，请确保明确键入函数的对象参数。

下面是错误如何发生的示例。

应用程序.tsx
// ⛔️ Error: Binding element 'children' implicitly has an 'any' type.ts(7031)
const Button = ({children, ...props}) => {
  const {onClick, name} = props;

  return (
    <div>
      <h1>Hello {name}</h1>
      <button onClick={onClick}>{children}</button>
    </div>
  );
};
该Button组件采用对象参数 (the ) 并尝试从中解构属性，但我们尚未设置对象的类型。 props

要解决该错误，请使用React.FunctionComponent类型并键入对象参数。

应用程序.tsx
type ButtonProps = {
  onClick(): void;
  name: string;
  children: React.ReactNode;
};

const Button: React.FunctionComponent<ButtonProps> = ({children, ...props}) => {
  const {onClick, name} = props;

  return (
    <div>
      <h1>Hello {name}</h1>
      <button onClick={onClick}>{children}</button>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <Button name="James" onClick={() => console.log('Button clicked')}>
        <span>Click me</span>
      </Button>
    </div>
  );
}

export default App;

示例中的组件Button采用具有children,
onClick和name属性的对象。

如果您不知道对象上特定属性的类型并希望关闭类型检查，请将其类型设置为any.

请注意，属性的类型children设置为ReactNode.

直接输入对象

另一种方法是直接键入对象。

应用程序.tsx
type ButtonProps = {
  onClick(): void;
  name: string;
  children: React.ReactNode;
};

// 👇️ Type function parameter inline
const Button = ({children, ...props}: ButtonProps) => {
  const {onClick, name} = props;

  return (
    <div>
      <h1>Hello {name}</h1>
      <button onClick={onClick}>{children}</button>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <Button name="James" onClick={() => console.log('Button clicked')}>
        <span>Click me</span>
      </Button>
    </div>
  );
}

export default App;

请注意，我们没有使用FunctionComponent示例中的类型。

这种方法与使用类型化组件之间的主要区别在于类型将函数的返回类型设置为，而我们没有在上面的函数中明确地这样做。 FunctionComponent FunctionComponent ReactElement | null

如果您尝试键入一个将对象作为参数但不是 React 组件的函数，这应该是您的首选方法。

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

请注意，我们用冒号分隔对象参数及其类型。以下是无效的语法。

索引.ts
// ⛔️ Binding element implicitly has an 'any' type.ts(7031)
function example({name: string, age: number}) {
  return {name, age};
}

我们name从对象参数中解构该属性，并将其命名为string.

然后，我们解构该age属性并将其命名为number。

始终确保用冒号分隔对象参数及其类型。

如果您的函数定义看起来很忙，请使用
类型别名或
接口。

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

function example({name, age}: Person) {
  return {name, age};
}

这更容易阅读，尤其是当您的对象参数具有许多属性时。

# 禁用类型检查

如果您不知道对象属性的类型并希望禁用类型检查，请将其类型设置为any.

索引.ts
type Person = {
  name: string;
  age: number;
  veryComplicated: any; // 👈️ disable type checking for property
};

// ⛔️ Binding element implicitly has an 'any' type.ts(7031)
function example({name, age, veryComplicated}: Person) {
  return {name, age, veryComplicated};
}

当我们将属性的类型设置为 时any，它实际上关闭了特定属性的类型检查。

可以使用相同的方法来
禁用整个对象参数的类型检查。

索引.ts
// 👇️ set object to any
function example({name, age, veryComplicated}: any) {
  return {name, age, veryComplicated};
}

这是不可取的，any应谨慎使用，因为它会关闭对特定值的所有类型检查。

我已经写了一篇关于
如何将对象作为 props 传递给 React TypeScript 中的组件的详细指南。

# 额外资源

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