How to declare types for empty object array with typescript?

Question

Say the array is const items = [{category:'cat1', name:'name1'},{category:'cat2', name:'name2'}].

I want to construct the above array to become an object format like the following:

{
  'cat1':'name1',
  'cat2':'name2'
}

Without typescript, I can do the following to solve the problem:

const parseFunction = (items) => {
 const newObj = {};
 for (const item of items) {
   newObj[item.category] = newObj[item.name];
 }
 return newObj;
}

However with typescript below:

interface IItems{
 category: string,
 name: string
}

interface INewObj{
 'cat1': string,
 'cat2': string
}

const parseFunction = (items: IItems[]) => {
 const newObj = {} as INewObj;
 for (const item of items) {
   newObj[item.category] = newObj[item.name];
 }
 return newObj;
}

The line newObj[item.category] = newObj[item.name] throws the following TS error

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

How should I fix this?

Carlo Corradini · Accepted Answer · 2020-09-24 13:50:08Z

Does this solution can suit your needs?

Use Record<Keys, Type> to map the unknown keys and values.

Typescript code

const items: IItems[] = [{ category: 'cat1', name: 'name1' }, { category: 'cat2', name: 'name2' }];

interface IItems {
    category: string,
    name: string
}

type NewObjType = Record<string, string>;

const parseFunction = (items: IItems[]): NewObj => {
    const newObj: NewObjType = {};

    for (const item of items) {
        newObj[item.category] = item.name;
    }

    return newObj;
}

console.log(parseFunction(items));

Javascript Snippet

"use strict";
const items = [{ category: 'cat1', name: 'name1' }, { category: 'cat2', name: 'name2' }];
const parseFunction = (items) => {
    const newObj = {};
    for (const item of items) {
        newObj[item.category] = item.name;
    }
    return newObj;
};
console.log(parseFunction(items));

PS: You made a little mistake here newObj[item.category] = newObj[item.name] since the value does not already exists in the newObj variable. I have changed to the correct assignment as follow: newObj[item.category] = item.name

jlouzado · Accepted Answer · 2020-09-24 13:48:29Z

1

In practice I'm guessing you wouldn't really know that the categories were cat1, cat2 etc, all you'd know is that they would be strings. Therefore the definition of INewObj needs to be a little more permissive.

type INewObj = {
  [key: string]: string
}

Which can be further shortened to Record<string, string>.

Playground link

You could go further and eliminate INewObj entirely by allowing Typescript to infer it for you:

Playground 2

answered Sep 24, 2020 at 13:48

jlouzado

5021 gold badge4 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to declare types for empty object array with typescript?

2 Answers 2

Does this solution can suit your needs?

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Does this solution can suit your needs?

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related