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 type any can be assigned to any value.

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

TypeScript The guide does not encourage the use of any, 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 type unknown similar to any. We can also assign any value to the 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 first Start by writing a function whose only argument you want to call.

We set the only 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 , so the statement callback() will not trigger a type error. We can do anything with variables of type any.

But running will throw 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 to avoid this error.

That not only allows the invokeAnything() 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?

Please unknown Big Brother to control the field.

Like any, unknown variables accept any value. But TypeScript enforces type checking when trying to use unknown variables. Isn't this 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 a 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 perform type checking. 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, when I was learning, it was difficult for me to understand unknown. How is it different from any because both types accept any value

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

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

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 checktypeof callback === 'function', check whether 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 callback() statement to perform any type checking.

3. Summary

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

It is recommended to use unknown instead of any because it provides a safer type - if you want to operate on unknown, 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!