TypeScript: interface method implementation

Question

How to implement a method in an interface in 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();

Expected: 2 B

Actual:

Error Cannot invoke an object which is possibly 'undefined'.ts(2722)

If the optional flag is omitted from the method fun(), then the error will be:

Property 'fun' is missing in type '{ num: number; str: string; }' but required in type 'Bar'.ts(2741)

Update 1

This is a work-around that results in what is expected, though it does not seem like the proper way to do this.

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

Spandan · Accepted Answer · 2019-12-12 23:30:12Z

15

Implement the interface in the class you are creating and then invoke.

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();

answered Dec 12, 2019 at 23:30

Spandan

2591 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Кatya · Accepted Answer · 2019-12-12 23:22:04Z

2

Typescript tells you that it is undefined because you did not provide a method to invoke in this line:

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

Try

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

answered Dec 12, 2019 at 23:22

Кatya

6372 gold badges7 silver badges18 bronze badges

Collectives™ on Stack Overflow

TypeScript: interface method implementation

Update 1

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update 1

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related