🎨 Basic Types in TypeScript: Your Foundation for Type Safety

🎯 Introduction

Welcome to the colorful world of TypeScript types! 🎉 If variables are the building blocks of your code, types are the blueprints that keep everything sturdy and safe.

Think of TypeScript types like labels on containers 📦. Just as you wouldn’t put orange juice in a container labeled “milk” (chaos!), TypeScript ensures your variables hold the right kind of data. This prevents bugs, improves code clarity, and makes your development experience delightful!

By the end of this tutorial, you’ll be a TypeScript types wizard, ready to build type-safe applications! Let’s explore! 🏊‍♂️

📚 Understanding TypeScript Types

🤔 What Are Types?

Types are like DNA for your data 🧬. They define what kind of information a variable can hold and what operations you can perform on it.

JavaScript is dynamically typed (types are checked at runtime), but TypeScript adds static typing (types are checked at compile time). This means:

✨ Catch errors before running your code
🚀 Get intelligent code completion
🛡️ Refactor with confidence
📖 Self-documenting code

💡 Type Annotations vs Inference

TypeScript is smart! It can often figure out types automatically:

// 🎯 Type Inference - TypeScript figures it out
let message = "Hello TypeScript!"; // TypeScript knows it's a string
let count = 42;                    // TypeScript knows it's a number

// 📝 Type Annotations - You explicitly declare the type
let greeting: string = "Welcome!";
let age: number = 25;

// 💡 When to use each?
// Use inference when it's obvious
let obvious = "I'm clearly a string!";

// Use annotations when it's not clear
let notObvious: string; // Will be assigned later
notObvious = getUserInput();

🔧 Primitive Types

📝 String Type

Strings are for text - your app’s words and sentences:

// 🎨 String basics
let firstName: string = "Sarah";
let lastName: string = 'Connor';
let fullName: string = `${firstName} ${lastName}`; // Template literals work too!

// 🎯 String operations
let message: string = "TypeScript is awesome!";
let shout: string = message.toUpperCase(); // "TYPESCRIPT IS AWESOME!"
let length: number = message.length;        // 22

// 💡 Real-world example
function createWelcomeMessage(name: string): string {
  return `Welcome aboard, ${name}! 🚀`;
}

// ✅ Works perfectly
console.log(createWelcomeMessage("Alex")); // "Welcome aboard, Alex! 🚀"

// ❌ TypeScript prevents errors!
// createWelcomeMessage(123); // Error: Argument of type 'number' is not assignable

🔢 Number Type

Numbers handle all numeric values - integers and decimals:

// 🎯 Number basics
let age: number = 25;
let price: number = 19.99;
let temperature: number = -5;
let billion: number = 1_000_000_000; // Underscores for readability!

// 🧮 Math operations
let sum: number = 10 + 5;        // 15
let product: number = 4 * 7;     // 28
let division: number = 20 / 4;   // 5
let remainder: number = 10 % 3;  // 1

// 💰 Real-world example: Shopping cart
function calculateTotal(items: number[], taxRate: number): number {
  const subtotal = items.reduce((sum, price) => sum + price, 0);
  const tax = subtotal * taxRate;
  return subtotal + tax;
}

const cart: number[] = [29.99, 15.50, 7.99];
const total = calculateTotal(cart, 0.08); // $57.58 with 8% tax
console.log(`Total: $${total.toFixed(2)} 💳`);

✅ Boolean Type

Booleans are simple but powerful - true or false:

// 🎯 Boolean basics
let isActive: boolean = true;
let isComplete: boolean = false;
let hasPermission: boolean = true;

// 🔧 Boolean logic
let canEdit: boolean = isActive && hasPermission; // true
let needsAttention: boolean = !isComplete || isActive; // true

// 🎮 Real-world example: Game state
interface GameState {
  isPlaying: boolean;
  isPaused: boolean;
  isGameOver: boolean;
  hasHighScore: boolean;
}

function updateGameState(state: GameState, score: number): GameState {
  return {
    ...state,
    isGameOver: score <= 0,
    hasHighScore: score > 1000,
    isPlaying: !state.isPaused && !state.isGameOver
  };
}

// 🎯 Usage
let gameState: GameState = {
  isPlaying: true,
  isPaused: false,
  isGameOver: false,
  hasHighScore: false
};

gameState = updateGameState(gameState, 1500);
console.log(gameState.hasHighScore ? "New high score! 🏆" : "Keep trying! 💪");

💡 Special Types

🌌 Null and Undefined

These represent absence of value, but they’re different:

// 🔍 Understanding null and undefined
let notYetAssigned: undefined = undefined; // Variable declared but not assigned
let explicitlyEmpty: null = null;         // Intentionally empty

// 💡 Real-world usage with union types
let userEmail: string | null = null; // Email might not exist

function findUser(id: number): User | null {
  const user = database.find(u => u.id === id);
  return user || null; // Explicitly return null if not found
}

// 🛡️ Safe handling with strictNullChecks
function greetUser(name: string | undefined): string {
  // ❌ Unsafe - could error if name is undefined
  // return `Hello, ${name.toUpperCase()}!`;
  
  // ✅ Safe - check first!
  if (name !== undefined) {
    return `Hello, ${name.toUpperCase()}! 👋`;
  }
  return "Hello, stranger! 👋";
}

// 🎯 Optional parameters use undefined
function createProduct(name: string, description?: string): Product {
  return {
    name,
    description: description || "No description available"
  };
}

🚫 Void Type

Void represents the absence of a return value:

// 🎯 Functions that don't return anything
function logMessage(message: string): void {
  console.log(`📢 ${message}`);
  // No return statement!
}

// 🎨 Event handlers often return void
function handleClick(event: MouseEvent): void {
  console.log("Button clicked! 🖱️");
  updateUI();
  trackEvent("button_click");
  // Performs actions but doesn't return a value
}

// ⚠️ Void vs undefined
function returnsUndefined(): undefined {
  return undefined; // Must explicitly return undefined
}

function returnsVoid(): void {
  // Can return nothing or return; (empty return)
  return;
}

🎭 Any Type (Use Sparingly!)

Any disables type checking - use it as a last resort:

// ⚠️ Any type - TypeScript gives up!
let mystery: any = 42;
mystery = "now I'm a string";
mystery = { weird: true };
mystery.nonExistent.method(); // No error at compile time! 💥

// 🛡️ Better alternatives to any
// 1. Unknown - safer any
let saferMystery: unknown = getData();
if (typeof saferMystery === 'string') {
  console.log(saferMystery.toUpperCase()); // Must check type first
}

// 2. Union types - be specific
let flexible: string | number = "hello";
flexible = 42; // Still type-safe!

// 3. Generics - maintain type safety
function processData<T>(data: T): T {
  console.log("Processing:", data);
  return data;
}

// 📝 When any might be acceptable (rarely!)
// Migrating JavaScript code gradually
const legacyFunction: any = window.legacyLibrary; // Third-party code

🚀 Array and Tuple Types

📚 Arrays

Arrays store multiple values of the same type:

// 🎯 Array syntax - two ways
let numbers: number[] = [1, 2, 3, 4, 5];
let names: Array<string> = ["Alice", "Bob", "Charlie"];

// 🎨 Working with arrays
let fruits: string[] = ["apple", "banana", "orange"];
fruits.push("mango");           // ✅ Adding strings is fine
// fruits.push(123);            // ❌ Error: can't add numbers!

// 🛒 Real-world example: Shopping list
interface Item {
  name: string;
  quantity: number;
  bought: boolean;
}

let shoppingList: Item[] = [
  { name: "Milk 🥛", quantity: 2, bought: false },
  { name: "Bread 🍞", quantity: 1, bought: true },
  { name: "Eggs 🥚", quantity: 12, bought: false }
];

// 🎯 Array methods with types
const unboughtItems: Item[] = shoppingList.filter(item => !item.bought);
const itemNames: string[] = shoppingList.map(item => item.name);
const totalQuantity: number = shoppingList.reduce(
  (sum, item) => sum + item.quantity, 
  0
);

// 🎮 Multi-dimensional arrays
let gameBoard: string[][] = [
  ["X", "O", "X"],
  ["O", "X", "O"],
  ["X", "O", "X"]
];

🎯 Tuples

Tuples are fixed-length arrays with specific types at each position:

// 📍 Tuple basics - order and types matter!
let coordinate: [number, number] = [10, 20];
let user: [string, number, boolean] = ["Alice", 25, true];

// 🎨 Named tuples (TypeScript 4.0+)
type Point3D = [x: number, y: number, z: number];
let position: Point3D = [10, 20, 30];

// 🌈 Real-world example: RGB colors
type RGB = [red: number, green: number, blue: number];
let primaryRed: RGB = [255, 0, 0];
let oceanBlue: RGB = [0, 119, 190];

function mixColors(color1: RGB, color2: RGB): RGB {
  return [
    Math.round((color1[0] + color2[0]) / 2),
    Math.round((color1[1] + color2[1]) / 2),
    Math.round((color1[2] + color2[2]) / 2)
  ];
}

// 📊 Database query results
type QueryResult = [id: number, name: string, email: string];
let userRecord: QueryResult = [1, "John Doe", "[email protected]"];

// 🎯 Destructuring tuples
let [id, name, email] = userRecord;
console.log(`User ${name} (${email}) has ID: ${id}`);

// ⚠️ Tuples vs Arrays
let flexibleArray: number[] = [1, 2, 3, 4, 5]; // Can have any length
let strictTuple: [number, number] = [1, 2];    // Must have exactly 2 elements

🎨 Enum Type

Enums define a set of named constants:

// 🎯 Numeric enums
enum Direction {
  Up,    // 0
  Down,  // 1
  Left,  // 2
  Right  // 3
}

let playerDirection: Direction = Direction.Up;

// 🎮 Game example with custom values
enum GameStatus {
  NotStarted = 0,
  InProgress = 1,
  Paused = 2,
  GameOver = 3,
  Victory = 4
}

function handleGameStatus(status: GameStatus): string {
  switch (status) {
    case GameStatus.NotStarted:
      return "Press START to begin! 🎮";
    case GameStatus.InProgress:
      return "Game on! 🏃‍♂️";
    case GameStatus.Paused:
      return "Paused - Press P to continue ⏸️";
    case GameStatus.GameOver:
      return "Game Over! Try again? 💀";
    case GameStatus.Victory:
      return "You win! Congratulations! 🏆";
  }
}

// 🎨 String enums
enum Color {
  Red = "#FF0000",
  Green = "#00FF00",
  Blue = "#0000FF",
  Purple = "#800080"
}

let favoriteColor: Color = Color.Purple;
console.log(`My favorite color is ${favoriteColor}`); // "#800080"

// 🌍 Real-world example: HTTP status codes
enum HttpStatus {
  OK = 200,
  Created = 201,
  BadRequest = 400,
  Unauthorized = 401,
  NotFound = 404,
  ServerError = 500
}

function handleResponse(status: HttpStatus): void {
  if (status === HttpStatus.OK) {
    console.log("Success! ✅");
  } else if (status >= 400) {
    console.log("Error occurred! ❌");
  }
}

// 🎯 Const enums (more efficient)
const enum Size {
  Small = "S",
  Medium = "M",
  Large = "L",
  ExtraLarge = "XL"
}

let shirtSize: Size = Size.Medium;

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Type Assertion Abuse

// ❌ Dangerous type assertion
let someValue: any = "This is a string";
let strLength: number = (someValue as string).length; // Works but risky!

// What if someValue changes?
someValue = 123;
// strLength = (someValue as string).length; // 💥 Runtime error!

// ✅ Safe approach - Type guards
function getLength(value: unknown): number {
  if (typeof value === 'string') {
    return value.length;
  }
  if (Array.isArray(value)) {
    return value.length;
  }
  return 0;
}

🤯 Pitfall 2: Array Type Confusion

// ❌ Common mistake - wrong syntax
// let numbers: number = [1, 2, 3]; // Error!
// let names: [string] = ["Alice", "Bob"]; // This is a tuple with one element!

// ✅ Correct array syntax
let numbers: number[] = [1, 2, 3];
let names: string[] = ["Alice", "Bob"];

// ❌ Mixing types without union
// let mixed: string[] = ["hello", 42]; // Error!

// ✅ Use union types for mixed arrays
let mixed: (string | number)[] = ["hello", 42, "world", 100];

😵 Pitfall 3: Null/Undefined Confusion

// ❌ Not handling null/undefined
function getUser(id: number): User | null {
  return database.find(user => user.id === id) || null;
}

let user = getUser(123);
// console.log(user.name); // 💥 Object is possibly 'null'

// ✅ Proper null checking
if (user !== null) {
  console.log(user.name); // Safe!
}

// ✅ Or use optional chaining
console.log(user?.name || "User not found");

🛠️ Best Practices

🎯 Type Best Practices

🏷️ Always Use Specific Types: Be as specific as possible

// ❌ Too generic
let data: any[] = [1, 2, 3];

// ✅ Specific
let scores: number[] = [1, 2, 3];

📝 Let TypeScript Infer When Obvious: Don’t over-annotate

// ❌ Redundant
let name: string = "Alice";

// ✅ Clean
let name = "Alice"; // TypeScript knows it's a string

🛡️ Enable Strict Mode: Maximum type safety

{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true
  }
}

🎨 Use Enums for Fixed Sets: Better than magic strings

// ❌ Magic strings
if (status === "active") { }

// ✅ Type-safe enum
if (status === UserStatus.Active) { }

✨ Prefer Unknown Over Any: Safer for unknown types

// ❌ Dangerous
function process(data: any) { }

// ✅ Safe
function process(data: unknown) { }

🧪 Hands-On Exercise

🎯 Challenge: Build a Type-Safe Task Manager

Create a task management system using all the basic types:

📋 Requirements:

✅ Use all primitive types (string, number, boolean)
🏷️ Create enums for task status and priority
👥 Use arrays for task lists
📅 Handle null/undefined for optional fields
🎨 Use tuples for task metadata

🚀 Bonus Points:

Implement type-safe filtering
Add date handling
Create summary statistics

💡 Solution

🔍 Click to see solution

// 🎯 Enums for task properties
enum TaskStatus {
  Todo = "TODO",
  InProgress = "IN_PROGRESS",
  Done = "DONE",
  Archived = "ARCHIVED"
}

enum TaskPriority {
  Low = 1,
  Medium = 2,
  High = 3,
  Urgent = 4
}

// 📝 Task interface using all basic types
interface Task {
  id: number;                    // number
  title: string;                 // string
  description: string | null;    // string or null
  isCompleted: boolean;          // boolean
  priority: TaskPriority;        // enum
  status: TaskStatus;            // enum
  tags: string[];                // array
  assignee?: string;             // optional (undefined)
  dueDate: Date | null;          // Date or null
  metadata: [created: Date, modified: Date]; // tuple
}

// 🏗️ Task Manager class
class TaskManager {
  private tasks: Task[] = [];
  private nextId: number = 1;
  
  // ➕ Add new task
  addTask(
    title: string,
    priority: TaskPriority = TaskPriority.Medium
  ): Task {
    const now = new Date();
    const newTask: Task = {
      id: this.nextId++,
      title,
      description: null,
      isCompleted: false,
      priority,
      status: TaskStatus.Todo,
      tags: [],
      dueDate: null,
      metadata: [now, now]
    };
    
    this.tasks.push(newTask);
    console.log(`✅ Task added: ${title}`);
    return newTask;
  }
  
  // 🔍 Find tasks by status
  getTasksByStatus(status: TaskStatus): Task[] {
    return this.tasks.filter(task => task.status === status);
  }
  
  // 📊 Get statistics
  getStats(): Record<string, number> {
    const stats = {
      total: this.tasks.length,
      completed: 0,
      inProgress: 0,
      highPriority: 0
    };
    
    this.tasks.forEach(task => {
      if (task.isCompleted) stats.completed++;
      if (task.status === TaskStatus.InProgress) stats.inProgress++;
      if (task.priority >= TaskPriority.High) stats.highPriority++;
    });
    
    return stats;
  }
  
  // 🎨 Update task
  updateTask(id: number, updates: Partial<Task>): void {
    const taskIndex = this.tasks.findIndex(t => t.id === id);
    if (taskIndex !== -1) {
      const task = this.tasks[taskIndex];
      this.tasks[taskIndex] = {
        ...task,
        ...updates,
        metadata: [task.metadata[0], new Date()] // Update modified date
      };
      console.log(`📝 Task ${id} updated`);
    }
  }
}

// 🎮 Usage example
const taskManager = new TaskManager();

// Add tasks
const task1 = taskManager.addTask("Learn TypeScript basics 📘", TaskPriority.High);
const task2 = taskManager.addTask("Build a project 🏗️", TaskPriority.Medium);
const task3 = taskManager.addTask("Review and practice 📚", TaskPriority.Low);

// Update task
taskManager.updateTask(task1.id, {
  status: TaskStatus.InProgress,
  description: "Master all primitive types!",
  tags: ["learning", "typescript", "fundamentals"]
});

// Get statistics
const stats = taskManager.getStats();
console.log("📊 Task Statistics:", stats);

// Filter tasks
const inProgressTasks = taskManager.getTasksByStatus(TaskStatus.InProgress);
console.log(`🔧 Tasks in progress: ${inProgressTasks.length}`);

🎓 Key Takeaways

You’ve mastered TypeScript basic types! Here’s what you can now do:

✅ Use all primitive types with confidence 💪
✅ Work with arrays and tuples effectively 🎯
✅ Create and use enums for better code organization 🏷️
✅ Handle null and undefined safely 🛡️
✅ Choose the right type for every situation! 🚀

Remember: Types are your friends - they catch bugs, document code, and make development more enjoyable! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve built a solid foundation in TypeScript types!

Here’s what to do next:

💻 Practice with the exercise above
🏗️ Add types to an existing JavaScript project
📚 Learn about interfaces and type aliases
🌟 Explore advanced types like unions and generics!

Remember: Every TypeScript expert started with these basics. Keep practicing! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn