Talk about the difference between unknown and any in TypeScript in detail

Directory Preface 1. unknown vs any 2. Mental Models of unknown and any 3. Summary Summarize

Preface

We know that variables of type any can be assigned any value.

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

The TypeScript guide does not encourage any, because using it discards type restrictions-and the need for type restrictions is one of the reasons we chose TypeScript, so it's just the opposite.

TypeScript (version 3.0 and above) also provides a special type of unknown similar to any. We can also assign any value to an unknown type variable:

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

Now there is a question. What is the difference between any and unknown?

1. unknown vs any

To better understand the difference between unknown and any, let's start by writing a function that you want to call with only one argument.

We set the only 1 parameter of invokeAnything () to any type

function invokeAnything(callback: any) {
  callback();
}

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

Because the callback parameter is of any type, the statement callback () does not trigger a type error. We can do anything with variables of type any.

But the run throws a runtime error: TypeError: callback is not a function. 1 is a number and cannot be called as a function. TypeScript does not protect the code from this error

What about allowing the invokeAnything () function to accept arguments of any type and forcing a type check on that argument to prevent the above error reporting?

Please welcome Brother unknown to control the field.

Like any 1, the unknown variable accepts any value. However, TypeScript forces type checking when you try to use an unknown variable. This is what we want.

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

invokeAnything(1);

Because the type of the callback parameter is unknown, the statement callback () has one type error: Object is of type 'unknown'. Contrary to any, TypeScript protects us from calling things that may not be functions.

Before using a variable of type unknown, you need to check the type. In this example, we only need to check whether callback is a function type.

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

invokeAnything(1);

2. Mental Models of unknown and any

To be honest, when I study, it is difficult for me to understand unknown. How does it differ from any, because both types accept any value
Here are some rules to help me understand the difference:

You can assign anything to an unknown type, but you cannot operate on an unknown until you have type checking or type assertion You can assign anything to the any type, and you can do anything with the any type

The above example illustrates the similarities and differences between unknown and ` any.

unknown example:

function invokeAnything(callback: unknown) {
  //  You can assign anything to  `unknown`  Type, 
  //  However, before type checking or type assertion, you cannot set the  `unknown`  Perform an operation 
  if (typeof callback === 'function') {
    callback();
  }
}

invokeAnything(1); // You can assign anything to `unknown` type

Type check typeof callback = = = 'function', check whether callback is a function, if so, it can be called.

any sample:

function invokeAnything(callback: any) {
  //  Can be right  `any`  Type to perform any action 
  callback();
}

invokeAnything(1); //  You can assign anything to `any` Type 

If callback is any, TypeScript does not force any type checking for the callback () statement.

3. Summary

unknown and any are two special types that can hold any value.

unknown is recommended over any because it provides more secure types--if you want to operate on unknown, you must use type assertions or narrow down to a specific type.

~ ~ Finish, I am Xiao Zhi, female ticket in the teaching and training industry work, recently paid a little low salary, I am going to work in the sea more, earn more money.

bug that may exist in editing can't be known in real time. In order to solve these bug afterwards, it took a lot of time to debug log. By the way, I recommend an easy-to-use BUG monitoring tool Fundebug.

Original: dmitripvlutin. com/typescript-…

Summarize