Introduction to TypeScript

TS

TypeScript

JavaScript that scales

📅 2026 👤 Sami Regragui 🎓 Youcode

What is TypeScript?

🏢

Created by Microsoft

Released in 2012 by Anders Hejlsberg — the same engineer behind C# and Turbo Pascal.

🧩

Superset of JavaScript

Every valid .js file is a valid .ts file. TypeScript adds — it never removes.

🔍

Static Typing

You declare what types are expected. The compiler checks them before the code ever runs.

🌐

Compiles to JavaScript

Browsers don't run TS. It checks types, then compiles down to plain JS and disappears.

.ts file

→

tsc

→

.js file

→

🌐 Browser

TypeScript vs JavaScript

🟨 JavaScript — Dynamic Typing

                        function add(a, b) { return a + b }

                        add(2, 3) // ✅ 5 
                        add("2", 3) // 🤔 "23" — no warning 
                        add(true, null) // 🤔 1 — no warning
                    

❌ Error found only at runtime

🔷 TypeScript — Static Typing

                        function add( a: number, b: number ): number { return a + b }

                        add(2, 3) // ✅ 5 
                        add("2", 3) // ❌ caught in your editor
                    

✅ Error caught at compile time

Key Features — Part 1

Basic
Types

                        let name: string = "Alice" 
                        let age: number = 25 
                        let admin: boolean = true

                        let scores: number[] = [10, 20, 30]
                    

Interfaces

                        interface User { name: string age: number email?: string // optional field }
                    

Enums

                        enum Direction { Up, Down, Left, Right }

                        let move: Direction = Direction.Up

Key Features — Part 2

Generics

                        // Works with any type — but stays type-safe
                        function first<T>(arr: T[]): T { return arr[0] }

                        first([1, 2, 3]) // → number first(["a", "b", "c"]) // → string
                    

Utility
Types

                        interface User { name: string; age: number; email: string }

                        Partial<User> // all fields optional 
                        Required<User> // all fields required 
                        Pick<User, "name" | "email"> // keep only these 
                        Omit<User, "age"> // exclude a field
                    

Why TypeScript — Why Not

✅ Reasons to use it

🐛 Catches bugs before the user ever does
📖 Code is self-documenting — types explain intent
🤝 Essential in teams — everyone knows what to pass
🧠 Much better editor autocomplete & IntelliSense
📈 Scales well on large, long-lived codebases

❌ Reasons to skip it

⚙️ Extra compilation step every time you run
📝 More verbose — you write more for the same result
📚 Learning curve, especially generics & utility types
🚀 Overkill for quick scripts or tiny projects
🧑‍💻 Solo dev who knows JS deeply? Maybe not worth it

Where to Expect TypeScript

🅰️

Angular

Google's framework — TS is mandatory, no JS option

Forced

🐈

NestJS

Node.js backend framework built entirely in TypeScript

Forced

▲

Next.js

React meta-framework — TS is the default since v13

Recommended

⚡

Vite

Scaffolds TS projects out of the box via templates

Recommended

💚

Nuxt 3

Vue meta-framework — fully TypeScript-first

Recommended

🏢

Enterprise

Any large team or production codebase in 2024+

Industry standard

Thank You

🙏

Any questions 🔪

TS

typescriptlang.org · github.com/microsoft/TypeScript

Table of Contents

What is TypeScript?

Created by Microsoft

Superset of JavaScript

Static Typing

Compiles to JavaScript

TypeScript vs JavaScript

Key Features — Part 1

Key Features — Part 2

Why TypeScript — Why Not

✅ Reasons to use it

❌ Reasons to skip it

Where to Expect TypeScript