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

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';
})

其他回答

这里是我经常使用的另一个解决方案。但是我不确定这是否是好的做法,如果不是,请在下面评论。

/// 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);

谢谢:)

该界面有5种使用方式。

 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' };  

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

var modal: IModal;

by

let modal: IModal = {} as IModal;

应该回答这个问题。

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

实际上,创建对象并不需要类。你可以直接这样做:

interface IModal {
    content: string;
    form: string;
}

onButtonSaveClick() {
    let myModalClass: IModal = {
        content: 'foo content',
        form: 'foo form'
    }
}