无法调用 TS 中可能“未定义”的对象

作者

目录

Cannot invoke an object which is possibly ‘undefined’ in TS

  1. 无法调用 TS 中可能“未定义”的对象
  2. 解决 React.js 项目中的错误

无法调用在 TS 中可能是“未定义”的对象

undefined当我们尝试调用可能被标记为可选的函数属性时，会出现错误“无法调用可能是‘未定义’的对象” 。

要解决该错误，请使用可选的链接运算符 (?.)，例如
employee.doWork?.().

无法调用可能未定义的对象

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

索引.ts
type Employee = {
  doWork?: () => void;
};

const employee: Employee = {};

// ⛔️ Error: Cannot invoke an object which is possibly 'undefined'.ts(2722)
employee.doWork();

请注意，该函数
使用问号标记doWork为
可选属性。

这意味着该属性可以是一个函数或具有一个值。 undefined

使用可选的链式 (?.) 运算符来解决错误

要解决该错误，请在调用函数时使用可选的链接 (?.) 运算符。

索引.ts
type Employee = {
  doWork?: () => void;
};

const employee: Employee = {};

// ✅ Works now
employee.doWork?.();

如果引用是or
，则可选的链接 (?.)运算符会短路而不是抛出错误。undefinednull

您还可以使用此方法访问具有可能是undefined.

如果错误仍然存​​在，请查看我
在 TypeScript 文章中的 Object is possibly ‘undefined’ 错误
。

解决 React.js 项目中的错误

当传递带有标记为可选的函数的 props 时，该错误经常发生在 React.js 项目中。

这是一个例子。

应用程序.tsx
type ButtonProps = {
  onClick?: () => void;
};

function Button(props: ButtonProps) {
  // ⛔️ Error: Cannot invoke an object which is possibly 'undefined'.ts(2722)
  return <button onClick={() => props.onClick()}>Click me</button>;
}

function App() {
  return (
    <div className="App">
      <Button />
    </div>
  );
}

export default App;

onClick对象中的属性使用props问号标记为可选，因此我们不能直接调用该函数。

使用可选的链式 (?.) 运算符来解决错误

要解决该错误，请在调用函数时使用可选的链接 (?.) 运算符。

应用程序.tsx
type ButtonProps = {
  onClick?: () => void;
};
function Button(props: ButtonProps) {
  // ✅ works now
  return <button onClick={() => props.onClick?.()}>Click me</button>;
}

function App() {
  return (
    <div className="App">
      <Button />
    </div>
  );
}

export default App;

我们?.在调用onClick函数时使用了语法，所以如果引用等于undefinedor null，我们只会短路返回
undefined而不会导致任何错误。

另一方面，如果定义了函数，它将被调用。

错误的来源是 TypeScript 希望我们确保该属性没有值，undefined因为尝试调用会导致运行时错误。 undefined

使用类型保护来解决错误

因此，您可以使用任何其他用作类型
保护的方法来确保属性undefined在调用函数之前不存在。

索引.ts
type Employee = {
  doWork?: () => void;
};

const employee: Employee = {};

const result = employee.doWork && employee.doWork();

如果左边的值为真，则逻辑 AND (&&) 运算符返回右边的值。

由于is 是一个伪值，如果is undefined，我们将不会到达逻辑 AND (&&) 运算符右侧的代码。employee.doWorkundefined

如果错误仍然存​​在，请查看我
在 TypeScript 文章中的 Object is possibly ‘undefined’ 错误
。