TypeScript is an open-source programming language that builds on JavaScript by adding optional static typing and class-based object-oriented programming.
It helps developers write more reliable, scalable, and maintainable code — especially in large-scale projects.
In this article, we’ll explore 10 key TypeScript concepts that every developer should understand.
1. Type Annotations
Type annotations let you specify the data type of variables, function parameters, and return values.
This helps catch errors early and improves code readability.
let age: number = 27;
Here, age
must always be a number.
If you try assigning a string to it, TypeScript will throw a compile-time error.
2. Interfaces
An interface defines the shape of an object — its structure and property types.
It ensures consistency across multiple objects.
interface Person {
name: string;
age: number;
}
let user: Person = { name: "Srashti", age: 25 };
💡 Tip: Interfaces help enforce structure, making code predictable and self-documenting.
3. Classes
TypeScript supports full object-oriented programming (OOP) through classes.
They serve as blueprints for objects, supporting inheritance, constructors, and access modifiers.
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
}
Here, Animal
is a class with a property name
and a constructor that initializes it.
TypeScript extends JavaScript classes with features like access modifiers (public, private, protected) and readonly properties.
4. Generics
Generics let you write reusable and type-safe functions, interfaces, and classes.
They help avoid code duplication while maintaining flexibility.
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("Srashti");
let output2 = identity<number>(25);
✅ Why use Generics?
They allow your functions to work with any data type, ensuring type safety without losing flexibility.
5. Enums
Enums define a set of named constant values — useful when dealing with a predefined list of options.
enum Color {
Red,
Green,
Blue
}
You can also assign specific numeric values:
enum Color {
Red = 1,
Green = 2,
Blue = 4
}
This makes your code more readable and prevents invalid values.
6. Type Inference
TypeScript can infer types automatically based on assigned values.
let age = 27; // inferred as 'number'
Even without explicit type annotations, TypeScript understands that age
is a number.
It also infers function return types:
function add(a: number, b: number) {
return a + b; // inferred as number
}
7. Union and Intersection Types
Union types allow variables to hold multiple possible types.
let age: number | string = 27;
age = "twenty-seven";
Intersection types, on the other hand, combine multiple types into one.
type Dog = { bark(): void };
type Cat = { meow(): void };
type Animal = Dog & Cat;
Here, Animal
includes both bark()
and meow()
methods.
8. Type Guards
Type guards allow you to check variable types at runtime, especially when using unions.
function printValue(value: number | string) {
if (typeof value === "number") {
console.log(value * 2);
} else {
console.log(value.toUpperCase());
}
}
Type guards help you safely handle multiple types in a single function.
9. Decorators
Decorators are metadata annotations for classes, methods, or properties.
They are often used in frameworks like Angular and NestJS for dependency injection and configuration.
@deprecated
class MyClass {
// ...
}
This example marks the class as deprecated.
Decorators are still an experimental feature, so you need to enable them in your tsconfig.json
file ("experimentalDecorators": true
).
10. Modules
Modules help organize code into smaller, reusable pieces.
They allow you to export and import variables, classes, or functions between files.
// mathUtils.ts
export function add(a: number, b: number) {
return a + b;
}
// main.ts
import { add } from './mathUtils';
console.log(add(10, 5)); // 15
Modules make code modular, maintainable, and easy to scale.
🎯 Final Thoughts
TypeScript adds a powerful type system and OOP features to JavaScript, helping developers build large, error-free applications.
Mastering these 10 concepts — from type annotations to generics and modules — will greatly improve your ability to write clean, robust, and professional TypeScript code.
Top comments (1)
Thank you for sharing this article!
As a beginner with TypeScript, I found it really helpful and practical.
I'll keep these in mind.