如何基于TypeScript中的接口文件定义创建对象？

Question

我定义了这样一个接口：

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

我这样定义一个变量：

var modal: IModal;

然而，当我尝试设置modal的属性时，它会给我一个消息，说

"cannot set property content of undefined"

使用接口来描述模态对象可以吗？如果可以，我应该如何创建它？

Answer 1

如果您使用的是React，解析器将无法使用传统的cast语法，因此在中引入了一种替代方法。tsx文件

let a = {} as MyInterface;

https://www.typescriptlang.org/docs/handbook/jsx.html

Answer 2

如果需要接口的空对象，可以执行以下操作：

var modal = <IModal>{};

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

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

汇编成

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

没有任何价值。另一方面，接口在仍然提供数据结构化和类型检查的好处的情况下，根本不会出现在JS中。

Answer 3

如果您正在其他地方创建“modal”变量，并且希望告诉TypeScript这一切都将完成，您可以使用：

declare const modal: IModal;

如果您想创建一个变量，该变量实际上是TypeScript中IModal的一个实例，那么您需要完全定义它。

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

或者使用类型断言撒谎，但是您将失去类型安全性，因为您现在将在意外的地方得到未定义，并且可能在访问modal.content等（合同中说会有的属性）时出现运行时错误。

const modal = {} as IModal;

示例类

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

const modal = new Modal();

你可能会想“嘿，这真的是界面的复制品”——你是对的。如果Modal类是IModal接口的唯一实现，那么您可能希望完全删除该接口并使用。。。

const modal: Modal = new Modal();

而不是

const modal: IModal = new Modal();