CodeHub

📑 TypeScript — Learn From Zero

Playground: TS Playground — click, type, run.

What is TypeScript?

TypeScript is JavaScript with types. It catches errors before you run the code and gives great editor support. Compiles to plain JS.

  • Large web apps (Angular, NestJS)
  • Frontend with React/Vue + strict typing
  • Node.js backends
  • Anywhere JS runs, safer

Run Online — No Install

Use the playground links above.

🟢 Beginner — Core Basics

Your First Program

typescript
let msg: string = "Hello, world!";
console.log(msg);

Types are declared with : type.

Variables & Types

typescript
let age: number = 36;
let isStudent: boolean = true;
let name: string = "Ada";

Primitive types: string, number, boolean.

If / Else

typescript
const age = 18;
if (age >= 18) {
  console.log("Vote");
} else {
  console.log("Too young");
}

Same syntax as JS, but type-checked.

Loops

typescript
for (let i = 0; i < 5; i++) console.log(i);

Loops identical to JS; types inferred.

Functions with Types

typescript
function greet(name: string): string {
  return `Hello, ${name}!`;
}

Parameters and return types are annotated.

Arrays & Tuples

typescript
let nums: number[] = [1, 2, 3];
let pair: [string, number] = ["Ada", 36];

Typed arrays and fixed-shape tuples.

🟡 Intermediate — Building Real Programs

Interfaces

typescript
interface Person {
  name: string;
  age: number;
}
const p: Person = { name: "Ada", age: 36 };

Interfaces describe object shapes.

Generics

typescript
function first(arr: T[]): T {
  return arr[0];
}
first([1, 2, 3]);

Generics make functions reusable & safe.

Union & Literal Types

typescript
type Status = "ok" | "error";
let s: Status = "ok";

Unions narrow possible values.

Modules

typescript
// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

Same import/export as ES modules.

Classes

typescript
class Animal {
  constructor(public name: string) {}
  speak(): string { return this.name; }
}

public auto-creates a field.

🔴 Advanced — Pro Concepts

Utility Types

typescript
type PartialUser = Partial<{ name: string; age: number }>;

Mapped/conditional types like Partial, Pick.

Decorators

typescript
function Log(target: any, key: string) {
  console.log(key);
}
class C { @Log method() {} }

Decorators annotate classes/methods.

Type Guards

typescript
function isStr(x: unknown): x is string {
  return typeof x === "string";
}

x is T narrows types in conditions.

Conditional & infer

typescript
type ElementType = T extends (infer E)[] ? E : never;

Advanced type-level programming.

What's Next?

  • Build a tiny project: Calculator, To-Do App, Weather Widget
  • Read the official docs and a good book
  • Solve Exercism exercises
  • Join a community & share your code

Practice daily for 20 minutes. Consistency > intensity.