🚀 Introduction
As JavaScript applications grow larger, managing code becomes difficult. Developers often face problems such as:
Runtime errors
Difficult debugging
Poor code maintainability
Lack of type safety
To solve these problems, TypeScript was created by Anders Hejlsberg and is maintained by Microsoft.
TypeScript is a superset of JavaScript that adds:
✅ Static Typing
✅ Object-Oriented Features
✅ Better IDE Support
✅ Compile-Time Error Checking
✅ Improved Code Maintainability
What is TypeScript?
TypeScript is an open-source programming language that builds on JavaScript by adding type definitions.
JavaScript Example
let age = 25;
age = "Twenty Five";
console.log(age);
Output:
Twenty Five
No error occurs.
TypeScript Example
let age: number = 25;
age = "Twenty Five";
Output:
Type 'string' is not assignable to type 'number'
TypeScript catches the error before execution.
Why Use TypeScript?
1. Type Safety
let salary: number = 50000;
Only numbers are allowed.
2. Better IntelliSense
Modern editors provide:
Auto-completion
Suggestions
Refactoring support
3. Easier Maintenance
Large projects become easier to maintain.
Examples:
Angular Applications
Enterprise Applications
Microservices Frontends
E-commerce Platforms
4. Early Error Detection
Errors are caught during compilation instead of production.
Installing TypeScript
Install Node.js
Download from:
Verify installation:
node -v
npm -v
Install TypeScript
npm install -g typescript
Check version:
tsc -v
Your First TypeScript Program
Create:
hello.ts
let message: string = "Hello TypeScript";
console.log(message);
Compile:
tsc hello.ts
Generated:
hello.js
Run:
node hello.js
Output:
Hello TypeScript
TypeScript Data Types
Number
let age: number = 30;
String
let name: string = "John";
Boolean
let isActive: boolean = true;
Array
let scores: number[] = [90, 80, 70];
Alternative:
let scores: Array<number> = [90, 80, 70];
Tuple
let employee: [number, string];
employee = [101, "David"];
Enum
enum Role {
Admin,
Manager,
User
}
let userRole = Role.Admin;
Any
let data: any = "Hello";
data = 100;
data = true;
Avoid excessive use of any.
Unknown
let value: unknown;
value = "Hello";
value = 100;
Safer than any.
Void
function printMessage(): void {
console.log("Hello");
}
Never
function throwError(): never {
throw new Error("Something went wrong");
}
Variables
Let
let age = 25;
Can be reassigned.
Const
const pi = 3.14;
Cannot be reassigned.
Functions
Simple Function
function add(a: number, b: number): number {
return a + b;
}
Optional Parameters
function greet(name: string, city?: string) {
console.log(name, city);
}
Default Parameters
function greet(name: string = "Guest") {
console.log(name);
}
Arrow Functions
const multiply = (a: number, b: number): number => {
return a * b;
};
Interfaces
Interfaces define contracts.
interface Employee {
id: number;
name: string;
}
Usage:
let emp: Employee = {
id: 1,
name: "John"
};
Type Aliases
type Employee = {
id: number;
name: string;
};
Union Types
let id: string | number;
id = 101;
id = "EMP101";
Intersection Types
type Person = {
name: string;
};
type Employee = {
salary: number;
};
type Staff = Person & Employee;
Classes
Creating Class
class Employee {
id: number;
name: string;
constructor(id: number, name: string) {
this.id = id;
this.name = name;
}
display() {
console.log(this.name);
}
}
Access Modifiers
Public
public name: string;
Default access.
Private
private salary: number;
Accessible only inside class.
Protected
protected department: string;
Accessible in derived classes.
Inheritance
class Person {
name: string = "";
}
class Employee extends Person {
salary: number = 0;
}
Polymorphism
class Animal {
makeSound() {
console.log("Animal Sound");
}
}
class Dog extends Animal {
makeSound() {
console.log("Bark");
}
}
Abstract Classes
abstract class Shape {
abstract draw(): void;
}
Generics
Generics provide reusable code.
function getValue<T>(value: T): T {
return value;
}
Usage:
getValue<string>("Hello");
getValue<number>(100);
Generic Interface
interface ApiResponse<T> {
data: T;
success: boolean;
}
Modules
Export:
export class Employee {
}
Import:
import { Employee } from "./employee";
Type Assertions
let value: any = "Hello";
let len = (value as string).length;
Decorators (Advanced)
function Logger(constructor: Function) {
console.log("Logging...");
}
@Logger
class Employee {
}
Common in:
Angular
NestJS
Async Programming
Promise
let promise = new Promise((resolve) => {
resolve("Success");
});
Async Await
async function getData() {
let result = await fetch("/api/users");
return result.json();
}
TypeScript with Angular
TypeScript is the primary language used in:
Example Component:
@Component({
selector:'app-home'
})
export class HomeComponent {
title:string="Welcome";
}
TypeScript with React
type Props = {
name: string;
};
function Welcome({name}: Props) {
return <h1>{name}</h1>;
}
TypeScript Best Practices
Use Strict Mode
{
"strict": true
}
Avoid Any
❌
let data: any;
✅
let data: string;
Prefer Interfaces
interface User {
id:number;
}
Use Readonly
readonly id:number;
Use Generics
Avoid duplicate code.
Common Interview Questions
What is TypeScript?
TypeScript is a strongly typed superset of JavaScript that compiles to JavaScript.
Difference Between Any and Unknown?
| Any | Unknown |
|---|---|
| No Type Checking | Type Safe |
| Less Secure | More Secure |
Difference Between Interface and Type?
| Interface | Type |
|---|---|
| Extendable | Flexible |
| Object Contracts | Unions & Intersections |
What are Generics?
Generics allow reusable and type-safe code.
What are Decorators?
Decorators add metadata and behavior to classes, methods, and properties.
Real-World Enterprise Usage
TypeScript is heavily used in:
Angular Applications
React Applications
Node.js APIs
NestJS Applications
Enterprise Portals
E-commerce Systems
Banking Applications
Microservices Dashboards
Companies using TypeScript include:
Conclusion
TypeScript has become the preferred language for modern web development because it combines JavaScript's flexibility with strong typing and enterprise-grade tooling. Whether you're building Angular applications, React frontends, Node.js APIs, or large-scale enterprise systems, learning TypeScript can significantly improve code quality, maintainability, and developer productivity.
Learning Path:
Basics & Data Types
Functions & Objects
Interfaces & Types
Classes & OOP
Generics
Modules
Async Programming
Advanced Types
Decorators
Angular/React/NestJS Integration
Master these topics, and you'll be ready for both TypeScript interviews and real-world enterprise development.
No comments:
Post a Comment