El concepto y uso básico de los genéricos de TypeScript.

¿Qué son los genéricos de TypeScript?

• Al definir funciones, interfaces y clases, los tipos de datos utilizados no se pueden determinar de antemano, pero los tipos de datos que solo se pueden determinar cuando se utilizan estas funciones, interfaces y clases;

1. Un único parámetro genérico

Por ejemplo, al usar cualquiera, el tipo de valor1 cambia con los datos de tipo entrantes:

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

Después de cambiar a genérico:

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. Múltiples parámetros genéricos

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

3. Interfaz genérica

Interfaz genérica: la interfaz también se puede utilizar con genéricos para aumentar su flexibilidad y mejorar su reutilización.

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

usar:

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. Agregue <tipo variable> después del nombre de la interfaz, luego esta interfaz se convierte en una interfaz genérica.
2. La variable de tipo de la interfaz es visible para todos los demás miembros de la interfaz, es decir, todos los miembros de la interfaz pueden usar la variable de tipo.
3. Cuando utilice una interfaz genérica, debe especificar explícitamente el tipo concreto.

4. Tipo de herramienta genérica

Tipos de herramientas genéricas: TS ha incorporado algunos tipos de herramientas de uso común para simplificar algunas operaciones comunes en TS.

Explicación: Todos se implementan en base a genéricos (los genéricos son aplicables a múltiples tipos y son más generales), están integrados y se pueden usar directamente en el código. Hay muchos tipos de estas herramientas, aprendamos primero las tres siguientes:

① Parcial

Haga que todas las propiedades de un tipo de objeto sean opcionales;

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

El tipo UpdatedPerson resultante es idéntico a la siguiente definición de tipo:

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

② Sólo lectura

Establezca todas las propiedades de Tipo en solo lectura (solo lectura).

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

El nuevo tipo construido ReadonlyProps tiene la misma estructura que Props, pero todas las propiedades pasan a ser de solo lectura. Inmutable

③ Elegir

Pick<Type, Keys> Selecciona un conjunto de propiedades de Type para construir un nuevo tipo.

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

1. El tipo de herramienta Seleccionar tiene dos parámetros de tipo: 1 indica qué atributo está seleccionado; 2 indica qué atributos están seleccionados. 2. Para la segunda variable de tipo, si solo se selecciona una, solo se puede pasar el nombre del atributo.
2. Los atributos pasados ​​por la variable de segundo tipo solo pueden ser los atributos que existen en la variable de primer tipo.
3. El nuevo tipo PickProps construido tiene solo dos tipos de propiedad, id y título.