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

Aliases for NPM packages and TypeScript declaration files

Redis is prepared and awaiting authorization for authentication. ReplyError: NOAUTH Authentication needed

Developing a foundational Repository class in TypeORM

Looking to retrieve the AssetLoadedFunc properties in the LoadAssets function? Wondering if you should use TypeScript or JavaScript

When working with Typescript, an error is thrown if property "p" does not exist on one of the classes that are OR

The condition in a Typescript function that checks for strings will never evaluate to true

Modifying the value of an observable in a component does not automatically activate the subscribe function in a service

Encountering an issue with accessing a property in Angular's TypeScript module

Angular HTTP post is failing on the first attempt but succeeds on the second try

Express encounters difficulty in processing Chunked Post Data

What is the best way to retrieve a value from an array?

Tips for enhancing the TypeScript definition of Material UI 3 theme by integrating the Material UI pickers theme

React and MaterialUI Chrome Extension - Data did not populate in the table

Creating a Robust Next.js Build with Tailor-Made Server (Nest.js)

How to bring in a specific module using its name in TypeScript

The successful operation of 'Ionic serve --lab' may involve the need to manually save the app.module

Expanding a given type using Typescript

Does having an excessive amount of variable declarations result in a noticeable decline in performance?

Angular reactive forms are experiencing a setback where the value of '[value]' is not being properly set for controls

What is the best way to integrate Sass into a Create-React-App project that is using TypeScript