O conceito e uso básico de genéricos TypeScript

O que são genéricos TypeScript?

• Ao definir funções, interfaces e classes, os tipos de dados usados ​​não podem ser determinados antecipadamente, mas os tipos de dados que só podem ser determinados quando essas funções, interfaces e classes são usadas;

1. Um único parâmetro genérico

Por exemplo, ao usar any, o tipo de valor1 muda com os dados de tipo recebidos:

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

Depois de mudar para 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. Vários parâmetros genéricos

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

3. Interface genérica

Interface genérica: A interface também pode ser usada com genéricos para aumentar sua flexibilidade e melhorar sua capacidade de reutilização

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. Adicione <type variável> após o nome da interface, então esta interface se tornará uma interface genérica.
2. A variável de tipo da interface é visível para todos os outros membros da interface, ou seja, todos os membros da interface podem usar a variável de tipo.
3. Ao usar uma interface genérica, você precisa especificar explicitamente o tipo concreto.

4. Tipo de ferramenta genérica

Tipos de ferramentas genéricas: o TS incorporou alguns tipos de ferramentas comumente usados ​​para simplificar algumas operações comuns no TS

Explicação: Todos eles são implementados com base em genéricos (genéricos são aplicáveis ​​a vários tipos e são mais gerais), e são integrados e podem ser usados ​​diretamente no código. Existem muitos tipos dessas ferramentas, vamos aprender primeiro os três seguintes:

① Parcial

Torne opcionais todas as propriedades em um tipo de objeto;

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

O tipo UpdatedPerson resultante é idêntico à seguinte definição de tipo:

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

② Somente leitura

Defina todas as propriedades de Type como somente leitura (somente leitura).

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

O novo tipo construído ReadonlyProps tem a mesma estrutura que Props, mas todas as propriedades tornam-se somente leitura. Imutável

③ Escolha

Pick<Type, Keys> Seleciona um conjunto de propriedades de Type para construir um novo tipo.

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

1. O tipo de ferramenta Seleção possui dois parâmetros de tipo: 1 indica qual atributo está selecionado; 2 indica quais atributos estão selecionados. 2. Para a segunda variável de tipo, se apenas uma for selecionada, apenas o nome do atributo poderá ser passado.
2. Os atributos passados ​​pela segunda variável de tipo só podem ser os atributos que existem na primeira variável de tipo.
3. O novo tipo construído PickProps possui apenas dois tipos de propriedades: id e title.