Let’s talk about the difference between unknown and any in TypeScript

This article will help you compare unknown and any in TypeScript, and talk about the differences between unknown and any. I hope it will be helpful to everyone!

We know that variables of typeanycan be assigned to any value.

let myVar: any = 0; myVar = '1'; myVar = false;

TypeScriptThe guide does not encourage the use ofany, because using it will lose type restrictions-and the need for type restrictions is also one of the reasons why we choose TypeScript, so It's just a bit contrary.

TypeScript(3.0 and above) also provides a special typeunknownsimilar toany. We can also assign any value to theunknowntype variable:

let myVar: unknown = 0; myVar = '1'; myVar = false;

Now there is a question, what is the difference betweenanyandunknown?

1. unknown vs any

To better understand the difference betweenunknownandany, let’s first Start by writing a function whose only argument you want to call.

We set the only parameter ofinvokeAnything()toanytype

function invokeAnything(callback: any) { callback(); } invokeAnything(1); // throws "TypeError: callback is not a function"

because thecallbackparameter is of any type , so the statementcallback()will not trigger a type error. We can do anything with variables of typeany.

But running will throw a runtime error:TypeError: callback is not a function.1is a number and cannot be called as a function. TypeScript does not protect the code to avoid this error.

That not only allows theinvokeAnything()function to accept any type of parameters, but also What should I do to force type checking on this parameter to prevent the above error?

PleaseunknownBig Brother to control the field.

Likeany,unknownvariables accept any value. But TypeScript enforces type checking when trying to useunknownvariables. Isn't this what we want?

function invokeAnything(callback: unknown) { callback(); // Object is of type 'unknown' } invokeAnything(1);

Because the type of thecallbackparameter isunknown, the statementcallback()has a type error:Object is of type 'unknown'. Contrary toany, TypeScript protects us from calling things that may not be functions.

Before using a variable of typeunknown, you need to perform type checking. In this example, we just need to check ifcallbackis a function type.

function invokeAnything(callback: unknown) { if (typeof callback === 'function') { callback(); } } invokeAnything(1);

2. The mental model of unknown and any

To be honest, when I was learning, it was difficult for me to understandunknown. How is it different fromanybecause both types accept any value

Here are the rules that helped me understand the difference between the two:

• can be Anything is assigned to theunknowntype, but no operations can be performed onunknownbefore doing a type check or type assertion.
• Can assign anything toanytype, you can also perform any operation on theanytype

The above example just illustrates the similarities and differences betweenunknownand `any .

unknownExample:

function invokeAnything(callback: unknown) { // 可以将任何东西赋给 `unknown` 类型， // 但在进行类型检查或类型断言之前，不能对 `unknown` 进行操作 if (typeof callback === 'function') { callback(); } } invokeAnything(1); // You can assign anything to `unknown` type

Type checktypeof callback === 'function', check whethercallbackis a function , if so, it can be called.

anyExample:

function invokeAnything(callback: any) { // 可以对 `any` 类型执行任何操作 callback(); } invokeAnything(1); // 可以把任何东西分配给`any`类型

Ifcallbackisany, TypeScript will not forcecallback()statement to perform any type checking.

3. Summary

unknownandanyare 2 special types that can accommodate any value.

It is recommended to useunknowninstead ofanybecause it provides a safer type - if you want to operate onunknown, you must use Type assertion or narrowing to a specific type.

For more programming related knowledge, please visit:Programming Video! !

The above is the detailed content of Let’s talk about the difference between unknown and any in TypeScript. For more information, please follow other related articles on the PHP Chinese website!