Start learning free

LESSON 180 OF 348 · OBJECT-ORIENTED PROGRAMMING

Defining a Class in TypeScript

Lesson Read the full explanation

TL ; DR:

A class is a blueprint for creating objects. It groups together related data and behavior under a single name.
In JavaScript, you define a class with the class keyword, followed by the class name and a pair of curly braces:
```
class Dog {

}
```
The body of the class can be empty — that's still a valid class. We'll add data and behavior to it in the next lessons.

Full lesson:

So far, you've worked with built-in types like number, string, and arrays. But what if you want to model something the language doesn't have a type for — like a Dog, a BankAccount, or a Game?

That's what classes are for. A class lets you define your own type by listing what data it holds and what actions it can perform.

Why classes?

Imagine you're writing a program about dogs. Each dog has a name, an age, and can bark. Without classes, you'd have to track each dog's name in one variable, age in another, and write a separate bark() function for each. That gets messy fast.

With a class, you bundle all of that into one neat package called Dog:

class Dog {
    // We'll add fields and methods in upcoming lessons.
}

The syntax

Defining an empty class in JavaScript looks like this:

class ClassName {
}

Three things to notice:

The keyword class tells JavaScript you're defining a new type.
ClassName is the name you choose. By convention, JavaScript class names use PascalCase — capitalized words with no underscores: Dog, BankAccount, HighScore.
The curly braces { } hold the body of the class. They can be empty for now.

Your task

Define an empty class called Dog. The pre-filled code below will create an instance of your class and print a confirmation message. If you define the class correctly, the program will run and print:

Defined the Dog class!

STEP 1 OF 1

Guided

Ctrl + Enter to check

TYPESCRIPT · OBJECT-ORIENTED PROGRAMMING

Defining A Class in TypeScript, explained

What a class is

You already work with built-in types such as number, string and arrays. A class lets you create a type of your own. It describes what a kind of thing holds and what it can do, and it works as a blueprint: the class is the plan, and the objects you build from it are the actual things.

Suppose a program deals with dogs. Each dog has a name and an age, and it can bark. Without a class you would keep a separate variable for every name and every age, and write functions that take those variables as loose arguments. A class bundles the data and the behaviour under one name, Dog, so the rest of the program can talk about dogs directly.

In TypeScript, a class does two jobs. At run time it is a real JavaScript class that builds objects with new. At compile time its name is also a type, so you can write let d: Dog and the compiler checks that you only put dogs there.

The syntax

The smallest class is a name and a pair of braces:

class ClassName {
}

class is the keyword that starts a class definition.
ClassName is the name you choose. By convention class names use PascalCase: every word starts with a capital letter and there are no underscores, as in Dog, BankAccount or HighScore. The compiler accepts other styles, but the convention makes classes easy to tell from variables at a glance.
The braces hold the class body. Fields, a constructor and methods will go there in the next lessons. An empty body is valid, and the class still exists.

There is no semicolon after the closing brace. Unlike a variable declaration, a class definition is a declaration that ends with its block.

The exercise

The lesson gives you two lines that already use Dog:

let dog = new Dog();
console.log("Defined the Dog class!");

The first line creates an object from the class. The second prints a message. Without the class, the first line has nothing to build from, and the compiler reports that it cannot find the name Dog.

Write the class above the existing lines. Use the class keyword followed by Dog, the exact name used below.
Leave the braces empty. Nothing else is needed yet.

The finished program:

class Dog {
}

let dog = new Dog();
console.log("Defined the Dog class!");

Running it prints:

Defined the Dog class!

Details and common mistakes

Capitalisation matters. Names are case-sensitive. A class called dog would not satisfy new Dog(), because Dog and dog are two different names.
The order matters. A class declaration is not usable before the line where it appears. If new Dog() ran before the class Dog line, the program would fail with a ReferenceError at run time, and the compiler would also complain that the class is used before its declaration. Put the class first.
The type exists only while compiling. After compilation to JavaScript, annotations like : Dog are gone. The class itself stays, since it is real JavaScript.
An empty class accepts almost anything. TypeScript compares object types by their shape, not by name. A class with no members has an empty shape, so many values fit it. That changes as soon as you add fields and methods, which is what the next lessons do.
Defining is not creating. The class by itself produces no dog. Only new Dog() does.

Seeing the class at run time

A class is a value as well as a type. In the following snippet, typeof Dog reports function, because a JavaScript class is a special kind of function, and instanceof tells you whether an object was built from a class:

class Dog {
}

let dog = new Dog();
console.log(dog);
console.log(dog instanceof Dog, typeof Dog);

Dog {}
true function

The first line shows an object of class Dog with nothing inside it yet, which is what an empty class gives you.

Key takeaways

A class is a blueprint that groups data and behaviour under one name.
Define it with class Name { }, using PascalCase for the name.
An empty body is valid. The following lessons fill it in.
Declare the class before the code that creates objects from it.
In TypeScript the class name is both a run-time value and a type.

Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.

Start learning free