如何从接口调用函数？

Question

我有一个Angular 5应用，我想有一个定义如下功能的接口：

interface PersonInfo {
    getName(): string;
}

我希望另一个接口具有一个函数，该函数的其中一个函数返回上述类型：

interface Parser{
    getPersonInfo(document: string): PersonInfo;
}

然后，我想在我的主要组件中使用它，如下所示。

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage implements PersonInfo, Parser {

    constructor() {
        const pi: PersonInfo = this.getPersonInfo('test');
        console.log(pi.getName());
    }
    public getName(): string{
        return 'getname';
    }
    public getPersonInfo(document: string): PersonInfo{
        const pi: PersonInfo  = {
            getName(){
                return 'getPersonInfo - getName()';
            }
        };

        return pi;
    }
}

问题是在console.log(ci.getName()); ，我的网站给我一个TypeError: ci.getName is not a function错误TypeError: ci.getName is not a function 。

我不确定如何获取getPersonInfo设置名称...然后getName()返回该名称...然后在构造函数（或其他函数）中调用这些函数并获取名称。 有什么帮助吗？

Answer 1

我看到的第一个问题是，您向TSC断言所创建的“ pi”对象符合“ PersonInfo”，但是缺少“ getName（）”属性。

尝试这个：

public getPersonInfo(document: string): PersonInfo {
    const pi: PersonInfo = {
        getName() {
            return 's';
        }
    };

    return pi;
}

尽可能避免使用“ foo as Bar”语法，这似乎是一种替代方法，它使开发人员可以将值强制转换为编译器无法保证有效的类型。