Classes in TypeScript are blueprints for creating objects. They allow you to combine data and functions into a single structure. TypeScript adds static typing to JavaScript classes, making them easier to develop and maintain.
A class is a blueprint used to create objects.
class Student {
name: string;
}
const student =
new Student();
student.name = "Amit";
console.log(student.name);
The Student class defines the structure of
a student object.
Classes are useful for organizing related data and behavior.
class Student {
name: string;
study(): void {
console.log(
this.name + " is studying"
);
}
}A class can contain both properties and methods.
Use the class keyword followed by the class name.
class Car {
brand: string;
}The class can later be used to create objects.
Use the new keyword to create an object.
class Car {
brand: string;
}
const car =
new Car();
car.brand = "Toyota";
console.log(car.brand);Properties store data inside an object created from a class.
class Student {
name: string;
age: number;
course: string;
}
const student =
new Student();
student.name = "Amit";
student.age = 20;
student.course = "TypeScript";Methods are functions defined inside a class.
class Student {
name: string = "Amit";
study(): void {
console.log(
this.name + " is studying"
);
}
}
const student =
new Student();
student.study();
The this keyword refers to the current object.
class Student {
name: string;
showName(): void {
console.log(
this.name
);
}
}
const student =
new Student();
student.name = "Rahul";
student.showName();A constructor is a special method that runs automatically when an object is created.
class Student {
name: string;
constructor(name: string) {
this.name = name;
}
}
const student =
new Student("Amit");
console.log(student.name);class Student {
name: string;
age: number;
constructor(
name: string,
age: number
) {
this.name = name;
this.age = age;
}
}
const student =
new Student(
"Amit",
20
);
console.log(student);class Calculator {
add(
a: number,
b: number
): number {
return a + b;
}
}
const calculator =
new Calculator();
console.log(
calculator.add(10, 20)
);class Calculator {
multiply(
a: number,
b: number
): number {
return a * b;
}
}The return type of the method is specified after the parameter list.
One class can be used to create many objects.
class Student {
constructor(
public name: string
) {}
}
const student1 =
new Student("Amit");
const student2 =
new Student("Rahul");
const student3 =
new Student("Neha");
console.log(student1.name);
console.log(student2.name);
console.log(student3.name);A class property can have an initial value.
class Student {
name: string = "Unknown";
age: number = 0;
course: string = "Not Assigned";
}
const student =
new Student();
console.log(student);
A property can be optional by using ?.
class Student {
name: string;
phone?: string;
constructor(name: string) {
this.name = name;
}
}
const student =
new Student("Amit");
console.log(student.name);class Student {
name: string;
active: boolean;
constructor(
name: string,
active: boolean
) {
this.name = name;
this.active = active;
}
showStatus(): void {
if (this.active) {
console.log(
this.name +
" is active"
);
} else {
console.log(
this.name +
" is inactive"
);
}
}
}
const student =
new Student(
"Amit",
true
);
student.showStatus();class Student {
subjects: string[];
constructor(
subjects: string[]
) {
this.subjects = subjects;
}
showSubjects(): void {
console.log(
this.subjects
);
}
}
const student =
new Student([
"HTML",
"CSS",
"TypeScript"
]);
student.showSubjects();class Calculator {
add(
a: number,
b: number
): number {
return a + b;
}
subtract(
a: number,
b: number
): number {
return a - b;
}
multiply(
a: number,
b: number
): number {
return a * b;
}
}
const calculator =
new Calculator();
console.log(
calculator.add(10, 5)
);
console.log(
calculator.subtract(10, 5)
);
console.log(
calculator.multiply(10, 5)
);A getter allows you to access a calculated value like a property.
class Student {
constructor(
public name: string,
public age: number
) {}
get details(): string {
return this.name +
" - " +
this.age;
}
}
const student =
new Student(
"Amit",
20
);
console.log(
student.details
);A setter allows you to control how a property is changed.
class Student {
private _name: string = "";
get name(): string {
return this._name;
}
set name(
value: string
) {
this._name = value;
}
}
const student =
new Student();
student.name = "Amit";
console.log(
student.name
);A static property belongs to the class itself rather than individual objects.
class Student {
static schoolName =
"Soopro Pathshala";
}
console.log(
Student.schoolName
);A class can implement an interface and must follow its required structure.
interface Person {
name: string;
showName(): void;
}
class Student
implements Person {
constructor(
public name: string
) {}
showName(): void {
console.log(
this.name
);
}
}
const student =
new Student("Amit");
student.showName();Classes can also use generic type parameters.
class Box<T> {
constructor(
public value: T
) {}
getValue(): T {
return this.value;
}
}
const numberBox =
new Box<number>(100);
const stringBox =
new Box<string>("Hello");
console.log(
numberBox.getValue()
);
console.log(
stringBox.getValue()
);An abstract class is a base class that is designed to be extended by other classes.
abstract class Animal {
abstract makeSound(): void;
move(): void {
console.log(
"Animal is moving"
);
}
}Abstract classes cannot be directly instantiated.
One class can extend another class using the
extends keyword.
class Animal {
move(): void {
console.log(
"Animal is moving"
);
}
}
class Dog extends Animal {
bark(): void {
console.log(
"Dog is barking"
);
}
}
const dog =
new Dog();
dog.move();
dog.bark();Inheritance will be covered in more detail in a later lesson.
Modern React applications commonly use functional components, but TypeScript classes are still useful for modeling data, services, and business logic.
class UserService {
getUserName(
name: string
): string {
return name;
}
}
const service =
new UserService();
console.log(
service.getUserName("Amit")
);In React Native, classes can be used for reusable services, models, storage helpers, API managers, and other application logic.
class UserService {
getUser(
id: number
): string {
return "User " + id;
}
}
const service =
new UserService();
const user =
service.getUser(101);
console.log(user);new when creating an object.interface StudentData {
id: number;
name: string;
course: string;
}
class Student {
private data: StudentData;
constructor(
data: StudentData
) {
this.data = data;
}
getName(): string {
return this.data.name;
}
getCourse(): string {
return this.data.course;
}
showDetails(): void {
console.log(
"ID:",
this.data.id
);
console.log(
"Name:",
this.data.name
);
console.log(
"Course:",
this.data.course
);
}
}
const student =
new Student({
id: 101,
name: "Amit",
course: "TypeScript"
});
student.showDetails();
console.log(
student.getName()
);
console.log(
student.getCourse()
);This example combines an interface, class, constructor, private property, and class methods.
Classes provide a structured way to create objects and organize data and behavior in TypeScript.
class Student {
constructor(
public name: string,
public course: string
) {}
showDetails(): void {
console.log(
this.name +
" - " +
this.course
);
}
}
const student =
new Student(
"Amit",
"TypeScript"
);
student.showDetails();Classes become especially useful when combined with interfaces, inheritance, access modifiers, generics, and other object-oriented programming features.
class keyword to create a class.new to create an object from a class.this keyword refers to the current object.Question: Which keyword is used to create an object from a TypeScript class?