How to declare the type of this variable within map() Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to declare the type of this variable within map() without wasting too much if your time.

The question is published on by Tutorial Guruji team.

Here is the function in question:

  const getCountryLangCode = (countryCode: string) => {
    const filtered = Object.entries(config.languages)
      .map(([key, language]) => {
        if (language.code.split('-')[1] === countryCode) {
          return language.code
      .filter(item => item)
    const langCode = filtered[0]
    return langCode

The problem is that ‘language’ within the map() function is type = unknown, and when I try to build my React app it is failing to build due to this type Object is of type 'unknown'. TS2571

I’ve tried every version of the typing syntax that I can think of to feed ‘any’ type to ‘language’ but I’m doing it wrong.

What’s the proper way to declare that language should be type == any ?


Declare Types Higher-Up

You always want to declare the type higher-up in the chain when you can. You are asking to “declare the type of this variable within map()” but you want to declare the type of the config variable. Having a proper type on the config.languages object will allow Typescript to infer the types of Object.entries, .map(), and .filter() on its own.

config is an object with a property languages. That languages property is an object where each value is an object with a property code which is a string. We use the Typescript type Record<Keys, Values> when we have an object where all values are the same type.

interface MyConfig {
  languages: Record<string, {code: string}>

Writing the Function

There may be other properties that you want to include to help out other functions, but that’s all we need to know here.

As pointed out by @Andreas, .map() is not the ideal function here. If you wanted to find all matches you would use .filter() directly on the entries. Since you only want to first you should use .find(). You don’t look at the key at all so you can use Object.values instead of Object.entries.

const match = Object.values(config.languages).find(
  language => language.code.split('-')[1] === countryCode
return match?.code;

If config has type MyConfig then the variable languages in the find() callback will automatically get the type { code: string } because Typescript knows the value type of the config.languages object.

We use the optional chaining ?. because find is not guaranteed to find a match, so match might be undefined. Our function returns string | undefined.

Typescript Playground Link

We are here to answer your question about How to declare the type of this variable within map() - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji