Refining a category

Question

Refining a category

I'm attempting to create an implementation that meets the requirements of a type, but in a more specific way than that type.

type A = 'number' | 'string'

type B = {
    [prop: string]: (
        input: { [key: string]: A },
    ) => number
}

const test: B = {
    prop: (input: { a: string, b: string }) => 0
}

This results in the error:

Type '{ [key: string]: A; }' is missing properties 'a' and 'b' from type '{ a: string; b: string; }'

Although I believe it should work because { a: string, b: string } fits the requirements of { [key: string]: A; }.

Is there a way for me to accomplish this?

typescript

Answer 1

Answer №1

When looking at your example, it becomes clear that the code cannot compile due to the mismatch between a: string, b: string and the initial type { [key: string]: A }.

Angular lacks the ability to infer that a is a string instead of a number unless explicitly specified (using a cast).

A better approach would be to modify the code and employ a template for defining the values within input.

For instance :

playground

type B<T extends {
    [key: string]: unknown;
} = any> = {
    prop: (
        input: { 
            [key in keyof T]: T[key];
        },
    ) => number;
}

type C = {
    a: string;
    b: string;   
};

const test: B<C> = {
    prop: (input) => {

        return 0;
    },
};

Answer 2

When looking at your example, it becomes clear that the code cannot compile due to the mismatch between a: string, b: string and the initial type { [key: string]: A }.

Angular lacks the ability to infer that a is a string instead of a number unless explicitly specified (using a cast).

A better approach would be to modify the code and employ a template for defining the values within input.

For instance :

playground

type B<T extends {
    [key: string]: unknown;
} = any> = {
    prop: (
        input: { 
            [key in keyof T]: T[key];
        },
    ) => number;
}

type C = {
    a: string;
    b: string;   
};

const test: B<C> = {
    prop: (input) => {

        return 0;
    },
};

Refining a category

Answer №1

Similar questions

How to detect a click event in any area of an Angular2

Utilizing interpolation for a CSS class defined in an external file within Angular 2

Can someone explain how to create a Function type in Typescript that enforces specific parameters?

Unveiling the secrets of the Google Region Lookup API

Properly transform a set of conditions from If statements to R.cond

Developing a TypeScript Library from Scratch

Incorporating a picture backdrop into a button element in a React Typescript component

Only one argument is accepted by the constructor of NGRX data EntityServicesBase

Error detected in Ionic socket.io chat page

Extending the declaration of JavaScript native methods is not possible when using TypeScript

Implementing global variable sharing across components in Vue 3 using TypeScript while maintaining scope cleanliness: types, classes, and helper functions

What is the method for utilizing enum values as options for a variable's available values?

Angular 2: Encounter with 504 Error (Gateway Timeout)

Error Message: ElectronJS - Attempted to access the 'join' property of an undefined variable

Determine the general type of a different type

Referring to a component type causes a cycle of dependencies

Simulating a continuous key press on the keyboard for 5 seconds with TestCafe

Adding conditional props to a style object in @emotion/react with Typescript is as simple as utilizing a ternary operator

When a class decorator is returned as a higher-order function, it is unable to access static values

Dynamically update multilayer markers on X-map using angular-maps