Start learning free

LESSON 181 OF 348 · OBJECT-ORIENTED PROGRAMMING

Creating Objects in TypeScript with new

Lesson Read the full explanation

TL ; DR:

  • An object is an instance of a class — a real, usable copy made from the blueprint.


  • You create one with the new keyword:

    let rex = new Dog();

  • Each call to new creates a separate object, even if they all come from the same class.


Full lesson:

In the previous lesson you defined the Dog class — the blueprint. But a blueprint isn't a dog. To get an actual dog you can interact with, you need to create an instance of the class. An instance is also called an object.

The new keyword

To create a new object in JavaScript, use the new keyword followed by the class name and parentheses:

let rex = new Dog();

What this line does:

  • new Dog() creates a fresh Dog object.

  • let rex declares a variable named rex that holds the new object.

  • The = connects the two — rex now refers to the freshly-created dog.

Many objects from one class

You can call new Dog() as many times as you want, and each call gives you a brand-new, independent object:

let rex   = new Dog();
let buddy = new Dog();
let luna  = new Dog();

rex, buddy, and luna are all Dog objects, but they're different objects. Changing one won't affect the others — they share the blueprint but live their own lives.

Your task

The Dog class is already defined for you. Below it, create three separate Dog objects named rex, buddy, and luna. The pre-filled console.log will confirm:

Created 3 Dog objects
STEP 1 OF 3
    Ctrl + Enter to check

    TYPESCRIPT · OBJECT-ORIENTED PROGRAMMING

    Creating Objects in TypeScript, explained

    From blueprint to object

    A class such as Dog describes what a dog is, but it is not a dog. To get something you can store, pass around and use, you create an instance of the class. An instance is also called an object. This lesson shows how to create them, and the exercise asks for three.

    The new keyword

    You create an object by writing new, then the class name, then parentheses:

    let rex: Dog = new Dog();

    Reading the line from right to left:

    • new Dog() builds a fresh Dog object and gives it back as a value.
    • The = stores that value in a variable.
    • let rex: Dog declares the variable rex and says it holds a Dog.

    The parentheses call the class's constructor. The class here has no constructor of its own yet, so the parentheses are empty. A later lesson shows how to pass arguments through them.

    The type annotation

    The : Dog part is optional. TypeScript sees new Dog() on the right and infers that rex is a Dog, so let rex = new Dog(); means the same thing. Writing the annotation makes the type visible to the reader. It is erased when the code is compiled to JavaScript, so it has no effect at run time.

    Many objects from one class

    Every new Dog() builds a separate object. You can create as many as you need:

    let rex: Dog = new Dog();
let buddy: Dog = new Dog();
let luna: Dog = new Dog();

    The three variables hold three different objects. They share the blueprint, but each one is independent: once the class has fields, changing one dog's data does not change another's. Comparing them confirms that they are distinct:

    console.log(rex === buddy);
let same = rex;
console.log(same === rex);

    false
true

    For objects, === asks whether two variables refer to the very same object, not whether the objects look alike. Two separate new Dog() results are never === to each other, even when the class is empty. A variable copied from another with = points to the same object, as same does here.

    The exercise

    The Dog class is already written, and so are three checks at the bottom of the file. Each check prints a line when its variable is not null. They refer to rex, buddy and luna, which you have to create between the class and the checks.

    1. Create rex. Use new and annotate the variable with Dog.
    2. Create buddy. It is a second call to new Dog(), so it is a new object, independent of rex.
    3. Create luna. A third call shows that one class can produce any number of objects.

    The complete program:

    class Dog {
}

let rex: Dog = new Dog();
let buddy: Dog = new Dog();
let luna: Dog = new Dog();

if (rex != null) console.log("rex exists");
if (buddy != null) console.log("buddy exists");
if (luna != null) console.log("luna exists");

    It prints:

    rex exists
buddy exists
luna exists

    Common mistakes

    • Forgetting new. Calling Dog() without new does not create an object. A JavaScript class cannot be called like an ordinary function, and the compiler rejects the call.
    • Reusing one object. let buddy: Dog = rex; does not make a new dog. It gives the same object a second name, so changes made through one name show up through the other.
    • Using the object before creating it. The checks at the bottom of the file read the three variables. A let variable cannot be read before the line that declares it, so the three declarations must come first.
    • Mixing up the class and the object. Dog is the blueprint and rex is one dog. Methods and fields belong to objects, so you work with rex, not with Dog.
    • Dropping the parentheses. new Dog is accepted and builds an object, but writing new Dog() is the clearer, standard form.

    Key takeaways

    • An object is an instance of a class, created with new ClassName().
    • Each new produces a separate object, even from the same class.
    • The type annotation : Dog is optional, since TypeScript infers it, and it vanishes when compiled.
    • === on objects checks identity: two separately created objects are never equal that way.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free