function broken<T>(value: T) {
type Test = keyof T extends keyof T ? 1 : 0
}
Is there a reason why Test in the given example cannot be immediately resolved as 1? I'm seeking clarification from the compiler to help me understand this.
Interestingly, there is a solution:
function workaround<T>(value: T) {
type Test = [keyof T] extends [keyof T] ? 1 : 0
}
Visit the Playground here
The answer to this inquiry may revolve around a corrective measure implemented in TypeScript 3.3. The articulation of the revised approach for evaluating conditional types is as follows:
When handling a conditional type
T extends U ? X : Y, the decision-making process for deferring resolution of a conditional type adheres to the following algorithm:
- If
Tis not assignable toU(taking all related type parameters ofTandUinto account), we resolve toY(indicating thatTindeed cannot be assigned toU),- If
Tis assignable toU(considering all unrelated type parameters ofTandU), we settle onX(signifying thatTcan be unequivocally assigned toU),- If neither condition is met, we postpone resolution.
Hence, it appears that keyof T extends keyof T ? 1 : 0 gets deferred because keyof T1 cannot be assigned to keyof T2 if T1 and T2 are disparate types. While this deferral isn't inherently incorrect, it does seem like a limitation.
In fact, by conducting a test using TS 3.2.1 (link here), your code resolves eagerly, indicating that this was an alteration introduced with TS3.3.
An intriguing aspect is that the bug fix's algorithmic description seems applicable to your workaround as well. It remains unclear why [keyof T] extends [keyof T] would alter anything since [keyof T1] isn't definitively assignable to [keyof T2]</code when <code>T1 and T2 are unrelated. There still lies some enigma here; unfortunately, I haven't been able to unravel it yet, so I might just concede defeat at this point. Oh well!
Additionally, there has been a specific instance reported where X extends X ? 1 : 0 doesn't resolve promptly (and encasing it in a one-tuple seemingly "resolves" the issue). This concern was classified as a bug, hinting at a potential future resolution.
Hopefully, this information proves beneficial to you; best of luck!
After reviewing the resources provided below on impure and pure pipes in Angular applications: What is impure pipe in Angular? I have been curious about inspecting the instances created by an Angular application firsthand, although I am uncertain if thi ...
I'm looking to streamline my button handling in JavaScript by creating just one function that can handle all the buttons on my page. Each button will trigger a different action, so I need a way to differentiate between them. I thought of using one eve ...
I've been encountering issues while setting up ts-node with mocha, as the test script consistently fails. I attempted to run the following commands: mocha --require ts-node/register --extensions ts,tsx --watch --watch-files src 'src/**/*.spec.{ ...
current version of vue is 2.7.13 Although it supports jsx, I encounter a type error when using onClick event handling. The type '(event: MouseEvent) => Promise<void>' cannot be assigned to type 'MouseEvent' Is there a correct ...
Is there a clever JavaScript technique to differentiate between Iterator and AsyncIterator without initiating the iteration process? I'm attempting to create a type checker like this: function isAsyncIterator<T>(i: Iterator<T> | AsyncIter ...
I am new to Angular and currently working on an Angular 5 application. I have a task that involves retrieving the next or previous item from a dictionary (model) for navigation purposes. After researching several articles, I have devised the following solu ...
As someone who typically develops in Java, I am new to Node.js and trying to create a REST service that pulls data from Firebase and returns it as a JSON object. I've been grappling with the concept of "promises" and although I grasp the idea behind ...
I created a MobX store as shown below. I defined the types of actions in store.js import { action, observable } from 'mobx'; export class SignStore { @observable UserInformation: { email: ''; password: ''; ...
I am trying to display the outcome of this.contract.mint(amount, {value: this.state.tokenPrice.mul(amount)}) after awaiting it. I want to see the result. async mintTokens(amount: number): Promise<void> { try { let showRes = await this.c ...
Struggling to make sense of this dilemma, I find myself unable to crack the code. The data retrieved from my API is structured in the following format: "data": [ { "sr_count": 91, "month_name": "October", "month_num": 10, ...
Exploring the possibilities of using Stamen maps with ngx-leaflet has piqued my interest. For those interested, more information on integrating leaftlet can be found here. However, the process of integrating it with ngx-leaflet remains a bit unclear to m ...
Is there a better way to prevent multiple submissions of a login form using the switchMap operator? I've attempted to utilize subjects without success. Below is my current code. import { Subject } from 'rxjs'; import { Component, Output } ...
I encountered an error while trying to load an HTML file in the JavaScript console of the Brave browser. The error message reads: require.js:5 Uncaught Error: Module name "constants.js" has not been loaded yet for context: _. Use require([]) https://requir ...
I encountered an unusual error: Unhandled error in GET /managers: 500 Error: ER_BAD_FIELD_ERROR: Unknown column 'role_id' in 'field list' at Query.Sequence._packetToError (/Users/xxxx/node_modules/mysql/lib/protocol/se ...
, While experimenting with JavaScript splice methods, I encountered an issue where it was not removing elements from an array as expected. Currently, it only deletes the last element from the array even when providing a specific index to delete. The conso ...
I am searching for a solution to incorporate a custom pipe into my class. The custom pipe itself ( referenced from this source, many thanks ) involves injecting a dependency (the DomSanitizationService). import { Pipe, Inject, Injectable } from '@ang ...
As I delve into writing TypeScript for my Angular project, one burning question arises — should I use an Interface or a Class to create my domain objects? My quest is to uncover solid data regarding the actual implications of opting for the Class route. ...
I'm looking to turn off this Typescript warning, as I'm developing scripts that might include return values outside of a function body: https://i.stack.imgur.com/beEyl.png For a better example, check out my github gist The compiled script will ...
I initiated a fresh project using create-next-app with the default settings. npx <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="365544535742531b58534e421b57464676070518021801">[email protected]</a> --- Would you l ...
Looking at a sub-component example: import React from 'react'; interface TodoListProps { items: { id: string; text: string }[]; buttonHandler: (todoId: string) => void; } const TodoList: React.FC<TodoListProps> = (props) => { ...