Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Define a Class in TypeScript

DZone's Guide to

How to Define a Class in TypeScript

Today, in this article, a developer provides a tutorial for fellow developers to learn how to define a class and instantiate a class object.

· Web Dev Zone ·
Free Resource

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

Earlier in this TypeScript tutorial series, we learned about the TypeScript configuration file, variable declaration, and basic data types. I hope I made it neat and clear to understand the very basics of TypeScript.

Today, in this article, we will learn how to define a class and instantiate a class object. Continue reading to learn more.

In TypeScript, you can use concepts from OOP and create classes. Just like C# and other OOP languages, you can define a class with the keyword class. Let's take the following example into consideration:

Defining a Class in TypeScript

class Person {
 // properties
 firstName: string;
 lastName: string;

 // default construtor
 constructor () {
 }

 // parameterized construtor
 constructor (fName: string, lName: string) {
  this.firstName = fName;
  this.lastName = lName;
 }

 // method
 getFullName() {
  return `${firstName} ${lastName}`;
 }
}


In the above example, the class Person has four members: two properties (firstName, lastName), two class constructors (constructor) and one method (getFullName()). To access the members of the class, you can use this operator. For example, this.firstName, this.getFullName(), etc.

By default, all the members in a TypeScript class are public. This is as good as marking the members as public using the public access modifier. The above class can be written as below, by explicitly marking the members as public.

class Person {
 // properties
 public firstName: string;
 public lastName: string;

 // default construtor
 constructor () {
 }

 // construtor
 public constructor (fName: string, lName: string) {
  this.firstName = fName;
  this.lastName = lName;
 }

 // method
 public getFullName() {
  return `${firstName} ${lastName}`;
 }
}


Defining Constructors in a TypeScript Class

A class can have two types of constructors: default constructors and parameterized constructors. In the above example, the first constructor is a default constructor, which takes no/zero parameters. The second one is a parameterized constructor, which takes one or more parameter values (in our case, it takes two inputs):

// default construtor
constructor () {
}

// construtor
public constructor (fName: string, lName: string) {
 this.firstName = fName;
 this.lastName = lName;
}


In the above example, we have first defined the properties, then passed the values using a parameterized constructor and then filled those properties. TypeScript supports automatic property creation. Instead of following all these steps, if you define the constructor parameters as public, TypeScript will do the rest of the job for you.

Consider the following example which shows how to define a property using parameterized constructor:

class Person {
 // parameterized construtor
 constructor (public fName: string, public lName: string) {
 }

 // method
 getFullName() {
  return `${firstName} ${lastName}`;
 }
}


Instantiating an Instance of a TypeScript Class

To create the instance of the class and access its members, you can use the new operator, the way you create a class instance in C# and/or Java. Here are two different approaches to create the class instance:

let person: Person = new Person("Kunal", "Chowdhury");
console.log(person.getFullName());

// alternative way
let person = new Person("Kunal", "Chowdhury");
console.log(person.getFullName());

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

Topics:
web dev ,typescript ,classes ,constructors ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}