CodeBlanks Logo Icon CodeBlanks
Login Register

typeof operator

Learn the type of a value with typeof.

The typeof operator

The typeof operator infers a value's type and yields it as a type. typeof ayarlar produces the type of the ayarlar variable. You can store it as a type alias and reuse it elsewhere. Unlike JavaScript's runtime typeof, this works at the type level.

const ayarlar = { tema: "koyu", ses: true };
type AyarTip = typeof ayarlar;
// { tema: string; ses: boolean }

Deriving a type from a value

typeof is especially handy for deriving a type from a const object. When the object's shape changes, the type produced by typeof updates automatically. So you obtain the type from an existing value instead of writing the interface by hand.

Practice Derive a type from a value

Assign the object { tema: "koyu", ses: true } to a variable ayarlar. Define type AyarTip as typeof ayarlar. Write function goster(a: AyarTip): void whose body prints tema via console.log(a.tema). Call goster(ayarlar).

Starter code

index.ts
// ayarlar değişkenine { tema: "koyu", ses: true } ata
// AyarTip türünü ayarlar'ın türü olarak tanımla
// goster fonksiyonu AyarTip parametre alsın
// gövdede console.log ile a.tema yazdır
// ayarlar ile çağır

Sample solution

index.ts
const ayarlar = { tema: "koyu", ses: true };
type AyarTip = typeof ayarlar;
function goster(a: AyarTip): void {
  console.log(a.tema);
}
goster(ayarlar);

Expected output

koyu

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What is AyarTip the type of in the code below?

index.ts
const ayarlar = { tema: "koyu", ses: true };
type AyarTip = typeof ayarlar;
  • "koyu" | true
  • any
  • { tema: string; ses: boolean } Correct answer
  • string

Explanation: A const object is still mutable, so its properties infer wide types: tema is string, ses is boolean. typeof gives this object's type.

2 Add typeof

Question 
const ayarlar = { tema: "koyu", ses: true };
type AyarTip = ____ ayarlar;
Answer 
const ayarlar = { tema: "koyu", ses: true };
type AyarTip = typeof ayarlar;

Explanation: To derive a type from a value you use typeof. keyof takes keys from a type; Pick and Required serve other purposes.

3 typeof parts

Term Meaning
typeof ayarlar The type of the ayarlar value
type AyarTip = typeof ayarlar Type alias from a value
const ayarlar = { tema: "koyu" } The source value for typeof
function goster(a: AyarTip) Derived type as parameter

All lessons in Intermediate

1 Classes

  1. Class basics
  2. Constructor and fields
  3. Methods
  4. Static members
  5. Summary - Classes

2 Access modifiers

  1. public
  2. private
  3. protected
  4. Parameter properties
  5. Summary - Access modifiers

3 Readonly properties

  1. readonly fields
  2. Readonly parameter
  3. Readonly vs const
  4. Summary - Readonly

4 Generics

  1. What is a generic?
  2. Generic functions
  3. Generic classes
  4. Multiple type parameters
  5. Summary - Generics

5 Generic constraints

  1. extends constraint
  2. keyof constraint
  3. Default type parameter
  4. Summary - Generic constraints

6 Utility types

  1. Partial
  2. Required and Pick
  3. Omit and Record
  4. Summary - Utility types

7 keyof and typeof

  1. keyof operator
  2. typeof operator
  3. Indexing with keyof
  4. Summary - keyof and typeof

8 Mapped types

  1. What is a mapped type?
  2. Readonly mapped type
  3. Optional mapped type
  4. Summary - Mapped types

9 Conditional types

  1. What is a conditional type?
  2. Distributive conditional
  3. Logic with conditional
  4. Summary - Conditional types

10 infer

  1. infer keyword
  2. Extracting from Promise
  3. Array element type
  4. Summary - infer

11 Decorators

  1. What is a decorator?
  2. Method decorator
  3. Property decorator
  4. Decorator factories
  5. Summary - Decorators

12 Modules

  1. export and import
  2. Default export
  3. Re-export
  4. Type-only import
  5. Summary - Modules

13 Namespaces

  1. What is a namespace?
  2. Nested namespace
  3. Namespace vs module
  4. Summary - Namespaces

14 Declaration files

  1. What is .d.ts?
  2. Ambient module
  3. Triple-slash directive
  4. Summary - Declaration files

15 Advanced classes

  1. abstract class
  2. implements
  3. Get and set
  4. Summary - Advanced classes

16 Type assertion

  1. as keyword
  2. angle bracket syntax
  3. Type assertion vs casting
  4. Casting from unknown
  5. Summary - Type assertion

17 Project: Library package

  1. Package design
  2. Exporting types
  3. Generic helpers
  4. Declaration file
  5. Integration

18 Project: Quiz app

  1. Question model
  2. Question pool
  3. Answer check
  4. Score calculation
  5. Integration

19 Project: Weather app

  1. Weather model
  2. API response type
  3. Data transform
  4. Display
  5. Integration

20 Intermediate final

  1. Challenge 1: Classes
  2. Challenge 2: Generics
  3. Challenge 3: Type systems
  4. Challenge 4: Mini app