How to type nested objects - Typescript

Question

I have a probem with typing this line of code initialState[a][b].

I got this error:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ food: { pizza: boolean; chicken: boolean; }; transport: { bus: boolean; car: boolean; }; }'

function testTypescript(a: string, b: string) {
    const initialState = {
        food: {
            pizza: false,
            chicken: false,
        },
        transport: {
            bus: false,
            car: false,
        },
    };
    const newData = !initialState[a][b]; // How can I type this line?
    const newState = { ...initialState, [a]: newData };
    return newState;
}

Your state object has properties with defined keys, so you can’t use any string as an object’s key. — Parzh
– Parzh, Commented Nov 29, 2022 at 19:19

Yury Tarabanko · Accepted Answer · 2022-11-29 18:31:28Z

2

You can use some generics. Play

type State = {
  food: {
    pizza: boolean;
    chicken: boolean;
  };

  transport: {
    bus: boolean;
    car: boolean;
  }
}

function testTypescript<T extends keyof State>(a: T, b: keyof State[T]) {
    const initialState: State = {
        food: {
            pizza: false,
            chicken: false,
        },
        transport: {
            bus: false,
            car: false,
        },
    };
    const newData = !initialState[a][b]; // How can I type this line?
    const newState = { ...initialState, [a]: newData };
    return newState;
}

// @ts-expect-error
testTypescript('notThere', 'value')

// @ts-expect-error
testTypescript('food', 'rice')

testTypescript('transport', 'bus')

answered Nov 29, 2022 at 18:31

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

OTMANƏ EL · Accepted Answer · 2022-11-29 18:25:16Z

1

function testTypescript(a: string, b: string) {
    const initialState: { [a: string]: { [b: string]: boolean; } } = {
        food: {
            pizza: false,
            chicken: false,
        },
        transport: {
            bus: false,
            car: false,
        },
    };
    const newData: boolean = !initialState[a][b];
    const newState = { ...initialState, [a]: { [b]: newData } };
    return newState;
}

answered Nov 29, 2022 at 18:25

OTMANƏ EL

516 bronze badges

Comments

serg Ks · Accepted Answer · 2022-11-29 19:14:23Z

0

Any nesting

type initial = {
  [key: string] :  any;
}

function testTypescript(a: string, b: string) {
    const initialState : initial = {
        food: {
            pizza: false,
            chicken: false,
        },
        transport: {
            bus: false,
            car: false,
        },
    };
    const newData = !initialState[a][b]; // How can I type this line?
    const newState = { ...initialState, [a]: newData };
    return newState;
}

edited Nov 29, 2022 at 19:14

answered Nov 29, 2022 at 19:10

serg Ks

112 bronze badges

Collectives™ on Stack Overflow

How to type nested objects - Typescript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related