根据其他对象数组的值动态分配 object 属性

Question

Okay so I know the title can be a bit confusing, so let me explain.

I have the following interfaces and an array of Items[] :

interface Items {
    step: number;
    keyName: string;
    value: string;
}

interface ReturnData {
    foo: string;
    bar: string;
    baz: string;
}

const items: Items[] = [
    { step: 1, keyName: 'foo', value: 'fooVal' },
    { step: 2, keyName: 'bar', value: 'barVal' },
    { step: 3, keyName: 'baz', value: 'bazVal' },
];

Now imagine I want function that accepts Items[] as a parameter, loops over the items , and for each item assigns a new property with a key of keyName and a value of value to a new object of type ReturnData , and then it finally returns that object as a promise.

For demonstration purposes I am using setInterval here, but the same would work with a for loop or other method.

const myFunc = (items: Items[]): Promise<ReturnData> => {
    let index = 0;
    let returnData: ReturnData = { foo: '', bar: '', baz: '' };

    return new Promise(resolve => {
        const interval = setInterval(() => {

            /*
                at index 0: items[index].keyName = 'foo' and items[index].value = 'fooVal'
                at index 1: items[index].keyName = 'bar' and items[index].value = 'barVal'
                at index 2: items[index].keyName = 'baz' and items[index].value = 'bazVal'
            */

            returnData[items[index].keyName] = items[index]?.value;

            if (items[index]?.step === items.length) {
                clearInterval(interval);
                resolve(returnData);
            }
            else {
                index += 1;
            }

        }, 250);
    })
}

(async () => {
    const myResult = await myFunc(items);
    console.log('myResult value is:', myResult);

    /* myResult value is: { foo: 'fooVal', bar: 'barVal', baz: 'bazVal' } */
})();

In plain javascript this function would run properly and return myResult as expected. But in Typescript I am getting the following error messages when I try to dynamically assign properties to returnData at each iteration of my setInterval .

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ReturnData'.
  No index signature with a parameter of type 'string' was found on type 'ReturnData'.ts(7053)

and

Object is possibly 'undefined'.ts(2532)

I have recently started learning Typescript, so my question is, how do I make Typescript understand what is happening here so that it doesn't throw the an error. I know a quick and dirty trick is to assign type any to my returnData object to get rid of the errors, but that wouldn't be exactly "type-safe" if that is the correct terminology. What is a better way to go about and make typescript happy?

Full code example at TS Playground

Answer 1

Updating this line should solve your issue:

Issue is that typescript can not associate they keyName of string type as being a key of ReturnData.

interface Items {
    step: number;
    keyName: keyof ReturnData; // only if you expect that ReturnData keyName will always belong to ReturnData 
    value: string;
}

typescript or

 returnData[(items[index]!.keyName) as keyof ReturnData] = items[index]?.value ?? '';

Typescript playground

Answer 2

Just change your interface like this, using keyof operator.

interface Items {
    step: number;
    keyName: keyof ReturnData;
    value: string;
}

keyName is now: "foo" | "bar" | "baz"