CodeBlanks Logo Icon CodeBlanks
Login Register

Indexing with keyof

Learn safe property access with keyof.

Indexing with keyof

The type obtained with keyof can be used for indexed access in square brackets. Kisi[keyof Kisi] gives the union of all property value types of Kisi. This enables safe property access on an object; a wrong key is a compile error.

interface Kisi {
  ad: string;
  yas: number;
}
type DegerTuru = Kisi[keyof Kisi];
// string | number

Safe property access

If a function takes a k: keyof Kisi parameter, the o[k] access in the body is type-safe. The compiler knows k is a valid property name. With return type Kisi[keyof Kisi], the union of all possible value types is returned.

Practice Fetch a value by key

Define interface Kisi with ad: string and yas: number. Write function al(o: Kisi, k: keyof Kisi): Kisi[keyof Kisi] with body return o[k];. Assign { ad: "Ela", yas: 28 } to a variable kisi. Print the result of al(kisi, "ad") with console.log.

Starter code

index.ts
// Kisi arayüzünü ad ve yas ile tanımla
// al fonksiyonu yaz: o Kisi, k Kisi'nin özellik adlarından biri
// dönüş türü tüm değer türlerinin birleşimi olsun
// gövde return o[k]; olsun
// kisi değişkenine { ad: "Ela", yas: 28 } ata
// kisi'den ad değerini al fonksiyonuyla getir ve yazdır

Sample solution

index.ts
interface Kisi {
  ad: string;
  yas: number;
}
function al(o: Kisi, k: keyof Kisi): Kisi[keyof Kisi] {
  return o[k];
}
const kisi = { ad: "Ela", yas: 28 };
console.log(al(kisi, "ad"));

Expected output

Ela

Questions and answers

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

1 What does T become in the code below?

index.ts
interface Kisi { ad: string; yas: number; }
type T = Kisi[keyof Kisi];
  • "ad" | "yas"
  • Kisi
  • any
  • string | number Correct answer

Explanation: Kisi[keyof Kisi] gives the union of all property value types. Kisi's properties are string and number, so the result is string | number. It does not give the key names.

2 Indexed access type

Question 
interface Kisi { ad: string; yas: number; }
function al(o: Kisi, k: keyof Kisi): Kisi[____] {
  return o[k];
}
Answer 
interface Kisi { ad: string; yas: number; }
function al(o: Kisi, k: keyof Kisi): Kisi[keyof Kisi] {
  return o[k];
}

Explanation: To get all value types you write keyof Kisi in the brackets. string is just one type; Kisi is the wrong type; ad is a single property name.

3 keyof indexing parts

Term Meaning
keyof Kisi Kisi's property names
Kisi[keyof Kisi] Union of all value types
o[k] Safe property access
al(kisi, "ad") Fetch a value by key

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