← Back to blog

An Introduction to TypeScript

Last updated:

2 min read


TypeScript is a strongly typed superset of JavaScript that compiles to plain JavaScript. It enhances the development experience by adding static typing, better tooling, and modern JavaScript features.

Why Use TypeScript?

  1. Static Typing: Catch errors at compile time instead of runtime.
  2. Enhanced IDE Support: Enjoy features like autocompletion, refactoring, and type hints.
  3. Modern JavaScript Features: Use the latest ECMAScript features with backward compatibility.
  4. Scalability: Ideal for large applications with complex codebases.

Key Features

1. Strongly Typed Variables

let username: string = "John";
let age: number = 25;
let isAdmin: boolean = true;

2. Interfaces

Define the shape of objects to enforce structure.

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

const user: User = {
  id: 1,
  name: "John Doe",
  email: "john@example.com",
};

3. Classes

Build reusable and maintainable components with TypeScript classes.

class Person {
  constructor(
    private name: string,
    private age: number,
  ) {}

  greet() {
    console.log(
      `Hello, my name is ${this.name} and I am ${this.age} years old.`,
    );
  }
}

const person = new Person("Alice", 30);
person.greet();

4. Generics

Write reusable and type-safe code.

function identity<T>(value: T): T {
  return value;
}

console.log(identity<string>("Hello")); // Output: Hello
console.log(identity<number>(42)); // Output: 42

5. Enums

Define named constants for better code readability.

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

const move = Direction.Up;
console.log(move); // Output: 0

TypeScript Compilation

TypeScript code is compiled to JavaScript using the TypeScript compiler (tsc).

  1. Install TypeScript:
npm install -g typescript
  1. Compile TypeScript to JavaScript:
tsc file.ts

Conclusion

TypeScript makes JavaScript development more robust, maintainable, and scalable. By adopting TypeScript, you can write cleaner, error-free code while leveraging the latest JavaScript features.