Introduction to the use of TS generics in functions, interfaces and classes

One 、 What are generics ？ What's the role

There are two ways to solve this problem when we define a variable uncertainty type ：

1、 Use any
Use any Problems in definition ： although With Know the type of the incoming value but cannot get the type of the return value of the function ; And also lost ts Advantages of type protection
2、 Use generics
Generics refer to defining functions / Interface / Type , Do not specify specific types in advance , It is a feature that specifies type restrictions when using .
 

Two 、 Use

1、 Using generics in functions

function echo<T>(arg:T):T{
    return arg
}
const result=echo(true)


function swap<T,U>(arg:[T,U]):[U,T]{
    return [arg[1],arg[0]]
}

const result2=swap(['string',123])
result2[1].charAt(0)

2、 Using generics in classes

Example 1

class Animal<T> {
 name:T;
 constructor(name: T){
  this.name = name;
 }
 action<T>(say:T) {
   console.log(say)
 }
}
let cat = new Animal('cat');
cat.action('mimi')

Example 2 

class Queue<T>{
    private data:T[]=[];
    push(item:T){
       return this.data.push(item)
    }
    pop(){
        return this.data.shift()
    }
}
const queue=new Queue<number>()
queue.push(1)
console.log(queue.pop()?.toFixed())

const queue2=new Queue<string>()
queue2.push('12')
console.log(queue2.pop()?.length)

3、 Generics are used in interfaces   

interface KeyPair<T,U>{
    key:T,
    value:U
}
let kp1:KeyPair<number,string>={key:1,value:'string'}
let kp2:KeyPair<string,number>={key:'abc',value:12}
let arrTow:Array<number>=[1,2,4]

4、 Constraint generics

interface IWithLength{
    length:number
}

function echoWidthLength<T extends IWithLength>(arg:T):T{
    console.log(arg.length)
    return arg
}
// In this way, the sub parameter can only be passed with length Attribute 
const str=echoWidthLength('str')
const obj=echoWidthLength({length:10,width:10})
const arr=echoWidthLength([1,2,3])