TypeScript

Learn TypeScript programming with simple, clear examples

CONTENTS

1. TypeScript by Example
2. Variables
3. Numbers
4. Strings
5. Arrays
6. Functions
7. Loops
8. Conditions
9. Objects
10. Classes
11. Error Handling
12. Generics
13. Final Project

---

TypeScript by Example

Learn TypeScript through examples. Each section shows a concept with runnable code.

Click the “Run” button to execute examples and see output.

---

Variables

TypeScript adds types to JavaScript. Specify the type after a colon.

let name: string = "Alice";
let age: number = 25;

TypeScript

ClearRun

// Try TypeScript variables let name: string = "Alice"; let age: number = 25; console.log(name); console.log(age);

TypeScript

ClearRun

// Create your variable here

---

Numbers

Numbers are numbers. Add. Subtract. Multiply. Divide.

let x: number = 10;
let y: number = 3;
let sum: number = x + y;

Exercise

Calculate 15 * 4 and store it in a variable called result with type number.

TypeScript

ClearRun

// Calculate here

---

Strings

Strings are text. Words. Letters. Characters.

let greeting: string = "Hello";
let name: string = "World";
let message: string = greeting + " " + name;

Exercise

Create a string called sentence that says “TypeScript is great”.

TypeScript

ClearRun

// Create your sentence here

---

Arrays

Arrays hold multiple items. Ordered. Indexed. Typed.

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

Exercise

Create an array called colors with type string[] containing “red”, “green”, and “blue”.

TypeScript

ClearRun

// Create your array here

---

Functions

Functions do things. Take input. Return output. Typed.

function greet(name: string): string {
    return "Hello, " + name;
}

let message: string = greet("Alice");

Exercise

Create a function called add that takes two numbers and returns their sum.

TypeScript

ClearRun

// Create your function here

---

Loops

Loops repeat. For each item. Do something.

let numbers: number[] = [1, 2, 3, 4, 5];
for (let num of numbers) {
    console.log(num * 2);
}

Exercise

Print each number from 1 to 5.

TypeScript

ClearRun

// Create your loop here

---

Conditions

Conditions check. If true, do this. If false, do that.

let age: number = 18;
if (age >= 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}

Exercise

Check if a number is positive. Print “Positive” or “Negative”.

TypeScript

ClearRun

let number: number = 10; // Add your condition here

---

Objects

Objects map keys to values. Look up. Find. Typed.

interface Person {
    name: string;
    age: number;
    city: string;
}

let person: Person = {
    name: "Alice",
    age: 25,
    city: "New York"
};
console.log(person.name);

Exercise

Create an interface called Book with title and author properties.

TypeScript

ClearRun

// Create your interface and object here

---

Classes

Classes create objects. Blueprint. Template. Typed.

class Person {
    name: string;
    
    constructor(name: string) {
        this.name = name;
    }
    
    greet(): string {
        return "Hello, I'm " + this.name;
    }
}

let alice: Person = new Person("Alice");
console.log(alice.greet());

Exercise

Create a class called Car with a brand property and a start method.

TypeScript

ClearRun

// Create your class here

---

Error Handling

Errors happen. Catch them. Handle them.

try {
    let result: number = 10 / 0;
} catch (error) {
    console.log("Cannot divide by zero");
}

Exercise

Try to access an index that doesn’t exist in an array. Catch the error.

TypeScript

ClearRun

let numbers: number[] = [1, 2, 3]; // Add your try-catch here

---

Generics

Generics make code reusable. Type-safe. Flexible.

function getFirst<T>(items: T[]): T {
    return items[0];
}

let firstNumber: number = getFirst([1, 2, 3]);
let firstString: string = getFirst(["a", "b", "c"]);

Exercise

Create a generic function called getLast that returns the last item in an array.

TypeScript

ClearRun

// Create your generic function here

---

Final Project

Create a simple program. Use everything you learned.

interface CalculatorHistory {
    operation: string;
    result: number;
}

class Calculator {
    private history: CalculatorHistory[] = [];
    
    add(a: number, b: number): number {
        let result: number = a + b;
        this.history.push({ operation: `${a} + ${b}`, result });
        return result;
    }
    
    showHistory(): void {
        for (let entry of this.history) {
            console.log(`${entry.operation} = ${entry.result}`);
        }
    }
}

let calc: Calculator = new Calculator();
calc.add(5, 3);
calc.add(10, 20);
calc.showHistory();

Exercise

Create your own calculator with multiply and divide methods.

TypeScript

ClearRun

// Create your calculator here

---

Conclusion

You learned TypeScript. Variables. Functions. Classes. Loops. Conditions.

Simple. Clear. Direct.

TypeScript is powerful. You are ready.