Is it possible to deduce a more precise type from a dictionary in TypeScript? What steps can be taken to assist TypeScript

Question

Is it possible to deduce a more precise type from a dictionary in TypeScript? What steps can be taken to assist TypeScript

Behold the incredible code I have:

export type Locale = "en" | "fr";
export type Namespace = "products" | "home";

const dict = {
  en: {
    home: { title: "My Super Title" },
    products: { product: "Product" },
  },
  fr: {
    home: { title: "Mon Super Titre" },
    products: { product: "Produit" },
  },
};

export const getTranslation = (namespace: Namespace, locale: Locale) => {
  return dict[locale][namespace];
};

const t = await getTranslation("home", "en");
// Typescript infer of T 
// const t: {
//   title: string;
// } | {
//   product: string;
// } | {
//   title: string;
// } | {
//   product: string;
// }

I assumed TypeScript would correctly infer this, but unfortunately, that is not the case.

So my initial query is, why is TypeScript unable to infer this accurately?

Is there a way I can assist by manually typing getTranslation to ensure proper inference?

I was initially anticipating:

{
    title: string;
}

By the way, my TypeScript version is "^5"

Perhaps I am not utilizing the correct keyword to uncover the solution.

Nevertheless, I am firmly convinced that there exists a type solution to resolve my dilemma.

typescript types typescript-typings typescript-generics

Answer 1

Answer №1

To implement a more specific type inference in your function parameters, you can utilize generic type parameters.

Instead of explicitly mentioning the types of your function parameters as unions (Namespace and Locale), you can allow TypeScript to deduce a more precise type while still applying constraints to avoid unintended types:

export const getTranslation = <N extends Namespace, L extends Locale>(namespace: N, locale: L) => {
    return dict[locale][namespace];
};

const t = getTranslation("home", "en");
//    ^? { title: string; }

const t2 = getTranslation("products", "fr");
//    ^? { product: string; }

const t3 = getTranslation("unknown", "other"); // Error as expected: Argument of type '"unknown"' is not assignable to parameter of type 'Namespace'.
//                        ~~~~~~~~~

Playground Link

Answer 2

To implement a more specific type inference in your function parameters, you can utilize generic type parameters.

Instead of explicitly mentioning the types of your function parameters as unions (Namespace and Locale), you can allow TypeScript to deduce a more precise type while still applying constraints to avoid unintended types:

export const getTranslation = <N extends Namespace, L extends Locale>(namespace: N, locale: L) => {
    return dict[locale][namespace];
};

const t = getTranslation("home", "en");
//    ^? { title: string; }

const t2 = getTranslation("products", "fr");
//    ^? { product: string; }

const t3 = getTranslation("unknown", "other"); // Error as expected: Argument of type '"unknown"' is not assignable to parameter of type 'Namespace'.
//                        ~~~~~~~~~

Playground Link

Is it possible to deduce a more precise type from a dictionary in TypeScript? What steps can be taken to assist TypeScript

Answer №1

Similar questions

In the latest version of Angular, accessing document.getelementbyid consistently returns null

Displaying svg files conditionally in a react native application

Guide on importing a markdown file (.md) into a TypeScript project

Investigating the issue: Why is my React Typescript canvas image resizing component producing small, fuzzy images from high-quality, large images

A guide on determining the number of rows in an ag-grid with TypeScript and Protractor

Arrangement of items in Angular 2 array

The unique Angular type cannot be assigned to the NgIterable type

NextJS VSCode Typescript results in breakpoints becoming unbound

What is the best way to populate an Angular Bootstrap Table Widget with data obtained from an API request?

Exploring two main pages, each with tabs displaying two negative behaviors

Broaden the current category within the MUI Theme

Challenge when providing particular strings in Typescript

When I try to load JSON data using the http.get() method in my Angular 2 template, it returns

The activation of [routerLinkActive] triggers an error related to the data.split function

Utilizing the spread operator in Typescript to combine multiple Maps into a fresh Map leads to an instance of a clear Object

Ionic 2 faced an unresolved core-js dependency issue

Incorporate the pdfmake.js file into my TypeScript file

Leveraging IF conditions on part of the worksheet title

Inheritance-based generic type inference in Typescript

What's the reason behind the inconsistency of the exports field in typescript and npm?