The data type 'unknown' cannot be directly converted to a 'number' type in TypeScript

Question

The data type 'unknown' cannot be directly converted to a 'number' type in TypeScript

After developing a type for my click handle functions that should return a value with the same type as its parameter, I encountered the following code:

type OnClickHandle = <T extends unknown = undefined>(p: T extends infer U ? U : T) =>
        T extends infer U ? 
        U extends number ? number :
        U extends string ? string :
        U extends undefined ? void :
        void :
        void

Subsequently, I attempted to define my function as such:

const handleReceive: OnClickHandle = (p: number) => p;
//ERROR: Type '(p: number) => number' is not assignable to type 'OnClickHandle'.
  Types of parameters 'p' and 'p' are incompatible.
    Type 'T extends infer U ? U : T' is not assignable to type 'number'.
      Type 'unknown' is not assignable to type 'number'.
        Type 'unknown' is not assignable to type 'number'.ts(2322）
        
handleReceive(0);

Encountering the error message 'unknown' is not assignable to type 'number' left me feeling frustrated. Any suggestions on how to resolve this issue are greatly appreciated!

javascript typescript

Answer 1

Answer №1

Summary: I recommend utilizing the following approach

type OnClickHandle<T> = (p: T) => T;
const handleReceive: OnClickHandle<number> = (p: number) => p;

Straightforward and effective.

Issues found in your code:

Attempting to assign a concrete type lambda to a generic function

There are 2 types of generics in TypeScript:

Generic Types
Generic functions

You cannot assign a lambda with a concrete type to a generic function

type OnClickHandleGenericFunction = <T>(p: T) => T;
const handleReceiveGenFun1: OnClickHandleGenericFunction = (p: number) => p; //ERROR: number not assignable to T

It is unlikely that you would want to write a handler that handles any type of event in the same way, in that case, you can assign a generic function to a generic function type.

const handleReceiveGenFun: OnClickHandleGenericFunction = <T extends any>(p: T) => p;

Usage of unknown

The error message you received indicates that you cannot assign p to unknown. This is to be expected. Refer to unknown

Complex type inference

You introduced an inferred type U without justification.

T extends infer U ?
    U extends number ? number : void

This can be simplified to

T extends number ? number : void

Answer 2

Summary: I recommend utilizing the following approach

type OnClickHandle<T> = (p: T) => T;
const handleReceive: OnClickHandle<number> = (p: number) => p;

Straightforward and effective.

Issues found in your code:

Attempting to assign a concrete type lambda to a generic function

There are 2 types of generics in TypeScript:

Generic Types
Generic functions

You cannot assign a lambda with a concrete type to a generic function

type OnClickHandleGenericFunction = <T>(p: T) => T;
const handleReceiveGenFun1: OnClickHandleGenericFunction = (p: number) => p; //ERROR: number not assignable to T

It is unlikely that you would want to write a handler that handles any type of event in the same way, in that case, you can assign a generic function to a generic function type.

const handleReceiveGenFun: OnClickHandleGenericFunction = <T extends any>(p: T) => p;

Usage of unknown

The error message you received indicates that you cannot assign p to unknown. This is to be expected. Refer to unknown

Complex type inference

You introduced an inferred type U without justification.

T extends infer U ?
    U extends number ? number : void

This can be simplified to

T extends number ? number : void

Answer 3

Answer №2

type Testing<T> = (input: T) => T;

This represents a standard function type where the type is determined by the declaration.

You can apply it in the following way:

const test:Testing<number> = (param: number) => param;

Alternatively, you have the following syntax:

type Testing = <T>(input: T) => T;

This denotes a generic function type where the type is determined by the parameters. Here's an example of usage:

const test:Testing = (param) => param;
test(3) // the type is inferred in this instance

Therefore, if you are not altering the type declaration, your implementation should resemble this:

const handleEvent:OnClickHandle = (param) => param; // refrain from specifying the type here as it should be generic
handleEvent(3);

Answer 4

type Testing<T> = (input: T) => T;

This represents a standard function type where the type is determined by the declaration.

You can apply it in the following way:

const test:Testing<number> = (param: number) => param;

Alternatively, you have the following syntax:

type Testing = <T>(input: T) => T;

This denotes a generic function type where the type is determined by the parameters. Here's an example of usage:

const test:Testing = (param) => param;
test(3) // the type is inferred in this instance

Therefore, if you are not altering the type declaration, your implementation should resemble this:

const handleEvent:OnClickHandle = (param) => param; // refrain from specifying the type here as it should be generic
handleEvent(3);

The data type 'unknown' cannot be directly converted to a 'number' type in TypeScript

Answer №1

Answer №2

Similar questions

A step-by-step guide on how to use the Google Closure Compiler: a

I'm encountering difficulties utilizing ternary operators in TypeScript

Retrieve a JSON array using an HTTP Get request in JavaScript (with jQuery)

What is the best way to save the properties of elements in an array of objects within another array?

Refreshing HTML Form upon Submit using JavaScript

Efficient jQuery Algorithm for Calculating Image Viewport Sizes Without Scrollbars

Executing an external function on an element as soon as it is created in AngularJS: tips and tricks

Incorporating a fixed header title when creating a customizable table

Several dropdowns causing issues with jQuery and Bootstrap functionality

Creating a custom navigation bar that elegantly fades away with a smooth animation as you scroll down the page is a must-have

Interactive particles in three.js PointCloud

Exploring multiple states within an interval function in React Native

Guide on adding a new member to Mailchimp through node.js and express

Jest encountering errors when compiling a generic function

HTML: keeping script for future use in a variable

What is the best way to access a nested promise element in Protractor?

Exploring Angular modules has shed light on a certain behavior that has left me puzzled - specifically, when diving into JavaScript code that includes the

Event that occurs when modifying a user's Firebase Authentication details

What is the purpose of using Array.prototype.slice.call(nodeList) for handling DOM elements?

How can non-numeric characters be eliminated while allowing points, commas, and the dollar sign?