Feel the benefits of generics in TS

Recently, I have been using TS to develop React applications. At first, I was confused about the <> in React applications. Later, I realized that they are generics. Today we are going to talk about the use of generics in TS.

This is the 10th day of my participation in the August Text Challenge.More challenges in August

What are generics

First, it’s important to understand what generics are.

Generics are to Types, what Types are to Variables

Generics are to types what types are to variables.

Types are used to describe the details of the data that variables represent, whereas generics are used to represent the details of types.

If it feels a little abstract, think about it

A simple example of generics

Let’s start with a simple example:

function receiveAndPrint(arg){
    console.log(arg)
    return arg;
}
// This code is added to ts by default, as follows:
function receiveAndPrint(arg:any) :any{
    console.log(arg)
    return arg;
}
Copy the code

The above function takes an argument, prints it, and returns it. The argument and return value are always of type any, so you don’t experience the benefits of ts type checking. We can use generics to describe our types

function receiveAndPrint<T> (arg:T) :T{
    console.log(arg)
    return arg;
}
/ / call
receiveAndPrint<number>(123);
receiveAndPrint<string>("123");
Copy the code

Nothing seems to have changed, as we have not accessed the contents of the arg parameter corresponding to the generic T:

// Property 'length' does not exist on type 'T'.
function receiveAndPrintLen<T> (arg:T) :T{
    console.log(arg.length)
    return arg;
}
// We also need to add constraints to the generic T, which we describe using interfaces

interface lengthwise {
    length:number
}
function receiveAndPrintLen<T extends lengthwise> (arg:T) :T{
    console.log(arg.length)
    return arg;
}

// We can also declare multiple type parameters
function get<T.K extends keyof T> (p: T, key: K) :any {
    return p[key]
}
Copy the code

Ok, we can see that generics are very interesting and useful.

Other places where generics are used

Use generics in interfaces

In addition to functions, we can also use generics in types and interfaces:

interface ChangeRecord<ValueType> {
    oldValue: ValueType;
    newValue: ValueType;
}
function isChanged<ValueType> (change: ChangeRecord<ValueType>){
    returnchange.oldValue ! == change.newValue; }// Define a new type based on the interface definition above

// Record temperature change
type ChangeInTemperature = ChangeRecord<number>;
// Let's make sure that the shirt is eastern
type ChangeWearTShirt = ChangeRecord<boolean>;
Copy the code

Sometimes we want to define a type that may be empty:

type MaybeNull<ValueType> = ValueType|null;

const myGender:MaybeNull<boolean> = null;
const herGender:MaybeNull<boolean> = 1;//1 represent male
Copy the code

Interfaces are abstract things, so to speak, and generics can make interfaces even more abstract.

A generic class

We can also use generics in our classes to make them more generic.

class GenericNumber<T> { 
    zeroValue: T; 
    add: (x: T, y: T) = > T; 
} 
let myGenericNumber = new GenericNumber<number>(); 
myGenericNumber.zeroValue = 0; 
myGenericNumber.add = function(x, y) {
    return x + y; 
};
Copy the code