Typescript from getting started to mastering (XX) function generics

The function of generic

Let's start by writing a simple union type demo
To ensure that the method is available Let's use the string template to splice these two parameters

function join(first:string|number,second:string|number){
    
    return `${
      first}${
      second}`
}
join(" ha-ha "," Ape ")

There is no problem with the code behind .
There is a new demand ：first This parameter is string Type , second For string type , On the contrary, the same is true .
It is difficult to realize by using the knowledge we have learned before , So this time we need Generic To solve this problem

Writing of function generics ：

Angle brackets <T>, In parentheses T Any letter or word can be replaced Write the name you want to write , But it's better to be semantic , Generally speaking, we write by convention T( Look professional )

function join<T>(first:T,second:T){
    
    return `${
      first}${
      second}`
}
join<string>(" ha-ha "," Ape ")

When we adjust the time join Function method , Use join< type >( Parameters )( for example ：join<string>(" ha-ha "," Ape ")) Fill in the corresponding type in angle brackets
If you want both parameters to be number So I could write it like this

join<number>(1,2）

Use of arrays in generics ：

If an array is passed , We have two ways to define

• Add after generics []
• Add before generics Array

// The first one is 
function Monkey<T>(one:T[]){
    
    return one
}
Monkey<string>([" ha-ha "," Ape "])

// The second kind 
function Monkey<T>(one:Array<T>){
    
    return one
}
Monkey<number>([1,2])
console.log(Monkey<number>([1,2]))
// Terminal output results :[ 1, 2 ]

Definition of multiple generics :

A function can define multiple generics

function join<T,P>(one:T,two:P){
    
    return `${
      one}${
      two}`
}
join<string,number>(" I am haha ape ",23)
console.log(join<string,number>(" I am haha ape ",23))

Type inference for generics :

function join<T,P>(one:T,two:P){
    
    return `${
      one}${
      two}`
}
join(" I am haha ape ",23)

In the above code, we are calling join Function method has no specified type , In fact, the program has inferred our type
Put the mouse on join(" I am haha ape ",23) On this line of code , You will find the mystery

Be careful ： We use type inference when using generics , It reduces the readability of the code . Using generics , It's best not to use type inference .