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

小编典典

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

all

我已经定义了一个这样的接口：

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"

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

阅读 126

2022-03-17

共1个答案

小编典典

如果你在别处创建“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();

2022-03-17