From Zero to Hero in TypeScript

TypeScript has become the go-to language for writing scalable, safer JavaScript in large applications. With its powerful static typing and developer tooling, it allows you to catch bugs earlier and write more expressive code.

This guide walks you through the journey, starting from the very basics and gradually moving toward intermediate and advanced TypeScript concepts.

What is TypeScript?

TypeScript is a superset of JavaScript that adds static typing. It compiles down to plain JavaScript, but offers better tooling, type safety, and developer confidence.

The Basics: Understanding the Type System

The basic types of Typescript are:

• number: whole and floating numbers
• boolean:true or false values
• string: text values
• symbol: globally unique identifier.
• bigint: whole numbers allowing larger negative and positive numbers than the standard number type.

Type Annotations

let name: string = "Alice";
let age: number = 30;
let isOnline: boolean = true;

Any
any disables type checking and allows all types.

let name: any = true;
name = "Taylor"; 
Math.round(name);

Arrays and Objects

let fruits: string[] = ["apple", "banana"];

let user: { name: string; age: number } = {
  name: "Bob",
  age: 25
};

Functions

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

void
void indicates that a function doesn't return any value.

function someFunction(): void {
  console.log('This is an article');
}

Intermediate Features: Making Your Types Smarter

Type Aliases and Interfaces
Interfaces and type aliases are similar, but interfaces are generally used for objects and support declaration merging.

type User = {
  id: number;
  username: string;
};

interface Product {
  id: number;
  title: string;
  price: number;
}

Optional and Readonly Properties

interface Config {
  url: string;
  timeout?: number; // optional
  readonly port: number;
}

Enum

enum Direction {
  Up,
  Down,
  Left,
  Right
}

Tuples
A tuple is an array with a pre-defined types and length.

let tuple: [string, boolean, number];
tuple = ['hello", true, 22];

Literal Types & Narrowing
Literal types allow you to specify the exact value a variable can hold.

function handleEvent(event: "click" | "scroll") {}

Union and Intersection Types
Union types let a variable be one of several types, while intersection types combine multiple types into one that must satisfy all of them.

type UserState = { status: "success" | "error" | "loading" };
type WithTimestamp = { timestamp: number };

type LogEntry = UserState & WithTimestamp; 
// Ahora LogEntry tiene tanto 'status' como 'timestamp'

Advanced & Practical Techniques

Generics
Generics allow you to write reusable code with type flexibility

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

const num = identity<number>(42);
const str = identity("hello");

Utility Types
TypeScript provides built-in utilities like

type Partial<T>       // Makes all properties optional
type Pick<T, K>       // Picks a subset of properties
type Record<K, T>     // Builds object types from keys and values
type Exclude<T, U>    // Removes a type from a union

Discriminated Unions
Useful for handling different types with shared structure

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; size: number };

Type Guards

function isString(value: unknown): value is string {
  return typeof value === "string";
}

Casting with as
as informs the compiler to treat a variable as a specific type, without altering the actual runtime object.

type User = {
  name: string;
  age: number;
};

const data = {
  name: "Alice",
  age: 30,
  role: "admin"
};

const user = data as User;

Tips & Best Practices

• Prefer type for aliases and primitives, and interface for object shapes and components.
• Don’t overuse any, it defeats the purpose of TypeScript.
• Use unknown instead of any when input type is truly uncertain.
• Let the compiler infer where possible, but annotate for clarity in APIs.

Conclusion

TypeScript offers a powerful type system on top of JavaScript that makes your codebase safer, clearer, and more maintainable. By starting with the basics and gradually adopting more advanced features like generics, utility types, and type guards, you’ll gain confidence in architecting scalable front-end and back-end solutions.