The debate between TypeScript default generic types and contextual typing

Contextual Typing in TypeScript is an interesting feature where the correct type is inferred from the return value when a generic type is not specified.

While it usually works well, there are instances where it can be unpredictable. For example, in some cases, if a function parameter is undefined, the default generic type may not be used as expected.

👇 Check out this TypeScript Playground link

type State = { count: number } 

declare function simple<T = State>(second?: T): T;
const { count: countA } = simple() 
// in 4.0+ => countA: number
// in 3.9 => countA: any;

declare function complex<M, T = State>(first: M, second?: T): T;
const { count: countB } = complex(1)
// countB: any;

I'm curious to know if this behavior in TypeScript is a bug or if there's a specific priority in determining which type to infer, whether it's the return type or the generic default type.

typescripttypescript-generics

Answer â„–1

Could this be a potential issue with TypeScript, or is there some sort of hierarchy used to determine which type to infer from, the return type or the generic default type?

It appears to me like a TypeScript bug related to destructuring assignment. In my understanding, const {b} = fn(); should essentially mean either 

const tmp = fn(); const {b} = tmp
or const b = fn().b. The reason behind why it would disrupt the inferred types by writing it as const {b} = fn() eludes me completely.

type State = { count: number } 
declare function complex<M, T = State>(first: M, second?: T): T;
const { count: countB } = complex(1) // FAILS
const state = complex(2); // works!
const {count: countC} = state;
const countD = complex(3).count; // works!
let tmp;
const { count: countE } = tmp = complex(4); // works!

playground

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

What are the best practices for transpiling code using Parcel-bundler?

Currently, I am attempting to transpile both .ts (TYPESCRIPT) and .scss (SASS) files. However, I am encountering two main issues: 1) Instead of generating my file in the designated dist directory, it is creating a dist directory within the build folder. ...

typescriptsassparceljs

Visual Studio 2015 does not support compiling typescript files

I'm encountering some difficulties while attempting to set up node with typescript support in Visual Studio 2015 for my web API application. To start fresh, I deleted the node_module folder along with the package.json and tsconfig.json files. Followi ...

typescript

Next.js 13: Dealing with the "Objects are not valid as a React child" error while using async/await to retrieve data

Currently, I am working on a project using Next.js 13 and the new app directory structure. One of my tasks involves fetching data from an API. However, every time I attempt to do this with async/await, I encounter an error message stating: "Objects are not ...

node.jstypescriptnext.jsgraphql

Merge two observables together to create a single observable that emits values from both sources. Only one observable will emit values

I am looking to combine two observables of type T[] obtained from httpservice. I have tried using forkJoin and zip, but they both return an Observable of type [T[], T[]]. However, I want to receive an object of type T[] as shown in the following code snip ...

angulartypescriptrxjsangular7

Experiencing a useContext error when implementing MDX with NextJS 13

I am currently working on integrating mdx files into Next.js 13. After completing all necessary configurations in next.config and creating the file structure, I have the following path within the app folder: > docs > components > accordion > pa ...

reactjstypescriptnext.jsmdxjs

Is it possible to define a unique function signature in a child class when implementing a method from a parent class?

In the process of developing a repository module that includes generic methods, I have found that as long as each derived class has the `tableName` configured, the basic query for creating, finding, or deleting records remains consistent across all child c ...

typescripttypescript-typings

The method of evaluating in-line is distinct from evaluating outside of the

What causes the compiler to produce different results for these two mapped types? type NonNullableObj1<O> = {[Key in keyof O] : O[Key] extends null ? never : O[Key]} type NotNull<T> = T extends null ? never : T; type NonNullableObj2<T> = ...

typescriptmapped-types

Is there a RxJS equivalent of tap that disregards notification type?

Typically, a tap pipe is used for side effects like logging. In this scenario, the goal is simply to set the isLoading property to false. However, it's important that this action occurs regardless of whether the notification type is next or error. Thi ...

javascriptangulartypescriptrxjs

Opt for Observable over Promise in your applications

I have implemented this function in one of my servlets: private setValues() { this.config.socket.on('config.weather', (values:any) => { console.log(values); } However, I would like to refactor it to something like this: private se ...

javascripttypescript

Improved method for linking two enums with similar appearances

Currently, I use two enums as shown: enum Tab { Approved = "Approved", Pending = "Pending", Sold = "Sold", } enum ProductStatus { Approved = "Approved", Pending = "Pending", Sold = "Sold&q ...

reactjstypescript

TypeScript: empty JSON response

I am encountering an issue with the JSON data being blank in the code below. The class is defined as follows: export class Account { public amount: string; public name: string; constructor(amount: string, name: string) { this.amount = amount; t ...

typescript

Angular 2: A guide to resetting dropdown and text values when changing radio button selections

When the user interface displays two radio buttons - one for YES and one for NO - and the user clicks on YES, a dropdown is shown. Conversely, if the user clicks on NO, a textbox is displayed. How can I clear the values in the dropdown and textbox when s ...

htmlcssangulartypescript

The issue of Angular 9 not recognizing methods within Materialize CSS modals

I am currently working on an Angular 9 application and have integrated the materialize-css 1.0 library to incorporate a modal within my project. Everything works smoothly in terms of opening and instantiating the modal. However, I have encountered an issue ...

angulartypescriptmaterialize

Definition of a Typescript Global.d.ts module for a function that is nested within another function

Simply put, I have a npm module that exports a function along with another function attached to it: // @mycompany/module ... const someTool = (options) => { // do some cool stuff }; someTool.canUseFeature1 = () => { return canUseSomeFeature1(); ...

javascripttypescript.d.ts

Prohibit the use of explicit type parameters or limit the union type parameters to enhance the safety of the types

When the getValues() function is called without explicit type parameters, the Typescript code functions correctly. However, calling it with explicit type parameters can result in errors (as seen in invocation getValues<'a' | 'b' | &a ...

typescripttypescript-generics

Expanding IntelliSense and helpful tooltips in VSCode for JavaScript and TypeScript by utilizing Node.js for a deeper understanding

As a beginner in programming, specifically in JS/TS, I've been experimenting with node.js and have encountered a puzzling issue with the IntelliSense or 'helptext' feature in VSCode. For instance, when attempting to use fs.open(), I receive ...

javascriptnode.jstypescriptvisual-studio-code

What is the best way to refine React Component's props with Typescript?

My setup involves utilizing two specific components: Test and Subtest. The main functionality of the Test component is to provide visual enhancements and pass a portion of its props down to the Subtest component. Some props in the Subtest component are des ...

reactjstypescript

Ways to decrease the size of this item while maintaining its child components?

Here is an object that I am working with: { "name": "A", "children": [ { "name": "B", "open": false, "registry": true, "children": [ { ...

javascripttypescript

Having trouble importing zone.js in Angular 14 and Jest 28

I am currently in the process of updating to Angular 14. Everything is going smoothly except for setting up jest. Since I have Angular 14 libraries included in my build, I need to utilize jest-ESM support. Below is my configuration: package.json { &qu ...

javascriptangulartypescriptjestjs

Angular 8 HTTP Interceptor causing issues with subscriptions

I'm currently in the process of setting up an Angular 8 project that will allow me to mock API calls using HTTP INTERCEPTORS. My approach involves adding a --configuration=mock flag to my ng serve script so that the interceptor is injected into my app ...

angulartypescriptrxjs