Cannot invoke an object which is possibly ‘undefined‘

这是ts中的错误提示：

Cannot invoke an object which is possibly 'undefined'

报错场景：

定义interface接口的时候sayHi方法使用的是可选属性，可以有可以没有，

当在实际方法中调用sayHi方法的时候报错了，

问：

interface Person {
name: string,
age?: number,
sayHi?(): string
}
const person:Person = {
name: '黎明',
age: 18,
sayHi() {
console.log(你好我叫${this.name},今年${this.age}了)
return 你好我叫${this.name},今年${this.age}了
}
}
person.sayHi()
报错：
Cannot invoke an object which is possibly 'undefined'.(2722)
(method) Person.sayHi?(): string
No quick fixes available

回答：

这个报错是因为在接口定义中，`sayHi` 方法被标记为可选的（optional），而你在实现对象 `person` 中确实定义了 `sayHi` 方法。然而，TypeScript 无法确定在调用 `person.sayHi()` 时该方法是否存在，因此会给出这个报错。

要解决这个问题，你可以在调用 `person.sayHi()` 之前先检查一下 `sayHi` 方法是否存在。你可以使用可选链操作符（optional chaining operator）来实现这个检查，它的语法是在方法调用的点之前加上问号 `?`。这样，如果 `sayHi` 方法存在，它就会被调用，否则会返回 `undefined`。

下面是修改后的代码示例：


interface Person {
    name: string,
    age?: number,
    sayHi?(): string
}

const person: Person = {
    name: '黎明',
    age: 18,
    sayHi() {
        console.log(`你好我叫${this.name},今年${this.age}了`)
        return `你好我叫${this.name},今年${this.age}了`
    }
}

person.sayHi?.(); // 使用可选链操作符来调用 sayHi 方法


这样修改后，报错应该就消失了，而且在 `sayHi` 方法存在时会正常调用它，否则会忽略调用。