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;
}

CodePudding user response：

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')

CodePudding user response：

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;
}

CodePudding user response：

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;
}