How-to: Use dictionary in TypeScript

Here is the scenario, I want to create a function getLegsNumber that use this structure as dictionary

const mappingAnimalLegs = {
    'CAT' : 4,
    'DOG' : 4,
    'DUCK' : 2
}

If I write something like this

function getLegsNumber(animal) {
    return mappingAnimalLegs[animal] | 0
}

Typescript is not happy and tell us:


Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ CAT: number; DOG: number; DUCK: number; }'.(7053)


So... how I can solve this without adding too much noise ?

Here is my solution:

function getLegsNumber(animal: string): number {
  if (animal in mappingAnimalLegs) {
    return mappingAnimalLegs[animal as keyof typeof mappingAnimalLegs];
  }
  return 0
}

I can also simplify a bit more with

function getLegsNumber(animal: string): number {
    return mappingAnimalLegs[animal as keyof typeof mappingAnimalLegs] | 0
}

What do you think?

Typescript playground as reference

Comments

[Sylvain Dethier]

Well you almost get it ! I suggest to be more specific on the types, to prevent dumb errors and to get autocompletion:

// Dictionary with predefined typed keys
type Dictionary = Record<"CAT" | "DOG" | "DUCK", number>;

const mappingAnimalLegs: Dictionary = {
    'CAT' : 4,
    'DOG' : 4,
    'DUCK' : 2
};

function getLegsNumber(animal: keyof Dictionary): number {
    return mappingAnimalLegs[animal] | 0;
}

getLegsNumber("foo"); // <-- TS error
getLegsNumber("CAT");

See this TS Playground

The point is to NOT make type assertion by using the as keyword which is considered a bad practice, use it only when there's no other choice.

[Marco]

Thanks!!

I would like to avoid this

// Dictionary with predefined typed keys
type Dictionary = Record<"CAT" | "DOG" | "DUCK", number>;

I don't like the repetition, any suggestion?

--EDIT--
Using your idea, I can update the code to:
(note: I removed the |0 for now)

const mappingAnimalLegs = {
    'CAT' : 4,
    'DOG' : 4,
    'DUCK' : 2
}

function getLegsNumber(animal: keyof typeof mappingAnimalLegs): number {
    return mappingAnimalLegs[animal]
}

getLegsNumber('CAT')
getLegsNumber('foo')

Playground

[Sylvain Dethier]

Yes it's good. It's preferable to also type variables (const, let, - avoid var)

const mappingAnimalLegs: Record<string, number> = {
  // the map
}

The important point is the function parameter type animal: keyof typeof mappingAnimalLegs so that you get autocompletion & type error early
Also be careful, it might seems you've done a typo error: getLegsNamber --> getLegsNumber