Error message encountered with 'keyof' while utilizing a generic type during compilation

Initially, I created a type definition map where all properties are converted into numbers using keyof.

type Numeric<T> = {
    [K in keyof T]: number
}

Next, here is the structure of a class that will be used:

class Entity {
    aNumber: number;
}

Following is a function that accepts a generic type argument and a local variable with the type Numeric<T>. However, when trying to assign { aNumber: 1 }, a compile error occurs.

const fn = <T extends Entity>() => {
    const n: Numeric<T> = {
//        ^
//        Type '{ aNumber: number; }' is not 
//        assignable to type 'Numeric<T>'
        aNumber: 1
    };
};

The confusion arises from the fact that { aNumber: number; } cannot be assigned to Numeric<T> even though the type argument T must extend from Entity and have a key named 

aNumber</code. This implies that <code>aNumber
should be the key of type T and therefore should be assignable to Numeric<T>.

typescript

Answer №1

Although the error message may seem misleading, TypeScript is actually catching an error. There isn't anything wrong with Entity:

type Numeric<T> = {
    [K in keyof T]: number
}
interface Entity {
    aNumber: number
}

// No error
const n: Numeric<Entity> = {
    aNumber: 1
};

However, when you specify T extends Entity, it allows for non-numeric values like:

type Numeric<T> = {
    [K in keyof T]: number
}
interface Entity {
    aNumber: number
}

// No error
const n: Numeric<Entity> = {
    aNumber: 1
};

interface X extends Entity {
    notANumber: string
}
// Error. Thanks to TypeScript
const o: Numeric<X> = {
    aNumber: 1
};

This explains why there's an error when using T extends Entity in Numeric.

Answer №2

When using the constraint <T extends Entity>, it is important to remember that this sets the minimum requirement for what T should contain. Essentially, it specifies that "T must have at least a pair of aNumber: number".

For example, when we define const n: T, it means that "n must contain all key-value pairs that are present in T at the very least".

However, even though we know that T includes a pair like aNumber: number, it's crucial to understand that this is just the minimum requirement. T could potentially be something like 

{ aNumber: number; aString: string }
. This is why defining const n: T = { aNumber: 42 } will also result in an error.

// For better understanding:
const n: { aNumber: number; aString: string } = { aNumber: 42 }  // error, as expected
// Highlighting the cause of the error:
const n: T = { aNumber: 42 }  // also results in an error

The exact nature of T remains unknown. However, utilizing keyof T is acceptable because we have knowledge of at least one key present in 

T</code.</p>

<pre><code>const k: keyof T = "aNumber"

To further illustrate this concept, let's consider a scenario without generics, such as in @basarat's code where X is not generic.

type Numeric<T> = {
    [K in keyof T]: number
}

type OptionalNumeric<T> = {
    [K in keyof T]?: number
}

interface Entity {
    aNumber: number
}

interface X extends Entity {
    notANumber: string
}

// Error due to missing `notANumber`
const o: Numeric<X> = { aNumber: 1 };
// Correct implementation
const o1: Numeric<X> = { aNumber: 1, notANumber: 2 };
// Also correct since all keys are optional.
const o2: OptionalNumeric<X> = { aNumber: 1 };

Furthermore, I want to address a potential bug within TypeScript regarding the usage of OptionalNumeric in your original context. While it should theoretically work, there seems to be a discrepancy when generic type parameters are involved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue: The use of destructuring props is required by eslint, and I'm currently working with a combination of react and types

I typically work with React in JavaScript, and I recently encountered an error message stating "Must use destructuring props at line 14" while trying to define a button for use in a form. Here is the code snippet in question: import React from 'react& ...

reactjstypescripteslinttypescript-eslinteslint-config-airbnb

Eliminate duplicate values in an array while preserving the original data in TypeScript

Two arrays are in my possession. The task at hand is to combine both arrays while ensuring that the resulting output contains all the records from arr1 and only unique records from arr2, with the "number" field being the key. I am seeking advice on the be ...

typescript

Managing state within SolidJS components using Immer's "produce" for nested state handling

I've been working on a SolidJS application where I store a large JSON object with nested objects. For undo and redo actions, I'm using Immer to generate patches. Although technically I'm storing a class with multiple layers of nesting, Immer ...

typescriptsolid-jsimmer.js

What is the best way to inject the Service into the Controller constructor using TypeScript?

I am developing a straightforward REST API using TypeScript that interacts with your classes to query a database in the following sequence: Controller > Service > Repository. While working on this, I experimented with the following code snippets: Co ...

typescriptapirestbackend

Creating a Utils class in Vue.js with seamless access to Vuex through this.$store

I have a situation where I need to retrieve state from the Vuex store using this.$store. After some research, I discovered that creating a custom plugin with an installed instance method might be the solution. Here is my plugin implementation: index.ts i ...

typescriptvue.jsvuex

Can this function be rewritten in a manner that does not involve returning undefined?

Using angular fire, I am fetching data from firestore based on the logged-in user. After ensuring that the user object has been retrieved, I have a command to monitor changes in the document. async fetchUserCards() { let _user: UserModel = await this.aut ...

angulartypescriptrxjs

Enhance your TypeScript arrays using custom object equality functions

I am looking to utilize array functions such as contains and unique, but I want them to compare equality using my custom equals function. For instance: let arr = [{id:1,..//some more},{id:2,..//some more},{id:3,..//some more}] I need the following code ...

javascriptarraystypescript

Creating dynamic routing functionality in Angular 8 allows for a more personalized and

I am struggling with setting up routing in Angular 8. Here is how I am trying to do it: 'company/:id/activity' 'company/:id/contacts' However, I am not receiving any params in the activatedRoute: this.activateRoute.params ...

javascriptangulartypescriptangular8

"Efficiently accessing NGRX Store data without the need

I am currently utilizing Angular with typescript and I am interested in retrieving a value from the NGRX store without needing to use a subscription. When I try the following code snippet: this.store.select(selectCardNickname) it returns an Observable tha ...

angulartypescriptngrxngrx-storengrx-selectors

Returning a 'never' type from a function in React using Typescript

Basically, I have a function that initiates the OAuth flow (redirecting to Google OAuth login page, for example): async function signIn() { // start OAuth flow } And let's say I want to use it in a useEffect hook like this: ... useEffect(() => { ...

reactjstypescripttypescript-never

Guide to exporting dynamic variables in TypeScript

I've been working on transitioning some Node JavaScript code to TypeScript. One of the files I'm dealing with is called keys.js let keys; try { // eslint-disable-next-line security/detect-non-literal-fs-filename keys = JSON.parse(fs.readFile ...

node.jstypescript

What are some ways to optimize the performance of a Select Box?

I am attempting to show a lengthy list of countries in an ion-select. Currently, there are 249 countries that I need to load. Unfortunately, the rendering performance is quite slow on my phone. <ion-list margin-top margin-bottom> <ion-item> ...

angulartypescriptionic2rxjsionic3

Should FormBuilder be utilized in the constructor or is it considered a poor practice?

section, you can find an example of implementation where declarations for formBuilder and services are done within the constructor(). While it is commonly known that using services inside the constructor() is not a recommended practice and should be done ...

javascriptangulartypescriptionic4

How can you keep TypeScript satisfied when extending classes that come from 'node modules'?

Update: Included ARTICLES_QUERY, tsconfig.json, and package.json as requested. Update 2: The current solution is functional, but it doesn't seem ideal. Any suggestions for improvement would be appreciated. export default class InterfaceGraphQLApi ex ...

typescriptgraphqlapollographql-jsapollo-server

Angular's implementation of nested interface definitions allows for a clear and

Within my interface, there is a member with a complex type structured like this: export interface Activity { id: string; name: string; segment: Segment; } export interface Segment { id: string; name: string; } Coming from a C# background where ...

angulartypescripttypesnested

Result of Mongodb aggregation operation

I've created a Property controller : //Retrieve Properties By Type const getPropertiesByType = async (req: Request, res: Response) => { const { cities, type } = req.query; const citiesArr = typeof cities === 'string' ? cities.spli ...

typescriptmongodbexpressmongoose

I am unable to utilize the Web Share API for sharing a file within my React app written in TypeScript

Trying to launch a WebApp for sharing files has been quite a challenge. After some thorough research, I stumbled upon the Web Share API which seemed like the perfect solution based on standard practices. The documentation provided a clear outline of how it ...

javascriptreactjstypescriptweb-share

Exploring the concept of SOCKET.IO with rx.js in an Angular application

I am currently working on an Angular (2) application and I need to ensure that the view is updated whenever there is a change in the data from the back end. getData() { return this.http.get("some url") .map(result => result.json()); } ...

javascriptangulartypescriptrxjsfrontend

Could it be possible for TypeScript inference to directly infer the value and omit the key in the process?

class A { state: B } class B { something: C } class C { a: string; b: boolean; } type MagicType = ... const c: MagicType<A> c.state.a = "123" c.state.b = true; Is it possible to achieve the mentioned functionality without altering the exi ...

typescriptclasstypesinference

Advanced Typescript contains a parameter that specifies the type of callback function

Is it possible to create a function that is more typesafe than the current implementation? public addBusinessRule(targetProperty: string, dependentProperties: string[], callback: (dep0: any, dep1: any, ...)): void { // s ...

typescript