如何基于类型记录中的接口文件定义创建对象?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (15)

我定义了这样一个接口:

interface IModal {
    content: string;
    form: string;
    href: string;
    $form: JQuery;
    $message: JQuery;
    $modal: JQuery;
    $submits: JQuery;
 }

我定义了这样一个变量:

var modal: IModal;

然而,当我试图设置模态的属性时,它给了我一条消息:

"cannot set property content of undefined"

有人能帮我吗?使用接口来描述我的模态对象可以吗?如果可以,我应该如何创建它?

提问于
用户回答回答于

如果要在其他地方创建“模态”变量,并且希望告诉类型记录全部完成,则可以使用:

declare var modal: IModal;

如果想要创建一个变量,它实际上是类型记录中的IModal实例,那么需要完全定义它。

var modal: IModal = {
    content: '',
    form: '',
    href: '',
    $form: null,
    $message: null,
    $modal: null,
    $submits: null
};

或者使用类型断言来说谎,但是将失去类型安全性,因为现在将在意外的地方得到未定义的信息,并且在访问时可能会出现运行时错误。modal.content以此类推。

var modal = <IModal>{};

示例类

class Modal implements IModal {
    content: string;
    form: string;
    href: string;
    $form: JQuery;
    $message: JQuery;
    $modal: JQuery;
    $submits: JQuery;
}

var modal = new Modal();

如果Modal类是IModal接口的唯一实现,那么可能希望完全删除该接口并使用

var modal: Modal = new Modal();

而不是

var modal: IModal = new Modal();
用户回答回答于

如果想要一个接口的空对象,可以执行以下操作:

var modal = <IModal>{};

使用接口代替类来构造数据的优点是,如果类上没有任何方法,它将在编译后的JS中显示为空方法。例子:

class TestClass {
    a: number;
    b: string;
    c: boolean;
}

编译成

var TestClass = (function () {
    function TestClass() {
    }
    return TestClass;
})();

没有价值。另一方面,接口在JS中根本没有出现,同时仍然提供数据结构和类型检查的好处。

扫码关注云+社区