How to Create an Object from an Interface in TypeScript

By the end of this page, you will understand what a TypeScript interface does, why let modal: IModal; does not create an object, and how to properly initialize an object that matches an interface. You will also see common patterns for object creation, optional properties, and safer ways to avoid undefined errors.

A TypeScript interface describes the shape of an object. It tells TypeScript what properties an object should have and what types those properties must use.

For example:

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

This does not create an object. It only defines a contract.

When you write:

let modal: IModal;

you are only declaring a variable that is expected to hold an object matching IModal later. At that moment, modal is still undefined.

So if you do this next:

modal.content = "Hello";

JavaScript tries to access the property on , which causes the runtime error.

Think of an interface like an architectural drawing for a house.

• The drawing tells you how many rooms the house should have.
• It does not build the house.
• Declaring let modal: IModal; is like saying, "I will have a house that follows this plan."
• But until the house is actually built, there is nothing to walk into.

So:

• interface IModal { ... } = the plan
• let modal: IModal; = a promise that a matching object will exist
• let modal: IModal = { ... } = the actual house being built

Basic syntax

1. Define the interface

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

2. Create an object that matches it

let modal: IModal = {
  content: "Modal body",
  form: "loginForm",
  href: "/login",
  $form: $("#loginForm"),
  $message: $("#message"),
  $modal: $("#myModal"),
  $submits: $("button[type='submit']")
};

Now modal is a real object, so you can safely access and update its properties:

Consider this code:

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

let modal: IModal;
modal.content = "Hello";

What happens step by step

Step 1: The interface is declared

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

TypeScript learns that any IModal object must have three string properties.

Step 2: The variable is declared

let modal: IModal;

This creates a variable named modal, but no object is assigned to it yet.

At runtime, its value is effectively:

Interfaces are commonly used anywhere you want consistent object structure.

UI state objects

A modal, dropdown, or form component often has related fields grouped into one object:

interface ModalState {
  isOpen: boolean;
  title: string;
  content: string;
}

API response shapes

When fetching data from a server, interfaces describe expected fields:

interface User {
  id: number;
  name: string;
  email: string;
}

Function parameters

Interfaces help functions accept structured input safely:

interface LoginData {
  username: string;
  password: string;
}

function submitLogin(data: LoginData) {
  console.(data.);
}

In real projects, developers rarely leave typed variables uninitialized if they plan to assign properties immediately.

Common patterns

Initialize immediately

This is the simplest and most common pattern:

const modal: IModal = {
  content: "",
  form: "",
  href: "",
  $form: $("#form"),
  $message: $("#message"),
  $modal: $("#modal"),
  $submits: $(".submit")
};

Use optional properties for delayed setup

If some values are assigned later:

interface IModal {
  content: string;
  form: string;
  href: string;
  $form?: JQuery;
}

This is useful during progressive initialization.

Use a builder or factory function

Useful when object creation logic is repeated:

1. Thinking an interface creates an object

Broken example:

interface IModal {
  content: string;
}

let modal: IModal;
modal.content = "Hi";

Problem:

• modal is declared but not initialized
• no real object exists yet

Fix:

let modal: IModal = { content: "" };

2. Declaring required properties but not providing them

Broken example:

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

let modal: IModal = {
  content: "Hello"
};

Problem:

• form is required but missing

Interface vs class

  {
  : ;
}

    {
  : ;

  () {
    . = ;
  }
}

 modal =  ();

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

Key rule

An interface defines shape only. It does not create an object.

Wrong

let modal: IModal;
modal.content = "Hello"; // runtime error

Right

let modal: IModal = {
  content: "",
  form: "",
  href: "",
  $form: $("#form"),
  $message: $("#message"),
  $modal: $(),
  : $()
};

Does a TypeScript interface create an object?

No. An interface only describes the required structure of an object.

Why is let modal: IModal; undefined?

Because it declares the variable type but does not assign any actual object to it.

How do I create an object that matches an interface?

Assign an object literal, return one from a function, or create a class instance that matches the interface.

Can I assign properties later instead of all at once?

Yes, but the object itself must exist first. If some properties are not ready yet, make them optional or provide placeholder values.

Should I use an interface for a modal object?

Yes. It is a good use case if you want a clear, typed structure for related modal properties.

Is {} as IModal a good solution?

Usually not for beginners. It bypasses useful safety checks and can hide missing-property bugs.

When should I use a class instead of an interface?

Use a class if you need constructors, methods, or reusable behavior. Use an interface when you only need to describe object shape.

• Type aliases — similar to interfaces for describing shapes and other custom types.
• Object literals — the actual way to create plain objects in JavaScript and TypeScript.
• Optional properties — useful when some object fields are assigned later.
• Classes — used when objects need behavior, methods, or constructors.
• Type assertions — can force a type, but should be used carefully.
• Undefined vs null — important for understanding runtime errors when values are not initialized.
• Factory functions — a common way to create typed objects consistently.
• Strict null checks — helps TypeScript catch possible undefined usage earlier.