TypeScript Academy · Lesson

The typeof Type Operator

Capture the type of a runtime value with typeof.

The typeof Type Operator is a free TypeScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Types From Values

The typeof type operator derives a static type from a runtime value. It lets you write a value once and reuse its shape as a type, keeping the two in perfect sync.

Two Different typeofs

Do not confuse them: JavaScript's typeof returns a string at runtime; TypeScript's typeof appears in a type position and produces a type. Same keyword, different worlds.

const n = 42
console.log(typeof n) // "number" — JS runtime
type T = typeof n     // number — TS type position

Capturing a Variable's Type

Place typeof before a value in a type annotation to capture that value's inferred type. Here T becomes string.

const greeting = "hello"
type G = typeof greeting // string
const another: G = "world"
console.log(another)

Capturing an Object's Shape

Applied to a const object, typeof yields its full inferred shape — no need to write the interface by hand.

const config = { host: "localhost", port: 8080 }
type Config = typeof config // { host: string; port: number }
const c: Config = { host: "127.0.0.1", port: 3000 }
console.log(c)

Inference Widens by Default

Without help, TypeScript widens literals: port: 8080 becomes number, not the literal 8080. Often fine, but sometimes you want the exact value preserved.

const settings = { mode: "dark" }
type S = typeof settings // { mode: string }
const x: S = { mode: "anything" }
console.log(x)

typeof With as const

Add as const to freeze a value into its narrowest literal type. Now typeof captures exact literals and marks everything readonly.

const settings = { mode: "dark" } as const
type S = typeof settings // { readonly mode: "dark" }
const x: S = { mode: "dark" }
console.log(x)

Literal Types From Arrays

With as const, a typeof on an array gives a readonly tuple of literal types — a building block for deriving unions of values.

const roles = ["admin", "editor", "viewer"] as const
type Roles = typeof roles // readonly ["admin", "editor", "viewer"]
console.log(roles[0])

Deriving a Union of Values

Combine typeof with indexed access by [number] to turn an array of constants into a union type of its values.

const roles = ["admin", "editor", "viewer"] as const
type Role = typeof roles[number] // "admin" | "editor" | "viewer"
const r: Role = "editor"
console.log(r)

typeof on Functions

You can capture a function's type too. This is handy for typing wrappers or reusing a signature elsewhere.

function add(a: number, b: number) { return a + b }
type AddFn = typeof add // (a: number, b: number) => number
const myAdd: AddFn = (x, y) => x + y
console.log(myAdd(2, 3))

Keeping Types in Sync

The big win: define configuration or constants once as values, then derive types with typeof. Change the value and the type updates automatically — no duplication.

const defaults = { retries: 3, timeout: 1000 }
type Defaults = typeof defaults
function apply(opts: Defaults) { return opts.retries }
console.log(apply(defaults))

Only Works on Identifiers

The typeof type operator takes an identifier or property path, not an arbitrary expression. typeof (a + b) is not allowed.

const obj = { user: { name: "Ada" } }
type Name = typeof obj.user.name // string
const n: Name = "Leo"
console.log(n)

Quick Check

Test your understanding of the typeof type operator.

Recap

The typeof type operator (in a type position) derives a type from a value — a variable, object, array, or function. By default literals widen; add as const to capture exact literal types as readonly. Combined with indexed access (typeof arr[number]) it yields value unions. Deriving types from values keeps a single source of truth and avoids duplicating shapes.

Frequently asked questions

Is the “The typeof Type Operator” lesson free?

Yes — the full text of “The typeof Type Operator” is free to read here on the web, and the TypeScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “The typeof Type Operator”?

Capture the type of a runtime value with typeof. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The typeof Type Operator” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to TypeScript Academy