TypeScript：接口方法实现

Question

如何在 TypeScript 接口中实现一个方法？

interface Bar
{
    num: number;
    str: string;
    fun?(): void;
}
class Bar
{
    fun?()
    {
        console.log(this.num, this.str);
    }
}
let foo: Bar = {num: 2, str: "B"};
foo.fun();

预期结果: 2 B

实际情况:

错误 无法调用可能是 'undefined' 的对象。ts(2722)

如果从方法 fun() 中省略可选标志，则错误将为:

类型 '{ num: number; str: string; }' 中缺少属性 'fun'，但类型 'Bar' 中需要.ts(2741)

更新1

这是一个解决方法，可以得到预期结果，但看起来不像正确的方法。

if(foo.fun)
{
    foo.fun();
}

- Waleed Qidan

Answer 1

在您创建的类中实现接口，然后调用。

interface BarInterface
{
    num: number;
    str: string;
    fun: () => void;
}

class Bar implements BarInterface {
    num: number;
    str: string;

    constructor(num: number, str: string) {
        this.num = num;
        this.str = str;
    }
    fun() {
        console.log(this.num, this.str);
    }
}

let foo = new Bar(2, "B");

foo.fun();

- Spandan

Answer 2

Typescript告诉你它是未定义的，因为你没有在这一行提供一个要调用的方法：

let foo: Bar = {num: 2, str: "B"};

尝试

const myTestFun = () => {
  console.log('I am here!')
}
let foo: Bar = {num: 2, str: "B", fun: myTestFun };

- Кatya