Как я могу создать объект на основе определения файла интерфейса в TypeScript?

Если вам нужен пустой объект интерфейса, вы можете сделать только:

var modal = <IModal>{};

Преимущество использования интерфейсов вместо классов для структурирования данных заключается в том, что, если у вас нет каких-либо методов в классе, он будет отображаться в скомпилированном JS как пустой метод. Пример:

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

компилируется в

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

который не имеет значения. С другой стороны, интерфейсы вообще не отображаются в JS, сохраняя при этом преимущества структурирования данных и проверки типов.

Если вы используете React, синтаксический анализатор будет подавлять традиционный синтаксис, поэтому была использована альтернатива для использования в файлах .tsx.

let a = {} as MyInterface;

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

Я думаю, что у вас есть в основном пять различных опций. Выбор среди них может быть легким в зависимости от цели, которую вы хотели бы достичь.

Лучший способ в большинстве случаев использовать использовать класс и создавать его, потому что вы используете 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;
    //...
}

С другой стороны, например, во время модульного тестирования вашего кода (если вы не можете часто применять разделение проблем), вы можете принять недостатки ради производительности. Вы можете применять другие методы для создания mocks в основном для больших сторонних интерфейсов *.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 должен предоставить новый уровень абстракции, если использовать его мудро и последовательно. Я думаю, только потому, что вы можете уволить их в большинстве случаев из вашего собственного кода, вы не должны.

Вы можете сделать

var modal = {} as IModal 

Так как я не нашел равного ответа в топе, и мой ответ другой. Я делаю:

modal: IModal = <IModal>{}

Используя ваш интерфейс вы можете сделать

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