blocks|key|228651|text|如果你想要一个空的接口对象，你可以只做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|228652|var+modal+=+<IModal>{};|code-block|syntax|javascript|228653|使用接口代替类来构造数据的优点是，如果在类上没有任何方法，它将在编译后的JS中显示为空方法。示例：|228654|class+TestClass+{
++++a:+number;
++++b:+string;
++++c:+boolean;
}|228655|编译成|228656|var+TestClass+=+(function+()+{
++++function+TestClass()+{
++++}
++++return+TestClass;
})();|228657|它没有任何价值。另一方面，接口根本不会出现在JS中，同时仍然提供数据结构化和类型检查的好处。|228658|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

If you want an empty object of an interface, you can do just:

<pre><code>var modal = &lt;IModal&gt;{};
</code></pre>

The advantage of using interfaces in lieu of classes for structuring data is that if you don't have any methods on the class, it will show in compiled JS as an empty method. Example:

<pre><code>class TestClass {
 a: number;
 b: string;
 c: boolean;
}
</code></pre>

compiles into

<pre><code>var TestClass = (function () {
 function TestClass() {
 }
 return TestClass;
})();
</code></pre>

which carries no value. Interfaces, on the other hand, don't show up in JS at all while still providing the benefits of data structuring and type checking.

blocks|key|228701|text|你可以做到|type|unstyled|depth|inlineStyleRanges|entityRanges|data|228702|var+modal+=+{}+as+IModal+|code-block|syntax|javascript|228703|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can do

<pre><code>var modal = {} as IModal 
</code></pre>

blocks|key|228747|text|因为我没有在上面找到一个相等的答案，所以我的答案是不同的。我有：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|228748|modal:+IModal+=+<IModal>{}|code-block|syntax|javascript|228749|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Since I haven't found an equal answer in the top and my answer is different.
I do:

<pre><code>modal: IModal = &lt;IModal&gt;{}
</code></pre>

blocks|key|228774|text|您可以使用Class设置默认值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|228775|如果没有类构造函数：|228776|interface+IModal+{
++content:+string;
++form:+string;
++href:+string;
++isPopup:+boolean;
};

class+Modal+implements+IModal+{
++content+=+"";
++form+=+"";
++href:+string;++//+will+not+be+added+to+object
++isPopup+=+true;
}

const+myModal+=+new+Modal();
console.log(myModal);+//+output:+{content:+"",+form:+"",+isPopup:+true}|code-block|syntax|javascript|228777|使用类构造函数|228778|interface+IModal+{
++content:+string;
++form:+string;
++href:+string;
++isPopup:+boolean;
}

class+Modal+implements+IModal+{
++constructor()+{
++++this.content+=+"";
++++this.form+=+"";
++++this.isPopup+=+true;
++}

++content:+string;

++form:+string;

++href:+string;+//+not+part+of+constructor+so+will+not+be+added+to+object

++isPopup:+boolean;
}

const+myModal+=+new+Modal();
console.log(myModal);+//+output:+{content:+"",+form:+"",+isPopup:+true}|228779|entityMap^0|5|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

You can set default values using <code>Class</code>.

<h3>Without Class Constructor:</h3>

<pre><code>interface IModal {
 content: string;
 form: string;
 href: string;
 isPopup: boolean;
};

class Modal implements IModal {
 content = "";
 form = "";
 href: string; // will not be added to object
 isPopup = true;
}

const myModal = new Modal();
console.log(myModal); // output: {content: "", form: "", isPopup: true}
</code></pre>

<h3>With Class Constructor</h3>

<pre><code>interface IModal {
 content: string;
 form: string;
 href: string;
 isPopup: boolean;
}

class Modal implements IModal {
 constructor() {
 this.content = "";
 this.form = "";
 this.isPopup = true;
 }

 content: string;

 form: string;

 href: string; // not part of constructor so will not be added to object

 isPopup: boolean;
}

const myModal = new Modal();
console.log(myModal); // output: {content: "", form: "", isPopup: true}
</code></pre>

blocks|key|446862|text|由于问题包括TypeScript的用法，因此请替换|type|unstyled|depth|inlineStyleRanges|entityRanges|data|446863|var+modal:+IModal;|code-block|syntax|javascript|446864|通过|446865|let+modal:+IModal+=+{}+as+IModal;|446866|应该回答这个问题。|446867|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Since the question includes usage of TypeScript, replacing
<pre><code>var modal: IModal;
</code></pre>
by
<pre><code>let modal: IModal = {} as IModal;
</code></pre>
should answer the question.

blocks|key|228902|text|有5种方法可以使用该接口。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|228903|interface+IStudent+{
++++++Id:+number;
++++++name:+string;
++++}
++++
++++
++++Method+1.+all+fields+must+assign+data.
+++++const++obj1:+IStudent+=+{+Id:+1,+name:+'Naveed'+};++
++++
++++Method+2.+my+favorite+one
++++const+obj2+=+{+name:+'Naveed'+}+as+IStudent+;
++++
++++Method+3.
++++const+obj3+=+<IStudent+>{name:+'Naveed'};+
++++
++++Method+4.+use+partial+interface+if+all+fields+not+required.
++++const++obj4:+Partial<IStudent+>+=+{+name:+'Naveed'+};++
++++
++++Method+5.+use+?+Mark+with+interface+fields+if+all+fields+not+required.
++++const++obj5:+IStudent+=+{++name:+'Naveed'+};++|code-block|syntax|javascript|228904|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

There are 5 ways to use the interface.
<pre><code>interface IStudent {
 Id: number;
 name: string;
 }
 
 
 Method 1. all fields must assign data.
 const obj1: IStudent = { Id: 1, name: 'Naveed' }; 
 
 Method 2. my favorite one
 const obj2 = { name: 'Naveed' } as IStudent ;
 
 Method 3.
 const obj3 = &lt;IStudent &gt;{name: 'Naveed'}; 
 
 Method 4. use partial interface if all fields not required.
 const obj4: Partial&lt;IStudent &gt; = { name: 'Naveed' }; 
 
 Method 5. use ? Mark with interface fields if all fields not required.
 const obj5: IStudent = { name: 'Naveed' }; 
</code></pre>

blocks|key|446677|text|使用您的界面，您可以执行以下操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|446678|class+Modal()+{
++constructor(public+iModal:+IModal)+{
+++//You+now+have+access+to+all+your+interface+variables+using+this.iModal+object,
+++//you+don't+need+to+define+the+properties+at+all,+constructor+does+it+for+you.
++}
}|code-block|syntax|javascript|446679|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Using your interface you can do

<pre><code>class Modal() {
 constructor(public iModal: IModal) {
 //You now have access to all your interface variables using this.iModal object,
 //you don't need to define the properties at all, constructor does it for you.
 }
}
</code></pre>

blocks|key|446803|text|这是我经常使用的另一个解决方案。然而，我不确定这是不是很好的做法，如果不是，请在下面评论。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|446804|///+Interface
export+default+interface+BookInterface+{
++title:+string,
++author:+string,
++id:+any
}

///+Creating+Class
export+class+BookClass+implements+BookInterface+{
++title:+string;
++author:+string;
++id:+any;

++constructor(title:+string,+author:+string,+id:+any)+{
++++this.title+=+title;
++++this.author+=+author;
++++this.id+=+id;
++}
}

///+How+to+use+it
let+book:+BookInterface+=+new+BookClass(title,+author,+id);|code-block|syntax|javascript|446805|谢谢:)|446806|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Here another solution what i am using frequently. However I am not sure is good practice or not, please comment below if not.
<pre><code>/// Interface
export default interface BookInterface {
 title: string,
 author: string,
 id: any
}

/// Creating Class
export class BookClass implements BookInterface {
 title: string;
 author: string;
 id: any;

 constructor(title: string, author: string, id: any) {
 this.title = title;
 this.author = author;
 this.id = id;
 }
}

/// How to use it
let book: BookInterface = new BookClass(title, author, id);
</code></pre>
Thanks :)

blocks|key|228821|text|你实际上不需要这个类来创建对象。您可以直接执行此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|228822|interface+IModal+{
++++content:+string;
++++form:+string;
}

onButtonSaveClick()+{
++++let+myModalClass:+IModal+=+{
++++++++content:+'foo+content',
++++++++form:+'foo+form'
++++}
}|code-block|syntax|javascript|228823|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You actually don't need the class to create the object. You can direct do this:
<pre><code>interface IModal {
 content: string;
 form: string;
}

onButtonSaveClick() {
 let myModalClass: IModal = {
 content: 'foo content',
 form: 'foo form'
 }
}
</code></pre>

blocks|key|446931|text|let+deletedQuestionsDto+=+{+examId:+this.examId,+questionId:+q.id+}+as+DeletedQuestionsDto;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|446932|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>let deletedQuestionsDto = { examId: this.examId, questionId: q.id } as DeletedQuestionsDto;
</code></pre>

I have defined an interface like this:

<pre><code>interface IModal {
 content: string;
 form: string;
 href: string;
 $form: JQuery;
 $message: JQuery;
 $modal: JQuery;
 $submits: JQuery;
 }
</code></pre>

I define a variable like this:

<pre><code>var modal: IModal;
</code></pre>

However, when I try to set the property of modal it gives me a message saying that 

<pre><code>"cannot set property content of undefined"
</code></pre>

Is it okay to use an interface to describe my modal object and if so how should I create it?

How can I create an object based on an interface file definition in TypeScript?

数据结构

TypeScript

我定义了一个这样的接口：interface IModal {    content: string;    form: string;    href: string;    $form: JQuery;    $message: JQuery;    $modal: JQuery;    $submits: JQuery; }我定义了一个这样的变量：var modal: IModal;但是，当我

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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