What is the difference between unknown and any in TypeScript

This article was first published on the WeChat public account: Big Move to the World, my WeChat: qq449245884, I will share with you the front-end industry trends, learning methods, etc. as soon as possible.
For more open source works, please see GitHub https://github.com/qq449245884/xiaozhi , including the complete test sites, materials and my series of articles for interviews with first-tier manufacturers.

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

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

The TypeScript guidelines discourage the use of any because using it you lose type constraints -- and the need for type constraints is also one of the reasons we chose TypeScript, so it's a bit of a departure.

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

 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 wants to call its only argument.

We set the only parameter of invokeAnything() any to be of type ---e2c4950f5d7c6ec23df43df71f7b1c13---

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

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

Since 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 running it 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

That not only allows the invokeAnything() function to accept any type of parameter, but also enforces the type check of the parameter to prevent the above error, what should I do?

Please unknown big brother to control the field.

Like any , the unknown variable accepts any value. But when trying to use the unknown variable, TypeScript enforces type checking. Isn't that what we want.

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

invokeAnything(1);

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

Before using a variable of type unknown , you need to do a type check. In this example, we just need to check if callback is 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, I had a hard time understanding unknown when I was studying. How is it different from any as both types accept any value

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

• Anything can be assigned to type unknown , but unknown cannot be operated on until type checking or type assertion
• You can assign anything to the type any any

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

unknown Example:

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

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

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

any Example:

 function invokeAnything(callback: any) {
  // 可以对 `any` 类型执行任何操作
  callback();
}

invokeAnything(1); // 可以把任何东西分配给`any`类型

If callback is any , TypeScript will not force the callback() statement to do any type checking.

3. Summary

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

unknown is recommended instead of any as it provides a safer type -- if you want to operate on unknown you must use type assertions or narrow down to a specific type.

~~ Finished, I am Xiao Zhi, and I work in the education and training industry. The salary paid is a bit low recently. I am going to work in the sea a lot to earn more money.

---

The bugs that may exist in editing cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, here is a useful BUG monitoring tool , Fundebug .

Author: Ashish Lahoti Translator: Front-end Xiaozhi Source: dmitripavlutin

Original: https://dmitripvlutin.com/typescript-unknown-vs-any/

comminicate

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.