Thread by @ScalerTopics

Complete TypeScript Guide | Generic Types

Your guide to migrating from JavaScript to TypeScript.

💙💙💙 (Part 3 of 3 Mega 🧵 on TS)

Missed part 2?

Here’s it is for those who missed or want to review 👇

https://twitter.com/ScalerTopics/status/1503664871422164992?s=20&t=0i2DivhDeLSFBketenLWYA

Type Compatibility

defines which type can be assigned to which type.

Different types which are incompatible cannot be assigned to each other.

See the following example:

If a type is a subset of another type, it can be assigned to it.

However, if a type is a superset of another type, it can't be assigned to it ↓

Object Type Compatibility

TypeScript is a structurally-typed language which means types are based only on their members.

So, if two object types have the same members then they are equivalent ↓

Function type compatibility

When assigning one function to another, TypeScript checks that the function parameter types and the return type are compatible.

The parameter names aren’t important, it is only the types of parameters and number of parameters that are checked ↓

Generic Types
Generic type allows us to create a specific type by allowing us to pass types into it as parameters.

For example, you can create an array of numbers, strings, booleans depending on the type you passed in <>.

Let's first discuss some in-built generic types.

Array<ItemType>: to create arrays that contain a certain type of elements.

Promise<ReturnType>: Specify the return type of asynchronous code.

Readonly<Type>: The Readonly type simply adds the readonly keyword to each of the object properties that are passed into it.

Partial<Type>: The Partial type makes all the members of the type
passed into it optional.

Record<KeyType, ValueType>: The Record type allows a
key-value object type to be created.

Generic Types become quite powerful when used with functions and interfaces.
Let's discuss how to create generic types in the following tweets.

Creating Generic Functions

Consider the following function in the image.

It takes an array and returns its first member, if the array is empty it returns null.

What if we want the same function to work with any other array types like int?

We can use the "any" type for it but then we won't have any knowledge of the return type.

Also, we can't keep adding types to a union.

The solution here is to create a generic function.

A Generic Function can take different types of parameters.

We define the type parameters for a generic function in angle brackets before the function’s parentheses.

The type parameters are placeholders for the real types.
We can choose any names we want for these.

Creating Generic Interfaces

We can similarly create a generic interface by passing types into an interface that are used within its definition.

A common use case for a generic interface is a generic form interface.

This is because all forms have values but the specific fields differ from form to form.

Creating generic classes

We can also create generic classes.
The following image shows the syntax and an example ↓

That completes our final thread on the TypeScript guide.

If you have any doubts or questions, drop them below. We'll be happy to answer.

Follow @ScalerTopics for more such threads, tips, and tons of articles on all things Computer Science.

#TypeScript