TypeScript: A Beginner-Friendly Guide
TypeScript is a strongly typed programming language built on top of JavaScript. It was developed by Microsoft to make JavaScript applications easier to develop, maintain, and scale.
TypeScript adds features such as static typing, interfaces, generics, access modifiers, and better tooling while still allowing developers to use normal JavaScript features.
What is TypeScript?
TypeScript is a superset of JavaScript. This means that valid JavaScript code can generally be used in a TypeScript project, while TypeScript provides additional features on top of it.
For example, in JavaScript:
let age = 22;
In TypeScript, we can explicitly specify the type:
let age: number = 22;
If we later try:
age = "Hello";
TypeScript reports an error because age was declared as a number.
This helps catch many mistakes during development instead of discovering them only when the application runs.
Why Do We Use TypeScript?
JavaScript is dynamically typed, so a variable can change its type during execution.
For example:
let value = 10;
value = "Hello";
JavaScript allows this.
In TypeScript:
let value: number = 10;
value = "Hello"; // Error
TypeScript helps developers identify this kind of problem early.
Main advantages of TypeScript
- Catches many errors during development
- Provides better code completion in VS Code
- Makes large projects easier to maintain
- Makes function parameters and return values clearer
- Provides better documentation through types
- Supports interfaces and generics
- Improves refactoring and code navigation
Basic TypeScript Types
TypeScript provides several commonly used types.
1. String
let username: string = "Swaroop";
The variable username can contain only a string.
2. Number
let age: number = 22;
The variable age can contain a number.
3. Boolean
let isLoggedIn: boolean = true;
The value can only be true or false.
4. Arrays
We can specify the type of elements inside an array.
let numbers: number[] = [10, 20, 30];
Another way is:
let names: Array<string> = ["Sai", "Rahul", "John"];
Both represent an array containing strings.
TypeScript Functions
TypeScript allows us to specify types for function parameters and return values.
function calculateSalary(salary: number): number {
return salary * 12;
}
Here:
salary: number
means salary must be a number.
And:
): number
means the function must return a number.
For example:
calculateSalary(50000);
is valid.
But:
calculateSalary("50000");
produces a type error.
Interfaces
An interface defines the structure that an object should follow.
For example:
interface User {
name: string;
age: number;
email: string;
}
Now we can create an object using that structure:
const user: User = {
name: "Swaroop",
age: 22,
email: "swaroop@example.com"
};
TypeScript knows that a User must have:
name → string
age → number
email → string
If we write:
const user: User = {
name: "Swaroop",
age: "22",
email: "swaroop@example.com"
};
TypeScript reports an error because age should be a number.
Why are interfaces useful?
Interfaces are especially useful when working with:
- Objects
- API responses
- Function parameters
- Classes
- Large applications
They make the expected structure of data clear.
Generics
Generics are one of the most useful TypeScript features.
A generic allows us to write reusable and type-safe code.
Consider this function:
function getValue(value: string): string {
return value;
}
This function only accepts strings.
We could create another function for numbers, but that would duplicate code.
Instead, we can use a generic:
function getValue<T>(value: T): T {
return value;
}
Here, T is a type parameter.
We can use it with different types:
const name = getValue<string>("Swaroop");
const age = getValue<number>(22);
const isStudent = getValue<boolean>(true);
The same function works with different types while maintaining type safety.
Simple way to understand generics
Think of T as a placeholder for a type.
T → string
T → number
T → boolean
The actual type is determined when the function is used.
TypeScript vs JavaScript
| JavaScript | TypeScript |
|---|---|
| Dynamically typed | Statically typed |
.js files |
.ts files |
| No built-in static type checking | Provides static type checking |
| Errors may appear during runtime | Many errors can be caught during development |
| Uses JavaScript syntax | Adds features on top of JavaScript |
TypeScript does not replace JavaScript. TypeScript code is generally transpiled/compiled into JavaScript, which can then run in browsers or Node.js.
The basic flow is:
TypeScript
↓
TypeScript Compiler
↓
JavaScript
↓
Browser / Node.js
Type Inference
One useful feature of TypeScript is type inference.
You don't always have to explicitly write the type.
For example:
let name = "Swaroop";
TypeScript automatically understands:
name → string
Similarly:
let age = 22;
TypeScript understands:
age → number
So you don't always need:
let name: string = "Swaroop";
let age: number = 22;
TypeScript can infer the types automatically.
TypeScript and Object-Oriented Programming
TypeScript also supports classes and object-oriented programming.
For example:
class Employee {
constructor(
public name: string,
public salary: number
) {}
getSalary(): number {
return this.salary;
}
}
We can create an object:
const employee = new Employee("Swaroop", 50000);
console.log(employee.name);
console.log(employee.getSalary());
TypeScript adds type safety to the class as well.
Conclusion
TypeScript makes JavaScript development more structured and type-safe. Its type system helps developers catch mistakes early, while features such as interfaces and generics make code easier to reuse and maintain.
For beginners, the most important concepts to learn first are:
Basic Types
↓
Functions
↓
Interfaces
↓
Generics
↓
Classes
↓
Advanced TypeScript
Top comments (0)