World of Any and Unknown in Typescript
Tags: typescript, react, webdev, angular
Published: 2021-09-12 09:59:41

Apart from the primitive types i.e. `string`, `number`, `boolean` ,`null` and `undefined`, there are two special types in TypeScript : 

* Any 
* Unknown

Most of us are familiar with `any` type because that is the first thing we commonly use when we could not find a type or we feel lazy to write the type for a big and complex object. 

For those who are seeing this first time. Here is a short brief on `any`: 

##<u>Any</u>

If you want to avoid type checking and you do not want typescript to complain about it you can simply use `any` type. As the name suggests, `any` accepts all the types. It is also known as [`top type`](https://en.wikipedia.org/wiki/Top_type). 

> The `top type` is sometimes called also universal type, or universal supertype as all other types in the type system of interest are subtypes of it.

**Syntax**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhxrpbx7fg4u4rks8ig5.png) 

**Implications of assigning `any` type**

* You can assign anything to `any` typed variable.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20y7ei9le69pa5i73jul.png) 

* You can also assign `any` typed variable to other type of variables.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84mevsu2ksfsrnafim79.png) 
 
* You can assess the properties which do not exist on `any` typed variable.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygtelcp2o4hd3vackm45.png) 

* You can call `any` typed variable as function, even if it is not a function. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gd1xswcmahypf715nwj.png) 

**Word of wisdom**

> Use `any` type as last resort because it takes away all the power that is provided by typescript

---

##<u>Enter the world of unknown</u>


`unknown` type is first introduced in `Typescript 3.0`. It is also another `top type` in Typescript. As per official docs: 

> `unknown` is the `type-safe` counterpart of `any`

It is similar to `any` because it can accept all types of values. It enforces a bit more restriction than `any` because you cannot perform any action on `unknown` typed variable without type assertion or narrowing it to more specific type.

**Syntax**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qmd103i8l86455f2js3.png) 
 
**Implications of assigning `unknown` type**

* You can assign anything to `unknown` typed variable.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tdecqmxhesad1om5xdn.png) 

* `unknown` typed variable is only assignable to `unknown` or `any` type.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb13w5tmmb2qhi3adlx2.png) 

* You can not perform any operations without narrowing or type assertion.
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4un5yjtxuzvafav9tyfq.png)
 
* Only equality operators are allowed with `unknown`

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ul4ooy0pkl0xt8dchmzl.png)

* You cannot create rest from `unknown` type

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17dpwk80ewcxbxmx5xog.png)

* Union with `unknown` and other types produces `unknown` type with an exception of union with `any` which produces `any` type

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plhg83shjsr7oyl1vlv4.png)

* When taking Intersection with `unknown`, it is absorbed by other types.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvjdvs8kbntajudbgrmy.png)

**Perform operation on `unknown` type**

Before performing any operation on unknown type we need to narrow it down using `typeof` or `instanceof` operator. We can also use `type assertions` with `as` or we can provide a custom function which acts as type guard

**Using `typeof`**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e29dxhcb6zjzwr9xd06w.png)
 
**Using `instanceof`**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsfrn5jdf7m2dfzr1lr2.png)


**Using `type` assertion**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jbw4805iiygdgke6hln.png) 

##Example

**LocalStorage**  

Following is an example of saving data into `localStoarage`. As anything can be saved in `localStorage` that's why the type of `data` is `unknown`. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npy15orff6u6wtaqhzqo.png)
 
  
**Params to a http request** 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jwfzengsu98sl9a511x.png)

**Word of wisdom**

> Use `unknown` before trying to use `any` 

**References**

* [Official Docs](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#new-unknown-top-type)
 
* [2ality](https://2ality.com/2020/06/any-unknown-typescript.html#:~:text=any%20and%20unknown%20are%20so,the%20type%20system%20of%20interest.)