Làm cách nào để tạo một đối tượng dựa trên định nghĩa tệp giao diện trong TypeScript?

Tôi đã định nghĩa một giao diện như thế này:

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

Tôi định nghĩa một biến như thế này:

var modal: IModal;

Tuy nhiên, khi tôi cố gắng thiết lập thuộc tính của phương thức, nó cho tôi một thông báo nói rằng

"cannot set property content of undefined"

Có thể sử dụng một giao diện để mô tả đối tượng phương thức của tôi không và nếu có thì tôi nên tạo nó như thế nào?

Nếu bạn đang tạo biến "phương thức" ở nơi khác và muốn nói với TypeScript thì tất cả sẽ được thực hiện, bạn sẽ sử dụng:

declare const modal: IModal;

Nếu bạn muốn tạo một biến thực sự sẽ là một thể hiện của IModal trong TypeScript, bạn sẽ cần xác định đầy đủ.

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

Hoặc nói dối, với xác nhận loại, nhưng bạn sẽ mất an toàn loại vì bây giờ bạn sẽ không xác định được ở những nơi không mong muốn và có thể là lỗi thời gian chạy, khi truy cập modal.content, v.v. (các thuộc tính mà hợp đồng nói sẽ ở đó).

const modal = {} as IModal;

Lớp mẫu

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

const modal = new Modal();

Bạn có thể nghĩ "hey đó thực sự là một bản sao của giao diện" - và bạn đã đúng. Nếu lớp Modal là triển khai duy nhất của giao diện IModal, bạn có thể muốn xóa hoàn toàn giao diện và sử dụng ...

const modal: Modal = new Modal();

Thay vì

const modal: IModal = new Modal();

Nếu bạn muốn một đối tượng trống của giao diện, bạn có thể thực hiện chỉ:

var modal = <IModal>{};

Ưu điểm của việc sử dụng các giao diện thay cho các lớp để cấu trúc dữ liệu là nếu bạn không có bất kỳ phương thức nào trên lớp, nó sẽ hiển thị trong JS được biên dịch dưới dạng một phương thức trống. Thí dụ:

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

biên dịch thành

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

mà không mang giá trị. Mặt khác, các giao diện, hoàn toàn không hiển thị trong JS mà vẫn cung cấp các lợi ích của cấu trúc dữ liệu và kiểm tra kiểu.

Nếu bạn đang sử dụng React, trình phân tích cú pháp sẽ bóp nghẹt cú pháp truyền thống để một giải pháp thay thế được giới thiệu để sử dụng trong các tệp .tsx

let a = {} as MyInterface;

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

Tôi nghĩ rằng về cơ bản bạn có năm lựa chọn khác nhau để làm như vậy. Lựa chọn trong số họ có thể dễ dàng tùy thuộc vào mục tiêu bạn muốn đạt được.

Cách tốt nhất trong hầu hết các trường hợp để sử dụng một lớp và khởi tạo nó , bởi vì bạn đang sử dụng TypeScript để áp dụng kiểm tra kiểu.

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

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

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

    foo(param: string): void {
    }
}

Ngay cả khi các phương pháp khác đang cung cấp các cách dễ dàng hơn để tạo một đối tượng từ một giao diện, bạn nên xem xét tách giao diện của mình ra, nếu bạn đang sử dụng đối tượng của mình cho các vấn đề khác nhau và nó không gây ra sự phân tách quá mức về giao diện:

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

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

Mặt khác, ví dụ trong quá trình kiểm tra đơn vị mã của bạn (nếu bạn không thể áp dụng phân tách mối quan tâm thường xuyên), bạn có thể chấp nhận những hạn chế vì lợi ích của năng suất. Bạn có thể áp dụng các phương pháp khác để tạo giả chủ yếu cho các giao diện * .d.ts của bên thứ ba lớn. Và nó có thể là một nỗi đau khi luôn luôn thực hiện đầy đủ các đối tượng ẩn danh cho mọi giao diện lớn.

Trên đường dẫn này, tùy chọn đầu tiên của bạn là tạo một đối tượng trống :

 var modal = <IModal>{};

Thứ hai để nhận ra đầy đủ các phần bắt buộc trong giao diện của bạn . Nó có thể hữu ích cho dù bạn đang gọi các thư viện JavaScript của bên thứ 3, nhưng tôi nghĩ bạn nên tạo một lớp thay thế, như trước đây:

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

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

Thứ ba, bạn có thể tạo chỉ một phần của giao diện của mình và tạo một đối tượng ẩn danh , nhưng theo cách này, bạn có trách nhiệm thực hiện hợp đồng

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

    }
};

Tóm tắt câu trả lời của tôi ngay cả khi các giao diện là tùy chọn, vì chúng không được dịch mã JavaScript, TypeScript có sẵn để cung cấp một mức độ trừu tượng mới, nếu được sử dụng một cách khôn ngoan và nhất quán. Tôi nghĩ, chỉ vì bạn có thể loại bỏ chúng trong hầu hết các trường hợp từ mã của riêng bạn mà bạn không nên.

Bạn có thể làm

var modal = {} as IModal 

Vì tôi không tìm thấy câu trả lời bằng nhau ở đầu và câu trả lời của tôi là khác nhau. Tôi làm:

modal: IModal = <IModal>{}

Sử dụng giao diện của bạn, bạn có thể làm

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.
  }
}

Đây là một cách tiếp cận khác:

Bạn có thể chỉ cần tạo một đối tượng thân thiện với ngôn ngữ như thế này

const modal: IModal = {} as IModal;

Hoặc một phiên bản mặc định dựa trên giao diện và với các mặc định hợp lý, nếu có

const defaultModal: IModal = {
    content: "",
    form: "",
    href: "",
    $form: {} as JQuery,
    $message: {} as JQuery,
    $modal: {} as JQuery,
    $submits: {} as JQuery
};

Sau đó, các biến thể của thể hiện mặc định chỉ đơn giản bằng cách ghi đè một số thuộc tính

const confirmationModal: IModal = {
    ...defaultModal,     // all properties/values from defaultModal
    form: "confirmForm"  // override form only
}

Nhiều giải pháp cho đến nay đã đăng các xác nhận loại sử dụng và do đó không ném các lỗi biên dịch nếu các thuộc tính giao diện được yêu cầu bị bỏ qua trong quá trình thực hiện.

Đối với những người quan tâm đến một số giải pháp mạnh mẽ, nhỏ gọn khác :

Tùy chọn 1: Khởi tạo một lớp ẩn danh thực hiện giao diện:

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

Tùy chọn 2: Tạo chức năng tiện ích:

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

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

Bạn có thể đặt giá trị mặc định bằng cách sử dụng Class.

Không có Trình xây dựng lớp:

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}

Với lớp xây dựng

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}