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

"Navigate with ease using Material-UI's BottomNavigationItem and link

Utilizing Enum Lowercase as Index Key Type in TypeScript

Subscription Code Incrementally Triggering Upon Each Component Load

Error: The function $compile does not exist

TS1055 occurs when utilizing async/await with a custom type alias

Why am I encountering an issue while trying to access req.user.id?

Angular - Loading images on the fly

Is there a way for me to implement a "view more posts" button on

Guide to Injecting Services with Dependencies in Angular 2 (Using Ionic 2/Angular 2/Typescript)

The parameter type cannot be assigned to an array type of 'IAulasAdicionais[]'

Guide to executing various datasets as parameters for test cases in Cypress using Typescript

`The utilization of a collective interface/data type within an Angular application`

Tips for modifying the type definition of a third-party library in a Vue project built with Create-Vue

Delivering static HTML routes in a React App using Typescript

Array of colors for Wordcloud in Angular Highcharts

Generate a blueprint for a TypeScript interface

Is it possible that React.createElement does not accept objects as valid react children?

Node's TypeScript parser loses the order of same name-tags when converting XML to JSON

What are the methods to determine the cause of ESLint's slow performance?

Can I exclusively utilize named exports in a NextJS project?