TypeScript Tutorial

TypeScript Classes and Objects

class names a type. Creating a variable of that type with new makes an object.

class names a type

The keyword class starts a type definition. Inside the class you list members: fields (data) and, later, methods (functions). After the closing brace there is no semicolon. That is different from C++. The class name is enough.

Once the class exists, its name works like number or string. You declare a variable of that type and create the object with new. Writing the type name alone does not allocate anything.

Public members

public means code outside the class can read and write those members. For a first class, mark the fields public so the rest of the file can set them. The next chapters hide fields on purpose. Here the goal is to see an object hold values.

Example

class Player {
  public name: string = "";
  public score: number = 0;
}

const p: Player = new Player();
p.name = "Rin";
p.score = 10;
console.log(p.name + " " + p.score);

p.name and p.score use the dot operator. The object is p. The member is the name after the dot. The = "" and = 0 give each field a starting value sostrict is satisfied before you assign the real data.

Creating an object with new

new Player() creates one object. It has its own name and its own score. You must call new. A line such as const p: Player; with no assignment is not a finished object, and tsc will not let you use p until it is assigned.

Player is the type. p is the object. Writing Player again does not create another object; it is just the type name. You need another new Player() for a second player.

Two objects

Each object has its own copy of the fields. Change a.score and b.score stays the same. That is the point of a type: one blueprint, many independent values.

Example

class Player {
  public name: string = "";
  public score: number = 0;
}

const a: Player = new Player();
a.name = "Rin";
a.score = 10;

const b: Player = new Player();
b.name = "Kai";
b.score = 14;

console.log(a.name + " " + a.score);
console.log(b.name + " " + b.score);

Run this in /typescript/try. Set a.score = 99 after both objects exist and print again. Only Rin's score changes.

Members are per object

Think of the class as a row layout: a string and a number. Each object is one row. a andb do not share name. If you wanted a shared value, that would be a static member — skip that until you are comfortable with ordinary fields.

Objectnamescore
aRin10
bKai14

In TypeScript, members are public unless you write private or protected. That is the opposite of a C++ class, where members start private. Writing publicanyway makes the surface obvious.

A class can already hold a method

Fields are only half of an object. A method uses those fields without you passing them as extra arguments. The next chapter is all methods. This listing shows the shape so the type already does a little work.

Example

class Box {
  public w: number = 0;
  public h: number = 0;

  public area(): number {
    return this.w * this.h;
  }
}

const floor: Box = new Box();
floor.w = 4;
floor.h = 3;
console.log("area: " + floor.area());

Next: functions that belong to the class, and the meaning of this.

FAQ: TypeScript Classes and Objects

Common questions about this page.

What is the StudyGrid TypeScript tutorial?

The StudyGrid TypeScript tutorial follows the same chapter rhythm as C++: syntax, types, input, loops, functions, classes, generics, maps, and lambdas. Each chapter has copy-and-run examples.

Should I run typescript classes examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn typescript classes in this TypeScript TypeScript lesson (TypeScript Classes and Objects).

Is the TypeScript editor the same as Try Python or Try C++?

No. Try TypeScript type-checks with tsc at /typescript/try and shows stdout plus compiler messages. Try Python stays at /try. Try C++ stays at /cpp/try. TypeScript lessons never open those editors.

Do I need to install a compiler to learn TypeScript?

No. Open a chapter, click Try it in TypeScript, and compile in the browser. You can also download a .ts file and compile locally with tsc.

Where should I start the TypeScript tutorial?

Start at TypeScript Intro, then Get Started and Syntax. After the first program, continue to output, variables, and if-else. After classes, open TypeScript Examples, then generics, Map, and arrow functions. Use Next at the bottom of each chapter.

Is the TypeScript tutorial free?

Yes. The TypeScript workshop on StudyGrid (studygrid.in) is free: dashboard, chapters, and the compile-and-run editor.