Navigating an object in TypeScript: the right approach

Question

Navigating an object in TypeScript: the right approach

Curious if there might be a bug in TypeScript? Just seeking clarification on whether my code is incorrect or if there is an actual issue with the language.

interface Something {
    key1: string;
    key2: number;
    key3: boolean;
}

const someObject: Something = {
    key1: '123',
    key2: 123,
    key3: false
}

for (const key in someObject) {
    console.log(someObject[key]); // TS error
}

Note: Not looking for workarounds as this code works fine for me. Simply trying to determine if I am making an error or if TypeScript has a potential bug.

for (const [key, value] of Object.entries(someObject)) {
    console.log(key, value);
}

or

for (const key in values) {
    console.log(key, values[key as keyof DirectDepositDTO]);
}

I understand that the type of key may be string, but shouldn't it ideally be keyof Something?

TypeScript Playground Link

P.S. The question is marked as a duplicate, however, I am not in need of a solution right now as I already have one. What I seek to clarify is if there might be a bug in TypeScript. Using for (const key in someObject) { should automatically mean that key will represent keyof Something. There should be no requirement to redefine the types.

typescript

Answer 1

Answer №1

There are multiple approaches you can take.

If you prefer using a for .. in loop, one option is to enable TS to work with indexed properties:

interface Something {
    key1: string;
    key2: number;
    key3: boolean;
}

type Values<T> = T[keyof T]
type MakeIndexed<T> = T & { [prop: string]: Values<T> }
type SomethingIndexed = MakeIndexed<Something>

const someObject: SomethingIndexed = {
    key1: '123',
    key2: 123,
    key3: false
}

for (const key in someObject) {
    const x = someObject[key] // Values<Something>
    const isString = someObject.key1 // string

    console.log(someObject[key]);
}

Alternatively, you can opt for a more functional approach without additional utility types by utilizing type casting:

    const someObject: Something = {
        key1: '123',
        key2: 123,
        key3: false
    }

    // Functional programming method with clearer types
    const keys2 = (Object.keys(someObject) as Array<keyof typeof someObject>).forEach(key => {
        const result = someObject[key]; // string | number | boolean
    })

Answer 2

There are multiple approaches you can take.

If you prefer using a for .. in loop, one option is to enable TS to work with indexed properties:

interface Something {
    key1: string;
    key2: number;
    key3: boolean;
}

type Values<T> = T[keyof T]
type MakeIndexed<T> = T & { [prop: string]: Values<T> }
type SomethingIndexed = MakeIndexed<Something>

const someObject: SomethingIndexed = {
    key1: '123',
    key2: 123,
    key3: false
}

for (const key in someObject) {
    const x = someObject[key] // Values<Something>
    const isString = someObject.key1 // string

    console.log(someObject[key]);
}

Alternatively, you can opt for a more functional approach without additional utility types by utilizing type casting:

    const someObject: Something = {
        key1: '123',
        key2: 123,
        key3: false
    }

    // Functional programming method with clearer types
    const keys2 = (Object.keys(someObject) as Array<keyof typeof someObject>).forEach(key => {
        const result = someObject[key]; // string | number | boolean
    })

Navigating an object in TypeScript: the right approach

Answer №1

Similar questions

Tips for utilizing mergeWith with Subjects in an Angular application

Resolving circular dependencies caused by APP_INITIALIZER

React's .map is not compatible with arrays of objects

What is the best way to iterate through all class properties that are specified using class-validator?

Exploring .ENV Variables using Angular 2 Typescript and NodeJS

Enabling the "allowUnreachableCode" Compiler Option in Visual Studio 2015 Triggers "JsErrorScriptException (0x3001)" Issue

Discovering the method to access a local function within a static function in Javascript ES6 (ES2015) or Typescript

What methods are available for altering state in Server Actions in NextJS 13?

What causes TypeScript 3.7.5 to trigger an error while typing a function that accepts an array as a parameter?

Having difficulty in utilizing localStorage to update the state

Define an object by extracting properties from an array of objects

The value of form.formGroup is not equivalent to the output of console.log(form)

I am attempting to gather user input for an array while also ensuring that duplicate values are being checked

Is it possible to use v-if in conjunction with a style tag to specify a different source file? Alternatively, is there a more efficient method I

Utilize Sequelize's cascade feature within your application

Can an attribute be assigned to an Angular host element without specifying a value?

Running two different wdio.config.js files consecutively

Connect an Observable to the template with async binding

Guide on how to specify the return type for useMutation in the 'react-query' library

Encountered an issue in Angular 2 when the property 'then' was not found on type 'Subscription'