function execute<T>(operation1: (input: T) => void, operation2: (input: { key: string }) => T): void {}
execute((params) => {}, () => 23); // The params here can be correctly inferred as number
execute((params) => {}, (arg) => 23); // Why is the params here inferred to be unknown?
I wish for the input parameters to always be automatically recognized with the correct type
One common limitation of TypeScript is its inability to always infer generic type arguments and the contextual type of an expression simultaneously, especially when there is potential for circular dependencies between them in syntax. TypeScript's inference algorithm does not utilize full unification, resulting in instances where it may fail to infer as expected. To address this, you can either annotate callback parameters or manually specify generic type arguments.
For instance, consider the following function signature:
function run<U>(func1: (arg: U) => void, func2: (arg: { a: string }) => U): void {}
When calling this function with:
run((params) => {}, () => 23);
the inference works correctly because 'U' can be inferred from the return type of '() => 23,' which is not context-sensitive. On the other hand, calling it with:
run((params) => {}, (arg) => 23);
does not behave as desired due to the context-sensitivity of '(arg) => 23.' In such cases, TypeScript defers evaluation, leading to inference failure and fallback to 'unknown.'
The aforementioned issue has sparked discussions within the TypeScript community, with improvements being made in recent versions. For example, TypeScript 4.7 introduced enhanced function inference for objects and methods, facilitating better type inference in certain scenarios.
By rearranging function parameters, you can leverage this improved inference mechanism to achieve the desired results:
function run2<U>(
func2: (arg: { a: string }) => U,
func1: (arg: U) => void
): void { }
run2(() => 23, (params) => { });
run2((arg) => 23, (params) => { });
This approach enables inference flow from left-to-right, addressing some of the challenges faced in inference scenarios. Ultimately, how you proceed depends on your specific use case and constraints.
After following the instructions in this guide for setting up VS2015, I encountered issues when trying to run the "quick start" project or the "tour of heroes" tutorial on Google Chrome. The error message I received can be found here: Angular_QuickStart_Er ...
For my project, I have utilized NextJs, Tailwind, React, and Typescript. It is all set and ready to be hosted. After using "output: export" in next.config.js and running npm run build, the process was successful. However, when viewing my website locally, I ...
Utilizing Angular CLI and Angular Material, I have created a form to input new hashtags. I am facing difficulty in displaying previously added hashtags in the input field. Below is the code I have written: form.component.html <form [formGroup]="crea ...
I'm facing an issue with accessing a variable object within my main object. I am able to access 'start', 'end', and 'category' without any problem, but I am unsure how to access the variable Object in my Angular web app d ...
Currently working on a project with Next.js and Typescript. In order to create a layout component, I defined the following interface: export interface AuxProps { children: React.ReactNode; pageTitle: 'string'; } The layout component code sn ...
Currently, I am in the process of creating a personalized version of CKEditor5. By following the guidelines provided in the official documentation, I successfully obtained ckeditor.js. My goal now is to produce a typescript file (ckeditor.ts or ckeditor.d ...
I'm having trouble displaying the property of an associative object array in my code. I attempted to utilize a v-for loop and wanted to showcase the property information within the td elements of a tbody. I am aware that v-data-table components have a ...
How can I display a tsx component on a new tab and pass props into the new page? Essentially, I'm looking for the equivalent of this Flutter code: Navigator.push( context, MaterialPageRoute(builder: (context) => Page({title: example, desc: ...
I'm testing whether the navigate function will immediately alter the router URL upon execution. this.router.navigate(['/home/products']); if (this.router.url.includes('/home/products')) console.log('URL has been changed&apos ...
Working on an Angular 4 project, I recently installed two external JS libraries using npm. They are now in the node_modules folder and usable in another TS file within my project. The issue arises because import B requires import A, preventing me from effe ...
I recently created a unique wrapper component: import Box, { BoxProps } from "@mui/material/Box"; type CustomWrapperProps = { id: string } & BoxProps const CustomWrapper = (props: CustomWrapperProps) => { const {id, children, ...rest ...
Hello everyone! I recently started working with Next.js and TypeScript. Currently, I'm attempting to use the map() function on data fetched from JsonPlaceholder API. Here is my implementation for getStaticProps: export const getStaticProps: GetStatic ...
Is there a way to extract values from an array as specific types in TypeScript? const chars = ['a','b','c'] as const type TChars = typeof chars[number] // 'a'| 'b' | 'c' I want to achieve the sa ...
I have a simple Angular 6 app with follow and unfollow buttons. When you click follow, the number increases. I want to save these follower numbers to a JSON server. Here is the link to the JSON server documentation: JSON Server Documentation To see a dem ...
There is a Base generic class: abstract class BaseClass<T> { abstract itemArray: Array<T>; static getName(): string { throw new Error(`BaseClass - 'getName' was not overridden!`); } internalLogic() {} } and its inherito ...
The recent modification in Next.js (v11.0.x) has introduced new type definitions: For next-env.d.ts (regenerated at every build and not modifiable): /// <reference types="next" /> /// <reference types="next/types/global" /> ...
Question: VSC triggers compilation even without any file changes in Angular(6) project ng serve It's frustrating when Visual Studio Code starts compiling repeatedly, even when no changes have been made. How can I prevent this from happening? I&apos ...
When working inside a .forEach loop, I am encountering an issue with narrowing down a type (the last statement in the snippet below). Within that loop, TypeScript interprets that obj is either of type ObjA | ObjB (since TypeScript created a union of all p ...
Here's an example of a Yup schema I created to fetch entities known as Parcels: export const FindParcelsParamsSchema = Yup.object({ cursor: Yup.number().optional(), pageSize: Yup.number().positive().integer().optional(), }); All fields are option ...
I'm encountering some issues with Typescript and the "@botstan/Magic" library in nodejs. Before we proceed, please take a look at the "Magic" documentation. Follow these lines: import Magic from "@botstan/magic"; import * as _ from "lodash"; @ ...