Web Front-end
JS Tutorial
Let's talk about the difference between unknown and any in TypeScript
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
unknowntype, but no operations can be performed onunknownbefore doing a type check or type assertion. - Can assign anything to
anytype, you can also perform any operation on theanytype
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` typeType 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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1669
14
1428
52
1329
25
1273
29
1256
24
5 common JavaScript memory errors
Aug 25, 2022 am 10:27 AM
JavaScript does not provide any memory management operations. Instead, memory is managed by the JavaScript VM through a memory reclamation process called garbage collection.
How does Vue3+TypeScript+Vite use require to dynamically introduce static resources such as images?
May 16, 2023 pm 08:40 PM
Question: How to use require to dynamically introduce static resources such as images in a Vue3+TypeScript+Vite project! Description: When developing a project today (the project framework is Vue3+TypeScript+Vite), it is necessary to dynamically introduce static resources, that is, the src attribute value of the img tag is dynamically obtained. According to the past practice, it can be directly introduced by require. The following code: Write After uploading the code, a wavy line error is reported, and the error message is: the name "require" cannot be found. Need to install type definitions for node? Try npmi --save-dev@types/node. ts(2580) after running npmi--save-d
How to implement data type conversion function in TypeScript using MySQL
Jul 29, 2023 pm 02:17 PM
How to implement data type conversion function in TypeScript using MySQL Introduction: Data type conversion is a very common requirement when developing web applications. When processing data stored in a database, especially when using MySQL as the back-end database, we often need to convert the data in the query results to the type we require. This article will introduce how to use MySQL to implement data type conversion in TypeScript and provide code examples. 1. Preparation: Starting
Solve Ubuntu mounting mobile hard disk error: unknown file system type exfat
Jan 05, 2024 pm 01:18 PM
An error occurs when ubuntu mounts a mobile hard disk: mount: unknownfilesystemtype'exfat'. The processing method is as follows: Ubuntu13.10 or install exfat-fuse: sudoapt-getinstallexfat-fuseUbuntu13.04 or below sudoapt-add-repositoryppa:relan/exfatsudoapt-getupdatesudoapt-getinstallfuse- exfatCentOS Linux mount exfat format USB disk error solution to load extfa in CentOS
How to develop high-performance computing functions using Redis and TypeScript
Sep 20, 2023 am 11:21 AM
Overview of how to use Redis and TypeScript to develop high-performance computing functions: Redis is an open source in-memory data structure storage system with high performance and scalability. TypeScript is a superset of JavaScript that provides a type system and better development tool support. Combining Redis and TypeScript, we can develop efficient computing functions to process large data sets and make full use of Redis's memory storage and computing capabilities. This article will show you how to
How to use TypeScript in Vue3
May 13, 2023 pm 11:46 PM
How to declare a type with field name enum? By design, the type field should be an enumeration value and should not be set arbitrarily by the caller. The following is the enumeration declaration of Type, with a total of 6 fields. enumType{primary="primary",success="success",warning="warning",warn="warn",//warningaliasdanger="danger",info="info",}TypeSc
Changes in Vue3 compared to Vue2: Better TypeScript type inference
Jul 07, 2023 pm 01:05 PM
Changes in Vue3 compared to Vue2: Better TypeScript type inference Vue is a popular JavaScript framework for building user interfaces. Vue3 is the latest version of the Vue framework, with a lot of improvements and optimizations based on Vue2. One of them is improvements in TypeScript type inference. This article will introduce the improvements in type inference in Vue3 and illustrate them through code examples. In Vue2, we need to manually configure the Vue component
Develop scalable front-end applications using Redis and TypeScript
Aug 01, 2023 pm 09:21 PM
Title: Developing Scalable Front-End Applications Using Redis and TypeScript Introduction: In today’s Internet age, scalability is one of the key elements of any application. Front-end applications are no exception. In order to meet the growing needs of users, we need to use efficient and reliable technology to build scalable front-end applications. In this article, we will introduce how to use Redis and TypeScript to develop scalable front-end applications and demonstrate its application through code examples. Introduction to Redis
