如何在TypeScript中创建一个基于接口文件定义的对象?

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

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"

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

当前回答

目前发布的许多解决方案都使用类型断言，因此如果在实现中遗漏了所需的接口属性，也不会抛出编译错误。

对于那些对其他健壮、紧凑的解决方案感兴趣的人:

选项1:实例化一个实现接口的匿名类:

new class implements MyInterface {
  nameFirst = 'John';
  nameFamily = 'Smith';
}();

选项2:创建一个实用函数:

export function impl<I>(i: I) { return i; }

impl<MyInterface>({
  nameFirst: 'John';
  nameFamily: 'Smith';
})

2019-11-05 20:25:06

其他回答

let deletedQuestionsDto = { examId: this.examId, questionId: q.id } as DeletedQuestionsDto;

2021-12-07 09:15:00

我认为你基本上有五种不同的选择。根据你想要达到的目标，从中选择可能很容易。

在大多数情况下，最好的方法是使用一个类并实例化它，因为你正在使用TypeScript来应用类型检查。

interface IModal {
    content: string;
    form: string;
    //...

    //Extra
    foo: (bar: string): void;
}

class Modal implements IModal {
    content: string;
    form: string;

    foo(param: string): void {
    }
}

即使其他方法提供了更简单的方法来从接口创建对象，你也应该考虑将你的接口分开，如果你将你的对象用于不同的事情，并且它不会导致接口过度隔离:

interface IBehaviour {
    //Extra
    foo(param: string): void;
}

interface IModal extends IBehaviour{
    content: string;
    form: string;
    //...
}

另一方面，例如在单元测试代码期间(如果您可能不经常应用关注点分离)，为了提高效率，您可能能够接受这些缺点。您可以应用其他方法来创建模拟，主要是为大型第三方*.d。ts接口。而且总是为每个巨大的接口实现完全匿名对象可能是一件痛苦的事情。

在这条路径上，你的第一个选择是创建一个空对象:

 var modal = <IModal>{};

其次，充分实现你的界面的强制性部分。无论你是调用第三方JavaScript库，它都是有用的，但我认为你应该创建一个类，就像之前那样:

var modal: IModal = {
    content: '',
    form: '',
    //...

    foo: (param: string): void => {
    }
};

第三，你可以只创建接口的一部分并创建一个匿名对象，但这样你就有责任履行合同

var modal: IModal = <any>{
    foo: (param: string): void => {

    }
};

总结一下我的答案，即使接口是可选的，因为它们没有转译成JavaScript代码，TypeScript在那里提供了一个新的抽象级别，如果使用得当和一致的话。我认为，只是因为在大多数情况下你可以在自己的代码中忽略它们，你不应该这样做。

2015-12-13 17:59:23

因为我没有在上面找到一个相等的答案，所以我的答案是不同的。我做的事:

modal: IModal = <IModal>{}

2018-01-23 09:23:38

由于问题包括TypeScript的使用，替换

var modal: IModal;

let modal: IModal = {} as IModal;

应该回答这个问题。

2021-03-18 12:47:49