very confused codes, which Point is class & which Point is Interface

[xgqfrms]

very confused codes, which Point is class & which Point is Interface

Point.prototype.distanceFromOrigin = function (this: Point, point: Point)

no-implicit-any-for-this

codes comes from the typescript official docs

http://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#no-implicit-any-for-this

// 

class Point {
    constructor(public x, public y) {
        // ...
    }
    getDistance(p: Point) {
        let dx = p.x - this.x;
        let dy = p.y - this.y;
        return Math.sqrt(dx ** 2 + dy ** 2);
    }
}


// Reopen the interface.
interface Point {
    distanceFromOrigin(point: Point): number;
}

// Point.prototype.distanceFromOrigin = function (point: Point) {
//     return this.getDistance({
//         x: 0,
//         y: 0,
//     });
// }

// ???
Point.prototype.distanceFromOrigin = function (this: Point, point: Point) {
    return this.getDistance({
        x: 0,
        y: 0,
    });
}

[xgqfrms]

Playground

http://www.typescriptlang.org/play/index.html#src=%22use%20strict%22%3B%0D%0A%0D%0A%2F**%0D%0A%20*%0D%0A%20*%20%40author%20xgqfrms%0D%0A%20*%20%40license%20MIT%0D%0A%20*%20%40copyright%20xgqfrms%0D%0A%20*%20%40created%202019.06.06%0D%0A%20*%0D%0A%20*%20%40description%0D%0A%20*%20%40augments%0D%0A%20*%20%40example%0D%0A%20*%20%40link%0D%0A%20*%0D%0A%20*%2F%0D%0A%0D%0Aclass%20Point%20%7B%0D%0A%20%20%20%20constructor(public%20x%2C%20public%20y)%20%7B%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20...%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20getDistance(p%3A%20Point)%20%7B%0D%0A%20%20%20%20%20%20%20%20let%20dx%20%3D%20p.x%20-%20this.x%3B%0D%0A%20%20%20%20%20%20%20%20let%20dy%20%3D%20p.y%20-%20this.y%3B%0D%0A%20%20%20%20%20%20%20%20return%20Math.sqrt(dx%20**%202%20%2B%20dy%20**%202)%3B%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0A%0D%0A%0D%0A%2F%2F%20Reopen%20the%20interface.%0D%0Ainterface%20Point%20%7B%0D%0A%20%20%20%20distanceFromOrigin(point%3A%20Point)%3A%20number%3B%0D%0A%7D%0D%0A%0D%0A%2F%2F%20Point.prototype.distanceFromOrigin%20%3D%20function%20(point%3A%20Point)%20%7B%0D%0A%2F%2F%20%20%20%20%20return%20this.getDistance(%7B%0D%0A%2F%2F%20%20%20%20%20%20%20%20%20x%3A%200%2C%0D%0A%2F%2F%20%20%20%20%20%20%20%20%20y%3A%200%2C%0D%0A%2F%2F%20%20%20%20%20%7D)%3B%0D%0A%2F%2F%20%7D%0D%0A%0D%0APoint.prototype.distanceFromOrigin%20%3D%20function%20(this%3A%20Point%2C%20point%3A%20Point)%20%7B%0D%0A%20%20%20%20return%20this.getDistance(%7B%0D%0A%20%20%20%20%20%20%20%20x%3A%200%2C%0D%0A%20%20%20%20%20%20%20%20y%3A%200%2C%0D%0A%20%20%20%20%7D)%3B%0D%0A%7D%0D%0A

[lll000111]

Okay, an example for bad code. What is your point? Here is an example for how to use interfaces and classes together. You define an interface, then classes implement it. Don't override existing names, of course that will give you problems. Such usage questions are for StackOverflow.

[jcalz]

This does belong on Stack Overflow instead of here, but the code above doesn't have anything to do with a class implementing an existing interface, and therefore isn't necessarily "bad". Instead it shows declaration merging, which is useful when you want to add methods to existing classes whose source code you can't or don't want to modify. That's what the example code is doing... specifically it shows how a this parameter helps with type checking inside the implemented extension method.

[xgqfrms]

site: stackoverflow

what's the difference between typescript Classes and Interface?

https://jameshenry.blog/typescript-classes-vs-interfaces/

https://stackoverflow.com/questions/37233735/typescript-interfaces-vs-types
https://stackoverflow.com/questions/40973074/difference-between-interfaces-and-classes-in-typescript

[jcalz]

Read about declaration merging: https://www.typescriptlang.org/docs/handbook/declaration-merging.html

[fatcerberus]

In short: Every class also carries with it an interface of the same name, in order to accurately describe its instances. Declaring interface ClassName where the class is still in scope simply merges stuff into that existing interface.