Lecture 01 · Fundamentals

Introduction to TypeScript & Setup

Beginner ~50 min

What is TypeScript?

TypeScript is a strongly typed superset of JavaScript that compiles to plain JavaScript. It adds optional static typing, classes, interfaces, and modern features while maintaining full compatibility with existing JavaScript code.

Why TypeScript?

Catches errors at compile time
Excellent tooling and IntelliSense
Scales beautifully for large applications
Industry standard for modern web development (React, Angular, Node.js)

Installation & Setup

terminal

npm install -g typescript
tsc --version

Your First TypeScript Program

hello.ts

function greet(name: string): string {
    return `Hello, ${name}! Welcome to TypeScript Mastery.`;
}

console.log(greet("Tinashe"));

Output

Hello, Tinashe! Welcome to TypeScript Mastery.

🎯 Exercise 1.1

Install TypeScript globally, create a new file intro.ts, add type annotations, compile it with tsc intro.ts, and run the generated JavaScript.

Lecture 02 · Fundamentals

Variables & Data Types

Beginner ~45 min

Core Types

let age: number = 30;
let name: string = "Alice";
let isDone: boolean = false;
let list: number[] = [1, 2, 3];

The 'any' and 'unknown' Types

Use unknown for values where you don't know the type yet; it's safer than any.

Lecture 03 · Fundamentals

Functions & Interfaces

Beginner ~50 min

Interfaces

Interfaces define the "shape" of an object.

interface User {
    id: number;
    username: string;
    email?: string; // Optional
}

const user: User = { id: 1, username: "dev_01" };

Lecture 04 · Fundamentals

Control Flow & Arrays

Beginner ~45 min

Tuples

Tuples allow you to express an array with a fixed number of elements whose types are known.

let x: [string, number];
x = ["hello", 10]; // OK

Lecture 05 · Fundamentals

Objects & Classes

Beginner ~55 min

Class Access Modifiers

class Animal {
    public name: string;
    private age: number;
    constructor(name: string) { this.name = name; }
}

Lecture 06 · Core Concepts

Generics

Intermediate ~60 min

Reusable Types

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

let output = identity<string>("myString");

Lecture 07 · Core Concepts

Modules & Namespaces

Intermediate ~45 min

Export & Import

// math.ts
export const PI = 3.14;

// main.ts
import { PI } from "./math";

Lecture 08 · Core Concepts

Type Guards & Assertions

Intermediate ~50 min

Type Checking at Runtime

function isString(x: any): x is string {
    return typeof x === "string";
}

Lecture 09 · Advanced

Advanced Types

Advanced ~60 min

Utility Types

Partial<T>: All properties optional
Readonly<T>: All properties readonly
Pick<T, K>: Select subset of properties

Lecture 10 · Advanced

DOM Manipulation

Advanced ~55 min

Using TypeScript to safely interact with the browser's DOM API.

const btn = document.getElementById("myBtn") as HTMLButtonElement;
btn.addEventListener("click", () => console.log("Clicked!"));

Lecture 11 · Advanced

React with TypeScript

Advanced ~70 min

Typing Props & State

interface Props { title: string; }
const MyComp: React.FC<Props> = ({ title }) => <h1>{title}</h1>;

Lecture 12 · Capstone

Capstone Project: Weather App

Advanced ~150 min

Build a weather dashboard using TypeScript, fetching data from a REST API and displaying it with full type safety.

// Project requirements:
// 1. Define interfaces for API responses
// 2. Use async/await with fetch
// 3. Handle loading and error states
// 4. Use Generics for API wrapper functions