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

by

If you are creating the “modal” variable elsewhere, and want to tell TypeScript it will all be done, you would use:

declare const modal: IModal;

If you want to create a variable that will actually be an instance of IModal in TypeScript you will need to define it fully.

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

Or lie, with a type assertion, but you’ll lost type safety as you will now get undefined in unexpected places, and possibly runtime errors, when accessing modal.content and so on (properties that the contract says will be there).

const modal = {} as IModal;

Example Class

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

const modal = new Modal();

You may think “hey that’s really a duplication of the interface” – and you are correct. If the Modal class is the only implementation of the IModal interface you may want to delete the interface altogether and use…

const modal: Modal = new Modal();

Rather than

const modal: IModal = new Modal();

More Related Contents:

  1. *ngFor running an infinite loop in angular2
  2. get and set in TypeScript
  3. How do you emulate nominal typing in TypeScript?
  4. What is the question mark for in a Typescript parameter name
  5. Typescript, merge object types?
  6. TypeScript – extract interface members only – possible?
  7. How to display json object using *ngFor
  8. Combining generics with index type
  9. How do I import other TypeScript files?
  10. TypeScript and field initializers
  11. Class type check in TypeScript
  12. Typescript: Type of a property dependent on another property within the same object
  13. Get function parameter names and types in TypeScript
  14. Typescript: Why type alias satisfies a constraint but same interface doesn’t?
  15. Eliminate nevers to make union possible
  16. Union and Intersection of types
  17. TypeScript: Define a union type from an array of strings
  18. What is the “as syntax” pointed out by tslint?
  19. TypeScript sorting an array
  20. “An index signature parameter type cannot be a union type.” – what should I use instead?
  21. Detailed differences between type annotation `variable: type` and type assertion `expression as type` in TypeScript
  22. Generic and typeof T in the parameters
  23. Angular 2 loader on each http request
  24. Typescript: type narrowing not working for `in` when key is stored in a variable
  25. Run factory function on import in TypeScript?
  26. How to make “handler” lookup for “dispatcher” style function be typed correctly
  27. How do I decide whether @types/* goes into `dependencies` or `devDependencies`?
  28. How to define an interface for objects with dynamic keys?
  29. Types from both keys and values of object in Typescript
  30. Modules vs. Namespaces: What is the correct way to organize a large typescript project?

Leave a Comment