Home›Tutorials›TypeScript
Typed Superset of JavaScript

TypeScript — Complete Tutorial

Learn TypeScript from absolute zero. Each topic is explained simply with real examples you can edit and understand quickly.

🟩 Beginner Friendly ▶ Live Code Editor 📚 41 Topics
Your Progress3% complete
tutorialHOMEIntroductionGet StartedSimple TypesExplicit & InferenceSpecial TypesArraysTuplesObject TypesEnumsAliases & InterfacesUnion TypesFunctionsCastingClassesBasic GenericsUtility TypesKeyofNullDefinitely Typed5 Updates
⚡Live TypeScript Lab

Edit the TypeScript example below and click Run. Use this to quickly test typed logic and UI behavior.

typescript-lab.ts
📝 Edit Code
👁 Live Preview
💡 Try this: change types and values, then rerun.
∙ Chapter 001

TypeScript tutorial

Learn TypeScript tutorial with a small example you can edit and run.

📝Syntax
npm i -g typescript
npx tsc --init
npx tsc
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

tutorial.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
const msg: string = "Welcome to TypeScript";Declares a variable/constant (with types).
console.log(msg);Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TypeScript tutorial
∙ Chapter 002

TS HOME

Learn TS HOME with a small example you can edit and run.

📝Syntax
npm i -g typescript
npx tsc --init
npx tsc
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

home.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
const msg: string = "Welcome to TypeScript";Declares a variable/constant (with types).
console.log(msg);Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS HOME
∙ Chapter 003

TS Introduction

Learn TS Introduction with a small example you can edit and run.

📝Syntax
npm i -g typescript
npx tsc --init
npx tsc
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

introduction.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
const msg: string = "Welcome to TypeScript";Declares a variable/constant (with types).
console.log(msg);Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Introduction
∙ Chapter 004

TS Get Started

Learn TS Get Started with a small example you can edit and run.

📝Syntax
npm i -g typescript
npx tsc --init
npx tsc
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

get-started.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
const msg: string = "Welcome to TypeScript";Declares a variable/constant (with types).
console.log(msg);Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Get Started
TypeScript Core Types
∙ Chapter 005

TS Simple Types

Learn TS Simple Types with a small example you can edit and run.

📝Syntax
let n: number = 7;
let s: string = "hi";
let ok: boolean = true;
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

simple-types.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
const name: string = "Mana";Declares a variable/constant (with types).
const score: number = 95;Declares a variable/constant (with types).
const ok: boolean = score >= 75;Declares a variable/constant (with types).
console.log(` passed? `);Prints output to the console.
🏢Real-world
  • 1Types protect APIs, forms, and refactors by making contracts explicit.
⚠Common Mistakes
  • 1Overcomplicating types before the domain is clear.
✅Best Practices
  • 1Start with readable types; refactor to advanced types when needed.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Simple Types
∙ Chapter 006

TS Explicit & Inference

Learn TS Explicit & Inference with a small example you can edit and run.

📝Syntax
let a = 1;          // inferred number
let b: number = 2;    // explicit
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

explicit-and-inference.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
let a = 7; // inferred numberDeclares a variable/constant (with types).
let b: number = 3; // explicitDeclares a variable/constant (with types).
const sum = a + b;Declares a variable/constant (with types).
console.log(sum);Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Explicit & Inference
∙ Chapter 007

TS Special Types

Learn TS Special Types with a small example you can edit and run.

📝Syntax
let a: any = 1;
let u: unknown = "x";
function fail(): never { throw new Error("x") }
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

special-types.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
let a: any = 1;Declares a variable/constant (with types).
let u: unknown = "7";Declares a variable/constant (with types).
function toNumber(x: unknown): number {Declares a function.
if (typeof x === "string") return Number(x);TypeScript line.
if (typeof x === "number") return x;TypeScript line.
return 0;TypeScript line.
}TypeScript line.
console.log(toNumber(u));Prints output to the console.
🏢Real-world
  • 1Types protect APIs, forms, and refactors by making contracts explicit.
⚠Common Mistakes
  • 1Overcomplicating types before the domain is clear.
✅Best Practices
  • 1Start with readable types; refactor to advanced types when needed.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Special Types
∙ Chapter 008

TS Arrays

Learn TS Arrays with a small example you can edit and run.

📝Syntax
let xs: number[] = [1, 2, 3];
let ys: Array<string> = ["a", "b"];
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

arrays.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
const nums: number[] = [1, 2, 3, 4];Declares a variable/constant (with types).
const sum = nums.reduce((a, b) => a + b, 0);Declares a function.
console.log(sum);Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Arrays
∙ Chapter 009

TS Tuples

Learn TS Tuples with a small example you can edit and run.

📝Syntax
let t: [number, string] = [1, "a"];
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

tuples.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
const t: [number, string] = [7, "hi"];Declares a variable/constant (with types).
console.log(` `);Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Tuples
∙ Chapter 010

TS Object Types

Learn TS Object Types with a small example you can edit and run.

📝Syntax
type User = { id: number; name: string };
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

object-types.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
type User = { id: number; name: string };Declares a type alias.
const u: User = { id: 1, name: "Mana" };Declares a variable/constant (with types).
console.log(u.name);Prints output to the console.
🏢Real-world
  • 1Types protect APIs, forms, and refactors by making contracts explicit.
⚠Common Mistakes
  • 1Overcomplicating types before the domain is clear.
✅Best Practices
  • 1Start with readable types; refactor to advanced types when needed.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Object Types
∙ Chapter 011

TS Enums

Learn TS Enums with a small example you can edit and run.

📝Syntax
enum Status { Active, Inactive }
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

enums.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
enum Status { Active, Inactive }Declares an enum.
const s: Status = Status.Active;Declares a variable/constant (with types).
console.log(s === Status.Active ? "Active" : "Inactive");Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Enums
∙ Chapter 012

TS Aliases & Interfaces

Learn TS Aliases & Interfaces with a small example you can edit and run.

📝Syntax
type Id = string | number;
interface User { name: string }
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

aliases-and-interfaces.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
type Id = string | number;Declares a type alias.
interface User { id: Id; name: string }Declares an interface.
const u: User = { id: 1, name: "Mana" };Declares a variable/constant (with types).
console.log(u.id);Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Aliases & Interfaces
∙ Chapter 013

TS Union Types

Learn TS Union Types with a small example you can edit and run.

📝Syntax
let v: string | number = 1;
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

union-types.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
function label(x: string | number): string {Declares a function.
return typeof x === "number" ? `n=` : `s=`;TypeScript line.
}TypeScript line.
console.log(label(7));Prints output to the console.
🏢Real-world
  • 1Types protect APIs, forms, and refactors by making contracts explicit.
⚠Common Mistakes
  • 1Overcomplicating types before the domain is clear.
✅Best Practices
  • 1Start with readable types; refactor to advanced types when needed.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Union Types
TypeScript Programming
∙ Chapter 014

TS Functions

Learn TS Functions with a small example you can edit and run.

📝Syntax
function add(a: number, b: number): number { return a + b }
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

functions.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
function add(a: number, b: number): number { return a + b }Declares a function.
console.log(add(4, 6));Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Functions
∙ Chapter 015

TS Casting

Learn TS Casting with a small example you can edit and run.

📝Syntax
const n = ("7" as unknown as number);
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

casting.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
const raw: unknown = "42";Declares a variable/constant (with types).
const n = Number(raw as string);Declares a variable/constant (with types).
console.log(n + 1);Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Casting
∙ Chapter 016

TS Classes

Learn TS Classes with a small example you can edit and run.

📝Syntax
class User { constructor(public name: string) {} }
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

classes.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
class Counter {Declares a class.
private n = 0;TypeScript line.
inc() { this.n++; }TypeScript line.
value() { return this.n; }TypeScript line.
}TypeScript line.
const c = new Counter();Declares a variable/constant (with types).
c.inc(); c.inc();TypeScript line.
console.log(c.value());Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Classes
∙ Chapter 017

TS Basic Generics

Learn TS Basic Generics with a small example you can edit and run.

📝Syntax
function id<T>(x: T): T { return x }
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

basic-generics.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
function first<T>(xs: T[]): T { return xs[0] }Declares a function.
console.log(first(["Mana", "Coding"]));Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Basic Generics
∙ Chapter 018

TS Utility Types

Learn TS Utility Types with a small example you can edit and run.

📝Syntax
type P = Partial<{ a: number; b: number }>;
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

utility-types.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
type User = { id: number; name: string; active: boolean };Declares a type alias.
type Preview = Pick<User, "id" | "name">;Declares a type alias.
const p: Preview = { id: 1, name: "Mana" };Declares a variable/constant (with types).
console.log(p.name);Prints output to the console.
🏢Real-world
  • 1Types protect APIs, forms, and refactors by making contracts explicit.
⚠Common Mistakes
  • 1Overcomplicating types before the domain is clear.
✅Best Practices
  • 1Start with readable types; refactor to advanced types when needed.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Utility Types
∙ Chapter 019

TS Keyof

Learn TS Keyof with a small example you can edit and run.

📝Syntax
type Keys = keyof { a: 1; b: 2 };
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

keyof.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
type User = { id: number; name: string };Declares a type alias.
type K = keyof User;Declares a type alias.
const key: K = "name";Declares a variable/constant (with types).
console.log(key);Prints output to the console.
🏢Real-world
  • 1Types protect APIs, forms, and refactors by making contracts explicit.
⚠Common Mistakes
  • 1Overcomplicating types before the domain is clear.
✅Best Practices
  • 1Start with readable types; refactor to advanced types when needed.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Keyof
∙ Chapter 020

TS Null

Learn TS Null with a small example you can edit and run.

📝Syntax
let x: string | null = null;
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

null.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
function show(x: string | null): string {Declares a function.
return x ?? "(empty)";TypeScript line.
}TypeScript line.
console.log(show(null));Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Null
TypeScript Ecosystem
∙ Chapter 021

TS Definitely Typed

Learn TS Definitely Typed with a small example you can edit and run.

📝Syntax
npm i -D @types/node
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

definitely-typed.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
console.log("Types ready");Prints output to the console.
🏢Real-world
  • 1Types protect APIs, forms, and refactors by making contracts explicit.
⚠Common Mistakes
  • 1Overcomplicating types before the domain is clear.
✅Best Practices
  • 1Start with readable types; refactor to advanced types when needed.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Definitely Typed
∙ Chapter 022

TS 5 Updates

Learn TS 5 Updates with a small example you can edit and run.

📝Syntax
const p = { x: 1 } satisfies { x: number };
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

ts-5-updates.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
const input = { id: 1, name: "Mana" } satisfies { id: number; name: string };Declares a variable/constant (with types).
console.log(input.name);Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS 5 Updates
∙ Chapter 023

TS Configuration

Learn TS Configuration with a small example you can edit and run.

📝Syntax
{
  "compilerOptions": { "strict": true }
}
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

configuration.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
console.log("tsconfig set");Prints output to the console.
🏢Real-world
  • 1Tooling and config decide how your code builds, checks, and ships.
⚠Common Mistakes
  • 1Loose tsconfig settings causing runtime surprises.
✅Best Practices
  • 1Use strict settings and keep TS/ESLint/Prettier aligned.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Configuration
∙ Chapter 024

TS with Node.js

Learn TS with Node.js with a small example you can edit and run.

📝Syntax
import fs from "node:fs";
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

with-node-js.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
const env = "development";Declares a variable/constant (with types).
console.log(env);Prints output to the console.
🏢Real-world
  • 1Tooling and config decide how your code builds, checks, and ships.
⚠Common Mistakes
  • 1Loose tsconfig settings causing runtime surprises.
✅Best Practices
  • 1Use strict settings and keep TS/ESLint/Prettier aligned.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS with Node.js
∙ Chapter 025

TS with React

Learn TS with React with a small example you can edit and run.

📝Syntax
type Props = { title: string };
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

with-react.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
const title: string = "Hello";Declares a variable/constant (with types).
console.log(title);Prints output to the console.
🏢Real-world
  • 1Tooling and config decide how your code builds, checks, and ships.
⚠Common Mistakes
  • 1Loose tsconfig settings causing runtime surprises.
✅Best Practices
  • 1Use strict settings and keep TS/ESLint/Prettier aligned.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS with React
∙ Chapter 026

TS Tooling

Learn TS Tooling with a small example you can edit and run.

📝Syntax
tsc --watch
eslint .
prettier --write .
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

tooling.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
console.log("Tooling OK");Prints output to the console.
🏢Real-world
  • 1Tooling and config decide how your code builds, checks, and ships.
⚠Common Mistakes
  • 1Loose tsconfig settings causing runtime surprises.
✅Best Practices
  • 1Use strict settings and keep TS/ESLint/Prettier aligned.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Tooling
TypeScript Advanced Types
∙ Chapter 027

TS Advanced Types

Learn TS Advanced Types with a small example you can edit and run.

📝Syntax
type User = { id: number; name: string };
type Id = User["id"];
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

advanced-types.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
type ApiUser = { id: number; name: string; active: boolean };Declares a type alias.
type ReadonlyUser = { readonly [K in keyof ApiUser]: ApiUser[K] };Declares a type alias.
type Id = ApiUser["id"];Declares a type alias.
const id: Id = 1;Declares a variable/constant (with types).
console.log(id);Prints output to the console.
🏢Real-world
  • 1Types protect APIs, forms, and refactors by making contracts explicit.
⚠Common Mistakes
  • 1Overcomplicating types before the domain is clear.
✅Best Practices
  • 1Start with readable types; refactor to advanced types when needed.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Advanced Types
∙ Chapter 028

TS Type Guards

Learn TS Type Guards with a small example you can edit and run.

📝Syntax
function isString(x: unknown): x is string { return typeof x === "string" }
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

type-guards.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
function isString(x: unknown): x is string {Declares a function.
return typeof x === "string";TypeScript line.
}TypeScript line.
const v: unknown = "Mana";Declares a variable/constant (with types).
console.log(isString(v) ? v.toUpperCase() : "not a string");Prints output to the console.
🏢Real-world
  • 1Types protect APIs, forms, and refactors by making contracts explicit.
⚠Common Mistakes
  • 1Overcomplicating types before the domain is clear.
✅Best Practices
  • 1Start with readable types; refactor to advanced types when needed.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Type Guards
∙ Chapter 029

TS Conditional Types

Learn TS Conditional Types with a small example you can edit and run.

📝Syntax
type IsString<T> = T extends string ? true : false;
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

conditional-types.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
type IsString<T> = T extends string ? true : false;Declares a type alias.
type A = IsString<string>;Declares a type alias.
type B = IsString<number>;Declares a type alias.
console.log("Conditional types ready");Prints output to the console.
🏢Real-world
  • 1Types protect APIs, forms, and refactors by making contracts explicit.
⚠Common Mistakes
  • 1Overcomplicating types before the domain is clear.
✅Best Practices
  • 1Start with readable types; refactor to advanced types when needed.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Conditional Types
∙ Chapter 030

TS Mapped Types

Learn TS Mapped Types with a small example you can edit and run.

📝Syntax
type RO<T> = { readonly [K in keyof T]: T[K] };
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

mapped-types.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
type User = { id: number; name: string };Declares a type alias.
type RO<T> = { readonly [K in keyof T]: T[K] };Declares a type alias.
const u: RO<User> = { id: 1, name: "Mana" };Declares a variable/constant (with types).
console.log(u.name);Prints output to the console.
🏢Real-world
  • 1Types protect APIs, forms, and refactors by making contracts explicit.
⚠Common Mistakes
  • 1Overcomplicating types before the domain is clear.
✅Best Practices
  • 1Start with readable types; refactor to advanced types when needed.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Mapped Types
∙ Chapter 031

TS Type Inference

Learn TS Type Inference with a small example you can edit and run.

📝Syntax
let a = 1;          // inferred number
let b: number = 2;    // explicit
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

type-inference.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
let a = 7; // inferred numberDeclares a variable/constant (with types).
let b: number = 3; // explicitDeclares a variable/constant (with types).
const sum = a + b;Declares a variable/constant (with types).
console.log(sum);Prints output to the console.
🏢Real-world
  • 1Types protect APIs, forms, and refactors by making contracts explicit.
⚠Common Mistakes
  • 1Overcomplicating types before the domain is clear.
✅Best Practices
  • 1Start with readable types; refactor to advanced types when needed.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Type Inference
∙ Chapter 032

TS Literal Types

Learn TS Literal Types with a small example you can edit and run.

📝Syntax
type Dir = "left" | "right";
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

literal-types.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
type Dir = "left" | "right";Declares a type alias.
function move(d: Dir){ return d === "left" ? "L" : "R" }Declares a function.
console.log(move("right"));Prints output to the console.
🏢Real-world
  • 1Types protect APIs, forms, and refactors by making contracts explicit.
⚠Common Mistakes
  • 1Overcomplicating types before the domain is clear.
✅Best Practices
  • 1Start with readable types; refactor to advanced types when needed.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Literal Types
∙ Chapter 033

TS Namespaces

Learn TS Namespaces with a small example you can edit and run.

📝Syntax
namespace App { export const v = 1 }
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

namespaces.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
namespace App {Groups declarations in a namespace.
export const version = 1;TypeScript line.
}TypeScript line.
console.log(App.version);Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Namespaces
∙ Chapter 034

TS Index Signatures

Learn TS Index Signatures with a small example you can edit and run.

📝Syntax
type Bag = { [k: string]: number };
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

index-signatures.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
type Bag = { [k: string]: number };Declares a type alias.
const b: Bag = { sql: 2, go: 1 };Declares a variable/constant (with types).
console.log(b["sql"]);Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Index Signatures
∙ Chapter 035

TS Declaration Merging

Learn TS Declaration Merging with a small example you can edit and run.

📝Syntax
interface User { name: string }
interface User { id: number }
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

declaration-merging.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
console.log("Merging OK");Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Declaration Merging
TypeScript Modern
∙ Chapter 036

TS Async Programming

Learn TS Async Programming with a small example you can edit and run.

📝Syntax
async function f(): Promise<number> { return 1 }
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

async-programming.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
async function getUser(): Promise<{ id: number; name: string }> {Declares async code returning a Promise.
return { id: 1, name: "Mana" };TypeScript line.
}TypeScript line.
getUser().then(u => console.log(u.name));Declares a function.
🏢Real-world
  • 1Async typing prevents Promise misuse and makes APIs safer.
⚠Common Mistakes
  • 1Catching errors as any instead of unknown.
✅Best Practices
  • 1Prefer unknown in catch and narrow safely.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Async Programming
∙ Chapter 037

TS Decorators

Learn TS Decorators with a small example you can edit and run.

📝Syntax
// @decorator requires "experimentalDecorators": true
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

decorators.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
console.log("Decorators enabled");Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Decorators
∙ Chapter 038

TS in JS Projects

Learn TS in JS Projects with a small example you can edit and run.

📝Syntax
// @ts-check
// JSDoc types in .js files
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

in-js-projects.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
console.log("JS project typing");Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS in JS Projects
∙ Chapter 039

TS Migration

Learn TS Migration with a small example you can edit and run.

📝Syntax
// rename .js -> .ts
// fix errors
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

migration.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
console.log("Migration ready");Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Migration
∙ Chapter 040

TS Error Handling

Learn TS Error Handling with a small example you can edit and run.

📝Syntax
try { throw new Error("x") } catch (e: unknown) {}
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

error-handling.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
function safeJson(input: string): string {Declares a function.
try {TypeScript line.
const v: unknown = JSON.parse(input);Declares a variable/constant (with types).
return typeof v === "object" && v ? "ok" : "bad";TypeScript line.
} catch (e: unknown) {TypeScript line.
return "error";TypeScript line.
}TypeScript line.
}TypeScript line.
console.log(safeJson("not json"));Prints output to the console.
🏢Real-world
  • 1Async typing prevents Promise misuse and makes APIs safer.
⚠Common Mistakes
  • 1Catching errors as any instead of unknown.
✅Best Practices
  • 1Prefer unknown in catch and narrow safely.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Error Handling
∙ Chapter 041

TS Best Practices

Learn TS Best Practices with a small example you can edit and run.

📝Syntax
"strict": true
"noUncheckedIndexedAccess": true
⚡Example (Edit & Run)

Edit the TypeScript code below and click Run. The output panel shows the extracted Expected Output notes (or simple logs).

best-practices.ts
📝 Edit Code
👁 Output
💡 Tip: keep a // Expected Output: line so the output panel has something to show.
🔍Line-by-line
LineMeaning
const items: string[] = ["Go", "TS", "Rust"];Declares a variable/constant (with types).
console.log(items.join(","));Prints output to the console.
🏢Real-world
  • 1TypeScript is widely used for web apps, Node.js services, and typed UI components.
⚠Common Mistakes
  • 1Using any everywhere and losing type safety.
✅Best Practices
  • 1Turn on strict mode and type your boundaries first.
📖Summary & Practice
  • 1Edit the example and rerun to learn faster.
  • 2Prefer clarity first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one value and predict the output.
  • 2Add one edge case and handle it.
  • 3Explain the rule in 1 sentence.
📈SEO

Keywords (topic intent):

TypeScript JavaScript TS Best Practices
←
PreviousBack to Home
 🎉 TypeScript Tutorial Complete (41 topics)!
Next UpAngular Basics →