example - ¿Cómo puedo crear un objeto basado en una definición de archivo de interfaz en TypeScript?

typescript version

Question

He definido una interfaz como esta:

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

Defino una variable como esta:

var modal: IModal;

Sin embargo, cuando intento establecer la propiedad modal, me da un mensaje que dice:

"cannot set property content of undefined"

¿Puede alguien ayudarme con esto? ¿Está bien usar una interfaz para describir mi objeto modal y, de ser así, cómo debería crearlo?

Answer 1

Como no he encontrado una respuesta igual en la parte superior y mi respuesta es diferente, lo hago:

modal: IModal = <IModal>{}

Answer 2

Creo que básicamente tienes cinco opciones diferentes para hacerlo. Elegir entre ellos podría ser fácil dependiendo del objetivo que le gustaría alcanzar.

La mejor manera en la mayoría de los casos es usar una clase y crear instancias , porque está usando TypeScript para aplicar la verificación de tipos.

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

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

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

    foo(param: string): void {
    }
}

Incluso si otros métodos ofrecen formas más sencillas de crear un objeto desde una interfaz, debería considerar separar su interfaz , si está utilizando su objeto para diferentes asuntos, y no causa una sobre segregación de la interfaz:

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

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

Por otro lado, por ejemplo, durante la prueba de unidad de su código (si no puede aplicar la separación de las preocupaciones con frecuencia), es posible que pueda aceptar los inconvenientes por el bien de la productividad. Puede aplicar otros métodos para crear simulaciones principalmente para interfaces de terceros grandes * .d.ts. Y podría ser una molestia implementar siempre objetos anónimos completos para cada interfaz enorme.

En esta ruta, su primera opción es crear un objeto vacío :

 var modal = <IModal>{};

En segundo lugar, realizar completamente la parte obligatoria de su interfaz . Puede ser útil si llama bibliotecas de JavaScript de terceros, pero creo que debería crear una clase en su lugar, como antes:

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

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

En tercer lugar, puede crear solo una parte de su interfaz y crear un objeto anónimo , pero de esta manera usted es responsable de cumplir el contrato.

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

    }
};

Resumiendo mi respuesta, incluso si las interfaces son opcionales, ya que no se transponen a código JavaScript, TypeScript está ahí para proporcionar un nuevo nivel de abstracción, si se utiliza de forma inteligente y coherente. Creo que, solo porque puedes descartarlos en la mayoría de los casos desde tu propio código, no deberías.

Answer 3

Si desea un objeto vacío de una interfaz, puede hacer simplemente:

var modal = <IModal>{};

La ventaja de utilizar interfaces en lugar de clases para estructurar datos es que, si no tiene ningún método en la clase, se mostrará en JS compilado como un método vacío. Ejemplo:

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

compila en

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

que no tiene valor Las interfaces, por otro lado, no aparecen en JS al tiempo que proporcionan los beneficios de la estructuración de datos y la verificación de tipos.

Answer 4

Si está creando la variable "modal" en otro lugar, y quiere contarle a TypeScript, todo estará hecho, usaría:

declare var modal: IModal;

Si desea crear una variable que realmente sea una instancia de IModal en TypeScript, tendrá que definirla completamente.

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

O miente, con una afirmación de tipo, pero perderás la seguridad de tipo ya que ahora estarás indefinido en lugares inesperados, y posiblemente errores de tiempo de ejecución, cuando modal.content a modal.content y demás (propiedades que el contrato dice que estarán allí).

var modal = <IModal>{};

Clase de ejemplo

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

var modal = new Modal();

Puedes pensar "hey, eso es realmente una duplicación de la interfaz", y estás en lo cierto. Si la clase Modal es la única implementación de la interfaz IModal, es posible que desee eliminar la interfaz por completo y usar ...

var modal: Modal = new Modal();

Más bien que

var modal: IModal = new Modal();

Answer 5

Si usa React, el analizador se bloqueará con la sintaxis de conversión tradicional, por lo que se presentó una alternativa para su uso en archivos .tsx

let a = {} as MyInterface;

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

Answer 6

Tu puedes hacer

var modal = {} as IModal 

Answer 7

Usando tu interfaz puedes hacer

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