接口继承打字稿答案

【问题标题】：Interface inheriting Type script接口继承打字稿
【发布时间】：2017-06-13 06:20:29
【问题描述】：

我只想写一个用户模块，它有多个类，即 UserDetail、UserResestPassword 等等。

这些类将共享一些公共属性，一种方法是我可以在每个类上声明属性并对其进行初始化。

第二种方法是我将使用需要声明的继承界面

export interface Iuser {
    UserID:string;
    UserName:string
}

并将其实现到类中

 import {Iuser} from './IuserDetail'

 class UserInfo  implements Iuser {}

我的问题是，打字稿不支持吗？如果不是，有什么办法解决这个问题

【问题讨论】：

不支持什么？如果你想继承使用类和extends关键字。
@Saravana 我收到以下错误，没有导出成员“UserInfo”。并按照我的扩展类导出类 UserInfo 扩展 Iuser{}
请用一个完整的例子更新您的问题。

标签： oop typescript inheritance

【解决方案1】：

在 TypeScript 中有一个称为“类型擦除”的功能，在编译期间会删除所有类型信息，因此 JavaScript 输出不包含类型注释、接口或环境声明 - 仅包含真实代码。

这意味着当您要求您的模块加载器（在运行时）为您获取 Iuser 接口时，它在 JavaScript 文件中不存在。

我的建议可能是将您的接口与它们的主要实现放在文件中。这意味着您最终不会尝试加载只是一个空白文件的模块。

例如：

export interface Iuser {
    UserID:string;
    USerName:string

}

export class UserInfo  implements Iuser {
}

您可以在其他文件中：

import * as User from './UserInfo'

export class Example implements User.Iuser {
}

【讨论】：

【解决方案2】：

看看这个example：

接口在编译后实际上并不存在，但严格用于类型检查。

// i-user.ts

export interface IUser {
    UserID:string;
    UserName:string
}

就像其他语言中的接口一样，您必须实现接口的所有成员。 TypeScript 将检查您是否缺少任何内容。

// user-info.ts

import { IUser } from './i-user'

export class UserInfo implements IUser {
    UserID:string;
    UserName:string;
    OtherInfo:string;
}

使用extend，所有父方法都可用，无需再次实现。

// specific-user-info.ts

import { UserInfo } from './user-info'

class SpecificUserInfo extends UserInfo {
    logInfo() {
        console.log(this.UserID, this.UserName);
    }
}

【讨论】：