TodayTools

TypeScript flashcards

JavaScript with a type checker: catch bugs at edit time, model your domain and refactor large codebases safely.

Donate
Beginner friendly, starts from zero
Section
How to study
0
TypeScriptStart from zero · 1 of 12

What is TypeScript, in one plain sentence?

TypeScript is JavaScript with labels that say what kind of value each thing holds, plus a checker that warns you about mistakes before the code runs.

JavaScript with a spellcheck for data.

All topics

TypeScript at a glance

TypeScript is JavaScript with labels for each kind of value, plus a checker that catches mistakes before the code runs.

Like labels on kitchen jars: they warn you before you put salt in the tea.

Words you will meet

Type
The kind of value something holds, like number or text
Variable
A named box that holds a value
Property
One named part of an object, like name or age
Annotation
A type you write yourself after a colon
Interface
A named description of an object's shape
Union
A type that allows one of several choices
Compile
Turn TypeScript into plain JavaScript by removing the labels
Runtime
The moment the code actually runs

The steps

  1. 1. Start from zero (12 cards): What TypeScript is, the words it uses, and your first type error.
  2. 2. Core basics (16 cards): Annotations, inference, unions, interfaces and how TypeScript runs in 2026.
  3. 3. Next steps (16 cards): Narrowing, discriminated unions, generics, utility types, as const and satisfies.
  4. 4. Go deeper (17 cards): Conditional and mapped types, exhaustiveness, branding, strictness flags, runtime validation and compiler internals.
All 12 cards in Start from zero
What is TypeScript, in one plain sentence?
TypeScript is JavaScript with labels that say what kind of value each thing holds, plus a checker that warns you about mistakes before the code runs.
What went wrong in plain JavaScript before TypeScript?
A typo like user.emial, or text sent where a number was needed, showed up only when the page broke for a real user. TypeScript points at it while you type.
Where do you already meet TypeScript in daily life?
Many big apps and websites you use are written in it, and so are popular code editors. If an editor ever underlined a mistake in red as you typed code, a checker like this was at work.
What everyday thing is TypeScript like?
Labels on kitchen jars. If someone reaches for the jar marked 'sugar' to sweeten tea and it is really salt, the label warns him before he spoils the cup.
What are a 'value', a 'variable' and a 'type'?
A value is a piece of data, like 42 or "Arun". A variable is a named box that holds a value (made with const or let), and its type is the kind of value: number, string (text) or boolean (true or false).
What are an 'object', a 'property' and an 'array'?
An object groups named values, like { name: "Arun", age: 12 }; each named part is a property. An array is an ordered list, like [10, 20, 30].
What are a 'function', a 'parameter' and a 'return value'?
A function is a named set of steps you can reuse. A parameter is an input it receives, and the return value is what it gives back; code that uses the function is its caller.
What do 'interface', 'union', null and undefined mean?
An interface is a named description of an object's shape: which properties it has and their types. A union means 'one of these', written with |, and null and undefined both mean no value.
What do 'compile', 'runtime', tsc and 'bundler' mean?
To compile here is to turn TypeScript into plain JavaScript by removing the labels; runtime is when the code actually runs. tsc is the TypeScript checker, set up by tsconfig.json, and a bundler packs your files for the browser.
What do you need before starting?
A little JavaScript, a code editor such as VS Code (it understands TypeScript out of the box) and Node.js, which runs JavaScript on your computer.
Your first tiny win: why is the second line an error?
: number is a type label, called an annotation: age must hold a number. Putting text in it makes TypeScript show an error before anything runs.
What will you be able to do after this topic?
Add types to your JavaScript, describe your data with interfaces and unions, read type errors calmly, and change big code safely.
TypeScript cheatsheet

Everyday types

  • string[] / readonly T[] Arrays, mutable or not
  • Record<"a" | "b", V> Object with exactly those keys
  • "draft" | "live" Literal union
  • [lat: number, lng: number] Labelled tuple
  • unknown Anything, must narrow first
  • never Impossible value, exhaustiveness
  • (e: Event) => void Function type

Utility types

  • Partial<T> / Required<T> All optional / all required
  • Pick<T, K> / Omit<T, K> Keep / drop keys
  • Readonly<T> No writes, shallow
  • ReturnType<typeof fn> Function result type
  • Parameters<typeof fn> Argument tuple
  • Awaited<T> Unwrap promises
  • NonNullable<T> Remove null and undefined
  • Extract<U, X> / Exclude<U, X> Filter a union

Operators

  • keyof T Union of keys
  • T[K] Type at a key
  • typeof value Type of a variable
  • value as const Literal, readonly
  • value satisfies T Check, keep inferred type
  • x is T Type guard return
  • <const T> Infer literals for a parameter

Type-level patterns

  • T extends U ? X : Y Conditional type
  • infer R Capture part of a match
  • { [K in keyof T]: ... } Mapped type
  • [K in keyof T as `get${Capitalize<K & string>}`] Rename keys
  • `${A}:${B}` Template literal type
  • T & { __brand: "Id" } Branded primitive

tsconfig and CLI

  • npx tsc --noEmit Type check only
  • npx tsc -b --incremental Build project references
  • npx tsc --extendedDiagnostics Where compile time goes
  • "noUncheckedIndexedAccess": true Index reads may be undefined
  • "verbatimModuleSyntax": true Require import type
  • "erasableSyntaxOnly": true Only strippable syntax
  • node app.ts Node 24 strips types and runs
Donate