如何在类上实现接口？答案

【问题标题】：How to implements interface on class?如何在类上实现接口？
【发布时间】：2019-03-12 23:31:47
【问题描述】：

我有一个名为 Greeter 的自定义类。它有一个名为fromJson 的方法，它将一个对象作为参数并将该对象的所有属性分配给该类。我使用了一个名为 GreeterInterface 的接口来对类和对象参数进行类型检查。

interface GreeterInterface { 
    greeting: string;
    name: string;
    lastname: string;
    age: number; 
}
class Greeter implements GreeterInterface{
    constructor(message: string) {
        this.greeting = message;
    }
    fromJson(obj: object) { 
        Object.assign(this, obj)
        return this;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let param: GreeterInterface = {
    greeting: 'hello',
    lastname: 'hina',
    name: 'love',
    age:1
}
let greeter = new Greeter('hola').fromJson(param);


let button = document.createElement('button');
button.textContent = "Say: ";
button.onclick = function() {
    console.log(greeter)
}

document.body.appendChild(button);

这不会编译。它说 Greeter 没有属性问候语。

【问题讨论】：

我同意编译器。必须在 TypeScript 中声明属性，因为它是静态类型的。查看typescriptlang.org/docs/handbook/classes.html 中类的定义，并注意Greeter 类顶部的额外行（声明该类具有指定的greeter 属性）。

标签： typescript inheritance interface

【解决方案1】：

接口只定义了它所应用的数据的形状，它没有定义实现。虽然你告诉 TypeScript Greeter 的形状是 GreeterInterface 你是仍然没有告诉 TypeScript 形状是如何实现的。可以通过多种方式实现单个形状，并且 TS 不假设您想要实现什么。这是一个例子：

interface GreeterInterface { 
    greeting: string;
    name: string;
    lastname: string;
    age: number; 
}

class Greeter implements GreeterInterface{
    greeting: "Hola" | "Hello";
    name: string;
    lastname: string;

    private _age: number;

    get age(): number {
        return this._age;
    }

    set age(value: number) {
        this._age = value;
    }

    constructor(message: "Hola" | "Hello") {
        this.greeting = message;
    }
    fromJson(obj: object) { 
        Object.assign(this, obj)
        return this;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

GreeterInterface 指定的形状表明greeting 字段应该是string，但Greeter 用更窄的类型实现了它，这是完全有效的。同样，age 可能只是一个字段，但Greeter 将其实现为 getter/setter，这也是有效的。

【讨论】：

【解决方案2】：

找到了解决办法。我将构造函数更改为 constructor(obj: GreeterInterface) 而不是 fromJson，因为使用 Louis 解决方案时，TypeScript 抱怨“没有初始化程序，并且未在构造函数中明确分配”

interface GreeterInterface {
    greeting: string;
    name: string;
    lastname: string;
    age: number;
}

class Greeter implements GreeterInterface{

    age: number;
    greeting: string;
    lastname: string;
    name: string;

    constructor(obj: GreeterInterface) {
        this.lastname =  obj.lastname;
        this.greeting =  obj.greeting;
        this.name =  obj.name;
        this.age =  obj.age;
    }

    greet() {
        return "Hello, " + this.greeting;
    }
}

let param: GreeterInterface = {
    greeting: 'hello',
    lastname: 'hina',
    name: 'love',
    age:1
}
let greeter = new Greeter(param);


let button = document.createElement('button');
button.textContent = "Say: ";
button.onclick = function() {
    console.log(greeter)
}

document.body.appendChild(button)

【讨论】：