When I encounter this issue, U is defined as a number and should be returning the number as well.
The error message reads: Type 'number' is not assignable to type 'U'.
function foo<T extends string, U extends number>(a: T): U {
return +a; // The error occurs in this line
}
foo<string, number>('12')
In my opinion, it is beneficial to utilize overloading in this scenario:
type UnsafeNumber = number & { tag?: 'UnsafeNumber' }
type ParseInt<Str extends string> =
Str extends `${infer Digit extends number}`
? Digit
: UnsafeNumber
function foo<T extends string>(a: T): ParseInt<T>
function foo<T extends string>(a: T) {
return +a;
}
type Result = ParseInt<'.2'>
const _ = foo('42') // 42
const __ = foo('4.2') // 4.2
const ___ = foo('s03') // UnsafeNumber
Since TypeScript does not differentiate between number and NaN, I introduced the concept of UnsafeNumber to represent the latter. However, this approach might still pose risks, so using the parseInt function is recommended.
ParseInt Custom Type
Starting from TS 4.8, TypeScript can infer literal numbers from their string representations. Refer to the official documentation for further details. This means that when you input "42", TS will recognize it as a numeric value. If you input a regular string, the condition will evaluate to false, resulting in the return of an UnsafeType.
UnsafeType simply denotes a standard number with branding for distinction purposes. This ensures TypeScript can differentiate between a typical number and an UnsafeNumber, representing cases where digit inference from strings may lead to NaN.
If you are interested in type inference and validation, feel free to read my article on number inference or dive into guidelines for inferring function arguments. You can also check out this insightful answer on Stack Overflow.
To properly convert the return value type, utilize the as keyword.
function convert<X extends string, Y extends number>(input: X): Y {
return +input as Y;
}
convert<string, number>('12')
When using typescript 4.7.2, I encountered an issue where the following code fails only when assigning a value: type IndexableByString = { [k: string]: any }; function test<T extends IndexableByString>(target: T, key: string) { var prop = target ...
When working on a project using TypeScript (tsx) for React, I encountered an issue with uploading images to the server using aws-sdk to communicate with Amazon S3. To resolve this, I made sure to install aws-sdk via npm and typings. UploadFile.tsx import ...
Does anyone have a working solution for creating a Material dropdown wrapper (mat-select dropdown) that can be used with formControlName? If so, could you please share a Stackblitz demo of your implementation? Here are the requirements: Should work seam ...
I am currently experiencing the following effect: initCompaniesAndSetCompanyEffect$: Observable<Action> = createEffect( (): Observable<Action> => this.actions$.pipe( ofType<changeCompanyActions.InitCompaniesAction>( ...
I am attempting to create a new npm package that exports all @material-ui/core components with my own theme. I am currently using TypeScript and Rollup, but encountering difficulties. Here is the code I have: index.ts export { Button } from '@materia ...
In my attempt to construct a specialized Map-like class that maps keys of one type to keys of another, I encountered a challenge. A straightforward approach would be to create a Map<keyof A, keyof B>, but this method does not verify if the member typ ...
I currently have a Pixi canvas that utilizes pointer handlers. Users are able to click on a point within a 'sequence' and move it. Recently, I came across an issue with the mouse handlers having stale state. To resolve this, I began recreating t ...
Transpilation is the act of converting code from one language to another with a similar level of abstraction. Can you point out some distinctive characteristics that indicate TypeScript transpires into JavaScript? ...
Below are buttons with router-links. However, I only want the calculator button to open a modal. When I execute the code provided, all buttons trigger the modal instead of just the calculator button. Output: https://i.sstatic.net/layQ1.png Router-link C ...
Having successfully developed an application using SAPUI5 1.108, I encountered a setback when attempting to deploy it to a system running SAPUI5 version 1.71. The older version lacks certain features, causing the application to fail. In order to address th ...
As a beginner in typescript and redux, I am currently working on migrating my project to redux. Originally written in typescript with react context api, here is a brief overview of my code: exerciseActions.ts export function getExercises() { return asy ...
My approach to date selection involves using 3 mat-select components for day, month, and year. You can view a demo of this setup here. In an attempt to improve the code, I decided to set the initial options as null by modifying the following lines: allDat ...
[Updated on 16th July 2019] I'm feeling perplexed at the moment. I am diving into a .NET Core 3.x Web Application and my aim is to incorporate: jQuery TypeScript I've managed to get TypeScript up and running, but I'm facing an issue where ...
class Bar { #one #two #three #four #five #six #seven #eight #nine #ten #eleven #twelve #thirteen #fourteen #fifteen #sixteen constructor( one, two, three, four, five, six, seven, eight, ...
Can someone help me with defining the types for next js Context and req? Below is the code for the getServerSideProps function- //Server side functions export const getServerSideProps: GetServerSideProps = async (context) => { await getMovies(conte ...
I have a basic autoloader method that initializes and returns an instance of a class using require() The require statement includes some logic that requests information from a database and checks if the class exists in the filesystem. let elementClass = r ...
I'm puzzled as to why the type guard is not working in the example provided below... Considering the following interfaces: interface ParamA { name: 'A'; aaa: boolean; } interface ParamB { name: 'B'; bbb: number; ...
I've been creating a form structure that's functioning smoothly, but I've encountered an interesting issue with field validation in the validation part. While my Visual Code is pointing out that 'required2' in the phone constant n ...
I've been exploring unit testing in an Angular2 application and following the guidance provided by the Angular documentation. However, I've encountered a perplexing error that has stumped me. To experiment with testing, I've set up a simple ...
My goal is to automatically change the theme mode (light/dark) based on the user's device preference using addEventListener. However, I am facing an issue where the event is only triggered once. I am currently working with Ionic and Angular. Angular ...