TS2339: Property 'DisplayNames' does not exist on type 'typeof Intl'

Question

How can i fix that type error? TS2339: Property 'DisplayNames' does not exist on type 'typeof Intl'.

my function:

export const getLanguageName = (locale: string | null) => {
  const localeName = new Intl.DisplayNames([locale], { type: 'language' });
  return localeName.of(locale);
};

Answer 1

If you arrived here looking for an Angular solution, I think it's safe to just use target: "es2020" and update your library declarations in your tsconfig.base.ts (at the root level)

{
    "compilerOptions": {
            ...
            "target": "es2020",
            "lib": ["dom", "es2020"]
    }
}

That should give you access to the new Intl API types definitions removing the errors from your editor and also any possible compilation errors. A few years ago we could only use es2015 due to some issues with async/await and zone.js but this was addressed in 2021.

Answer 2

It's still missing in TypeScript for now

You can use declaration merging to make the types available in your code base, or you can make a TypeScript PR

---

Also, make sure the targeted browsers support this: https://caniuse.com/mdn-javascript_builtins_intl_displaynames_of

Or you might need a polyfill:

• If you want to include it in your bundle: https://formatjs.io/docs/polyfills/intl-displaynames/
• If you want to load it directly from a UA-sniffer CDN: https://polyfill.io/v3/polyfill.min.js?features=Intl.DisplayNames (see builder)