Typescript Basics Every Beginner Should Learn
by Digyfindy
Introduction
When I first started digging into TypeScript, I was honestly overwhelmed. I mean, it looked like JavaScript… but with extra “rules.” If you’ve ever wondered what those rules are and why people keep saying “TypeScript makes your code safer,” then you’re in the right place.
In this blog, I’ll walk you through the TypeScript basics in plain English. You don’t need to be a pro. You don’t even need to love math (I don’t). We’ll take it step by step, with real examples you can copy-paste and play with.
By the end, you’ll learn TypeScript enough to build small projects with confidence.
1. Basic Data Types
Think of data types as the labels you put on jars in your kitchen. Without labels, you might pour salt into your coffee. Types help avoid silly mistakes.
let username: string = ""John""; let age: number = 25; let isLoggedIn: boolean = true; let scores: number[] = [90, 80, 85]; Simple, right? By declaring types, you make your code easier to debug later.
2. Aliases and Interfaces
Sometimes repeating types over and over feels annoying. That’s where aliases and interfaces come in.
// Type alias type UserID = string | number; let id1: UserID = 123; let id2: UserID = ""ABC123""; // Interface interface User { name: string; age: number; } const user: User = { name: ""Alice"", age: 30 }; Think of them as shortcuts to keep your code neat.
3. Union and Intersection Types
A union means “either this OR that.” An intersection means “this AND that.”
// Union let value: string | number; value = ""Hello""; value = 42; // Intersection interface Person { name: string; } interface Employee { employeeId: number; } type Staff = Person & Employee; const staffMember: Staff = { name: ""Bob"", employeeId: 101 }; It’s like ordering pizza: Union = choose toppings, Intersection = you want them all. ðŸ•
4. Functions and Return Types
Functions are where most mistakes happen. TypeScript makes them safer by declaring parameter and return types.
function add(a: number, b: number): number { return a + b; } const greet = (name: string): string => { return `Hello, ${name}`; }; Now TypeScript will yell if you pass a string when a number is expected.
5. Generics
Generics are like templates. They let you write reusable code.
function identity<T>(value: T): T { return value; } console.log(identity<string>(""Hello"")); console.log(identity<number>(100)); It’s like saying, “I don’t care what type you give me, I’ll handle it safely.”
6. Async and Await
Ever waited for your coffee machine? That’s async programming. It lets you wait for something (like fetching data) without freezing the entire app.
async function fetchData(): Promise<string> { return new Promise((resolve) => { setTimeout(() => resolve(""Data received""), 2000); }); } async function main() { const data = await fetchData(); console.log(data); } main(); TypeScript helps by making sure your promises return the right type.
7. Type Assertions and Casting
Sometimes you know more than TypeScript. That’s when you tell it, “Trust me, I got this.”
let someValue: unknown = ""Hello, TypeScript""; let strLength: number = (someValue as string).length; console.log(strLength);