Typescript - The type is lacking certain properties from another type, despite having all options defined

Question

Typescript - The type is lacking certain properties from another type, despite having all options defined

I have defined the following TypeScript declarations:

type TDisplayKey = "a" | "b" | "c";

const DISPLAY_KEYS: Record<string, TDisplayKey> = {
  A: "a",
  B: "b",
  C: "c"
};

const DISPLAY_KEY_TITLES: Record<TDisplayKey, string> = {
  [DISPLAY_KEYS.A]: "Ay",
  [DISPLAY_KEYS.B]: "Bi",
  [DISPLAY_KEYS.C]: "Ci"
};

An error is appearing on DISPLAY_KEY_TITLES in my VSCode editor:

Type '{ [x: string]: string; }' is missing the following properties from type 'Record<TDisplayKey, string>': a, b, c

Even though I have clearly defined all three properties. What could be causing this issue?

typescript

Answer 1

Answer №1

The issue lies within the DISPLAY_KEYS property. It is defined with a type of "a" | "b" | "c", which prevents TypeScript from enforcing strict rules on computed properties.

To make the DISPLAY_KEYS more precise, you can manually specify the type as follows:

const DISPLAY_KEYS: {
    A: "a";
    B: "b";
    C: "c";
} = {
  A: "a",
  B: "b",
  C: "c"
}

This approach involves a lot of repetition. Alternatively, you can use

DISPLAY_KEYS = { /*...*/ } as const

(coming soon in 3.4), or utilize a helper function to assist TypeScript in inferring the type:

type TDisplayKey = "a" | "b" | "c";

const DISPLAY_KEYS = (<T extends Record<string, TDisplayKey>>(o:T)=>o)({
    A: "a",
    B: "b",
    C: "c"
});

const DISPLAY_KEY_TITLES: Record<TDisplayKey, string> = {
    [DISPLAY_KEYS.A]: "Ay",
    [DISPLAY_KEYS.B]: "Bi",
    [DISPLAY_KEYS.C]: "Ci"
};

Answer 2

The issue lies within the DISPLAY_KEYS property. It is defined with a type of "a" | "b" | "c", which prevents TypeScript from enforcing strict rules on computed properties.

To make the DISPLAY_KEYS more precise, you can manually specify the type as follows:

const DISPLAY_KEYS: {
    A: "a";
    B: "b";
    C: "c";
} = {
  A: "a",
  B: "b",
  C: "c"
}

This approach involves a lot of repetition. Alternatively, you can use

DISPLAY_KEYS = { /*...*/ } as const

(coming soon in 3.4), or utilize a helper function to assist TypeScript in inferring the type:

type TDisplayKey = "a" | "b" | "c";

const DISPLAY_KEYS = (<T extends Record<string, TDisplayKey>>(o:T)=>o)({
    A: "a",
    B: "b",
    C: "c"
});

const DISPLAY_KEY_TITLES: Record<TDisplayKey, string> = {
    [DISPLAY_KEYS.A]: "Ay",
    [DISPLAY_KEYS.B]: "Bi",
    [DISPLAY_KEYS.C]: "Ci"
};

Typescript - The type is lacking certain properties from another type, despite having all options defined

Answer №1

Similar questions

PlatypusTS: Embracing Inner Modules

The back button in the Chrome browser fails to trigger a page refresh within an Angular application

What is the best way to create a routerlink that is both single-clickable and double-clickable within an

The most efficient and hygienic method for retrieving a value based on an observable

What is the best way to test the validity of a form while also verifying email availability?

Do not display large numbers within an HTML card

Concealing a VueJs component on specific pages

Synchronizing Form Data in Angular 5: Pass and Populate Dropdowns between Components

Having trouble configuring Jest for TypeScript integration

Is it possible to define a namespaced external module in TypeScript?

What is the process of playing blob videos (avi, mov) in Angular14?

Arrangement of code: Utilizing a Node server and React project with a common set of

Set values to the inner property of the object

Build an Angular wrapper component for the phone textbox functionality

What is the correct way to close an ngx-contextmenu in an Angular application?

Tips for boosting ViteJs development mode performance

Using TypeScript to Return a Derived Class as a Method's Return Type

Next JS now includes the option to add the async attribute when generating a list of script files

Having trouble retrieving form values in Typescript React, only receiving HTML tag as output

Dealing with enum values in Jest tests when using Prisma can be tricky. The error message "Group[] not assignable to