Click here to Skip to main content
13,767,051 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

3.8K views
1 bookmarked
Posted 21 Jun 2018
Licenced CPOL

How to Define a Class in TypeScript? -- TypeScript Tutorial for Beginners

, 21 Jun 2018
Rate this:
Please Sign up or sign in to vote.
How to define a class and instantiate class object

Earlier in the TypeScript Tutorial series (Getting started with TypeScript), we learnt about the TypeScript configuration file, variable declaration and basic data types. I hope that was neat and clear to understand the very basics of TypeScript.

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

Defining a Class in TypeScript

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

class Person {
 // properties
 firstName: string;
 lastName: string;
 
 // default constructor
 constructor () {
 }

 // parameterized constructor
 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 constructor
 constructor () {
 }
 
 // constructor
 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 constructor and parameterized constructor. 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 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 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 firstName: string, public lastName: 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 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());

👉 TypeScript Tutorial - Getting started with TypeScript

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Kunal Chowdhury «IN»
Software Developer (Senior)
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik Developer Expert, Nokia Developer Champion, Windows 10 Champion, Microsoft Rockstar, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Book authored:

Connect with me on:

My CodeProject Awards/Prizes:


You may also be interested in...

Comments and Discussions

 
BugParameterized constructor Pin
Member 1044168822-Jun-18 10:04
memberMember 1044168822-Jun-18 10:04 
PraiseRe: Parameterized constructor Pin
Kunal Chowdhury «IN»23-Jun-18 0:24
mentorKunal Chowdhury «IN»23-Jun-18 0:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.181114.1 | Last Updated 21 Jun 2018
Article Copyright 2018 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid