The concept and basic use of TypeScript generics

What are TypeScript generics?

• When defining functions, interfaces, and classes, the data types used cannot be determined in advance, but the data types that can only be determined when these functions, interfaces, and classes are used;

1. A single generic parameter

For example, by using any, the type of value1 changes with the incoming type data:

function myfunction01(value1: any, value2: number): any[]{
    
    
	let arr: any[] = [value1, value2]
	return arr
}
myfunction01('123456', 111);
myfunction01(123456, 111);

After changing to generic:

function myfunction01<T>(value1: T, value2: T): T[]{
    
    
	// let arr: T[] = [value1, value2]
	let arr: Array<T> = [value1, value2]
	return arr
}
myfunction01<string>('123456', '1111');
myfunction01<number>(123456, 111);

2. Multiple generic parameters

function myfunction01<T, X>(value1: T, value2: X): [T, X]{
    
    
	return [value1, value2]
}
myfunction01<string, number>('123456', 1111);

3. Generic interface

Generic interface: Interface can also be used with generics to increase its flexibility and enhance its reusability

interface 接口名<类型变量1,类型变量2> {
    
    
  变量:类型变量1,
  变量:类型变量2
}

use:

interface MyArray<T> {
    
    
    length: T,
    data:string[]
    push(n: T): T,
    pop(): void,
    reverse(): T[]
}
const obj: MyArray<number> = {
    
    
  length: 11,
  push (o){
    
     return o },
  pop: function () {
    
    },
  reverse: () => [1, 2],
  data: ['1', '1']
}

1. Add <type variable> after the interface name, then this interface becomes a generic interface.
2. The type variable of the interface is visible to all other members of the interface, that is, all members of the interface can use the type variable.
3. When using a generic interface, you need to explicitly specify the concrete type.

4. Generic tool type

Generic tool types: TS has built-in some commonly used tool types to simplify some common operations in TS

Explanation: They are all implemented based on generics (generics are applicable to multiple types and are more general), and they are built-in and can be used directly in the code. There are many types of these tools, let’s learn the following three first:

① Partial

Make all properties in an object type optional;

type User = {
    
    
	id: number;name: string;age: number;
}
type UpdatedPerson = Partial<User>;

The resulting UpdatedPerson type is identical to the following type definition:

type UpdatedPerson = {
    
    
	id?: number;name?: string;age?: number;
}

② Readonly

Set all properties of Type to readonly (read-only).

type Props =  {
    
    
  id: string
  children: number[]
}
type ReadonlyProps = Readonly<Props>

The constructed new type ReadonlyProps has the same structure as Props, but all properties become read-only. Unchangeable

③ Pick

Pick<Type, Keys> Picks a set of properties from Type to construct a new type.

type Props = {
    
    
  id: string
  title: string
  children: number[]
}
type PickProps = Pick<Props, 'id' | 'title'>

1. The Pick tool type has two type parameters: 1 indicates whose attribute is selected; 2 indicates which attributes are selected. 2. For the second type variable, if only one is selected, only the attribute name can be passed in.
2. The attributes passed in by the second type variable can only be the attributes that exist in the first type variable.
3. The constructed new type PickProps has only two property types: id and title.