In this blog, we’ll explore some of the most important TypeScript concepts every developer should understand, including:

• Type annotations
• Union types
• Enums
• Optional chaining
• Type assertions
• null vs undefined
• never type
• readonly
• strictNullChecks
• Strict type checking
• extends keyword

Let’s dive in.

What is TypeScript?

TypeScript is a superset of JavaScript that adds:

• Static typing
• Interfaces
• Advanced tooling
• Compile-time error checking

Example:

function greet(name: string): string {
  return `Hello ${name}`;
}

Here, TypeScript ensures that name must always be a string.

Type Annotations in TypeScript

Type annotations explicitly define the expected type of variables, parameters, and return values.

Example

function add(a: number, b: number): number {
  return a + b;
}

Benefits

• Prevents invalid assignments
• Improves IntelliSense
• Enhances readability
• Detects errors early

Error Prevention Example

add(10, "20");

TypeScript catches this during development:

Argument of type 'string' is not assignable to parameter of type 'number'

Union Types: Flexible Yet Safe

Union types allow a variable to hold multiple possible types.

Example

function format(value: string | number): string {
  if (typeof value === "string") {
    return value.toUpperCase();
  }

  return value.toFixed(2);
}

Why Use Union Types?

• Safer alternative to any
• Flexible APIs
• Better type safety
• Cleaner reusable functions

Enums in TypeScript

Enums help manage related constants in a structured way.

Example

enum UserRole {
  Admin = "ADMIN",
  Editor = "EDITOR",
  Viewer = "VIEWER"
}

const role = UserRole.Admin;

Benefits of Enums

• Improves readability
• Avoids magic strings
• Reduces bugs
• Easier maintenance

Enums are commonly used for:

• Status values
• Roles
• Application states
• API response types

Optional Chaining (?.)

Optional chaining safely accesses properties on objects that may be null or undefined.

Without Optional Chaining

console.log(user.profile.address.city);

Potential runtime error:

Cannot read properties of undefined

With Optional Chaining

console.log(user?.profile?.address?.city);

Now the expression safely returns undefined.

Benefits

• Cleaner code
• Fewer null checks
• Better error handling
• Safer nested object access

Understanding null vs undefined

Although both represent absence of value, they are different.

Examples

Undefined

let username: string | undefined;
console.log(username);

Null

let selectedUser: string | null = null;

Best Practice

• Use undefined for optional or missing values
• Use null for intentionally empty values

The readonly Modifier

The readonly keyword prevents properties from being modified after initialization.

Example

interface User {
  readonly id: number;
  name: string;
}

const user: User = {
  id: 101,
  name: "Sunny"
};

user.name = "Rahul"; // allowed
user.id = 200; // Error

Benefits

• Encourages immutability
• Prevents accidental changes
• Improves reliability

Type Assertions in TypeScript

Type assertions tell the compiler to treat a value as a specific type.

Example

const input = document.getElementById("username") as HTMLInputElement;

input.value = "Sunny";

Common Use Cases

• DOM manipulation
• External libraries
• unknown types
• API responses

Important Note

Type assertions do not change runtime values.

Understanding the never Type

The never type represents values that never occur.

Example: Throwing Errors

function throwError(message: string): never {
  throw new Error(message);
}

Example: Infinite Loop

function runForever(): never {
  while (true) {}
}

Common Use Cases

• Error handling
• Exhaustive switch checking
• Impossible code paths

The extends Keyword

The extends keyword is used for inheritance in interfaces and classes.

Extending Interfaces

interface Person {
  name: string;
}

interface Employee extends Person {
  employeeId: number;
}

This promotes reusable type structures.

Extending Classes

class Animal {
  makeSound() {
    console.log("Animal sound");
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

This enables behavior reuse through inheritance.

Strict Type Checking in TypeScript

Strict type checking enables stronger compile-time validation.

Enable Strict Mode

{
  "compilerOptions": {
    "strict": true
  }
}

Benefits

• Detects invalid assignments
• Prevents unsafe operations
• Improves maintainability
• Reduces runtime bugs

Example

function greet(name: string) {
  return name.toUpperCase();
}

greet(null);

TypeScript catches:

Argument of type 'null' is not assignable to parameter of type 'string'

before runtime.

What is strictNullChecks?

strictNullChecks ensures null and undefined are treated as separate types.

Enable It

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

Example

let username: string = null;

TypeScript error:

Type 'null' is not assignable to type 'string'

This helps prevent null-related runtime crashes.

Why TypeScript Matters in Modern Development

Modern applications are large and complex. TypeScript helps by:

• Catching bugs early
• Improving team collaboration
• Enhancing IDE support
• Making refactoring safer
• Providing scalable architecture

It is widely used in:

• Angular applications
• React projects
• Node.js APIs
• Enterprise systems

Final Thoughts

TypeScript is much more than “JavaScript with types.” Its advanced type system enables developers to build safer, cleaner, and more maintainable applications.

Features like:

• Union types
• Optional chaining
• Strict type checking
• Enums
• Type assertions
• readonly
• never

all contribute to a powerful developer experience and significantly reduce runtime bugs.

If you are serious about scalable application development, mastering these TypeScript fundamentals is essential.