> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tuturuuu.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Part 3: TypeScript
> JavaScript with superpowers - catch bugs before they happen
β±οΈ **Duration**: 15 minutes | Learn how TypeScript helps you write safer, more reliable code.
## Why TypeScript?
TypeScript is **JavaScript with types**. It helps you catch errors before running your code.
**Think of it as spell-check for your code! πβ
**
```mermaid theme={null}
graph LR
A["You write code"] --> B{"TypeScript checks it"}
B -->|"β Error found"| C["Fix before running"]
B -->|"β
All good"| D["Run with confidence!"]
style B fill:#4f46e5,stroke:#3730a3,color:#fff
style C fill:#fef3c7,stroke:#f59e0b,color:#000
style D fill:#dcfce7,stroke:#22c55e,color:#000
```
**Fun Facts**:
* TypeScript was created by **Microsoft** and is used by Google, Airbnb, and Slack
* TypeScript is **built with TypeScript** (it compiles itself! π€―)
* **TypeScript Native v7** is coming soonβrewritten in **Golang** for \~10x faster performance!
### The Problem with JavaScript
```javascript theme={null}
// JavaScript - no error until runtime! π₯
function greet(user) {
return "Hello, " + user.name;
}
greet("Alice"); // Runtime error: user.name is undefined
```
### The TypeScript Solution
```typescript theme={null}
// TypeScript - error caught immediately! β
function greet(user: { name: string }) {
return "Hello, " + user.name;
}
greet("Alice"); // β Error: string is not assignable to { name: string }
greet({ name: "Alice" }); // β
Works!
```
**Beginner Tip**: TypeScript acts like a spell-checker for your code. It catches mistakes as you type!
***
## Basic Types
### Primitive Types
```typescript theme={null}
// String
let name: string = "Alice";
// Number
let age: number = 20;
// Boolean
let isStudent: boolean = true;
// Array of strings
let hobbies: string[] = ["coding", "gaming", "reading"];
// Array of numbers
let scores: number[] = [95, 87, 92];
```
### Type Inference
TypeScript is smart! It can often figure out types automatically:
```typescript theme={null}
// TypeScript knows these types automatically
let name = "Alice"; // string
let age = 20; // number
let isActive = true; // boolean
// But you can still add types for clarity
let email: string = "alice@example.com";
```
***
## Objects and Interfaces
### Typing Objects
```typescript theme={null}
// Inline object type
let user: { name: string; age: number } = {
name: "Alice",
age: 20,
};
```
### Using Interfaces (Recommended)
```typescript theme={null}
// Define a reusable type
interface User {
name: string;
age: number;
email: string;
}
// Use it
const alice: User = {
name: "Alice",
age: 20,
email: "alice@example.com",
};
const bob: User = {
name: "Bob",
age: 22,
email: "bob@example.com",
};
```
### Optional Properties
```typescript theme={null}
interface User {
name: string;
age: number;
email?: string; // Optional (the ? makes it optional)
}
// Valid - email is optional
const user: User = {
name: "Alice",
age: 20,
};
```
***
## Functions
### Typed Parameters and Return Values
```typescript theme={null}
// Parameters and return type
function add(a: number, b: number): number {
return a + b;
}
// Arrow function
const multiply = (a: number, b: number): number => {
return a * b;
};
// Usage
add(5, 3); // β
Returns 8
add("5", 3); // β Error: string is not a number
```
### Functions with Objects
```typescript theme={null}
interface Product {
name: string;
price: number;
}
function getTotal(products: Product[]): number {
return products.reduce((sum, p) => sum + p.price, 0);
}
const cart = [
{ name: "Book", price: 15 },
{ name: "Pen", price: 2 },
];
console.log(getTotal(cart)); // 17
```
***
## Union Types
A variable can be one of several types:
```typescript theme={null}
// Can be string or number
let id: string | number;
id = "abc123"; // β
id = 123; // β
id = true; // β Error
// Useful for optional values
let username: string | null = null;
username = "alice"; // β
```
***
## Type Aliases
Create custom type names:
```typescript theme={null}
// Simple alias
type ID = string | number;
// Object alias
type Point = {
x: number;
y: number;
};
// Usage
const userId: ID = "user_123";
const location: Point = { x: 10, y: 20 };
```
**Interface vs Type**: Both can define object shapes. Use `interface` for objects you might extend later, `type` for everything else.
***
## Real-World Example
```typescript theme={null}
// Define types for a todo app
interface Todo {
id: number;
title: string;
completed: boolean;
dueDate?: string;
}
// Type-safe function
function toggleTodo(todo: Todo): Todo {
return {
...todo,
completed: !todo.completed,
};
}
// Type-safe array operations
function getCompletedTodos(todos: Todo[]): Todo[] {
return todos.filter((todo) => todo.completed);
}
// Usage
const myTodos: Todo[] = [
{ id: 1, title: "Learn TypeScript", completed: true },
{ id: 2, title: "Build an app", completed: false },
];
const completed = getCompletedTodos(myTodos);
console.log(completed); // [{ id: 1, title: "Learn TypeScript", completed: true }]
```
***
## TypeScript in 60 Seconds
| Concept | Syntax | Example |
| ---------- | ------------------ | --------------------------------- |
| Basic type | `: type` | `let x: number = 5` |
| Array | `type[]` | `let arr: string[]` |
| Object | `interface` | `interface User { name: string }` |
| Optional | `?` | `email?: string` |
| Union | `\|` | `string \| number` |
| Function | `(params): return` | `(x: number): number` |
***
## Key Takeaways
TypeScript finds errors before you run your code
Your editor knows what properties and methods are available
Types act as documentation for your code
Change code confidently - TypeScript tells you what breaks
***
## β Break Time!
Great job making it this far! Take a 5-minute break before we dive into React.
***
**Next up**: [React Basics β](/learn/workshops/nextjs-workshop/04-react)