Das Konzept und die grundlegende Verwendung von TypeScript-Generika

Was sind TypeScript-Generika?

• Bei der Definition von Funktionen, Schnittstellen und Klassen können die verwendeten Datentypen nicht im Voraus bestimmt werden, sondern die Datentypen, die erst bei Verwendung dieser Funktionen, Schnittstellen und Klassen bestimmt werden können.

1. Ein einzelner generischer Parameter

Wenn Sie beispielsweise „any“ verwenden, ändert sich der Typ von Wert1 mit den eingehenden Typdaten:

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

Nach dem Wechsel zu generisch:

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. Mehrere generische Parameter

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

3. Generische Schnittstelle

Generische Schnittstelle: Die Schnittstelle kann auch mit Generika verwendet werden, um ihre Flexibilität zu erhöhen und ihre Wiederverwendbarkeit zu verbessern

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

verwenden:

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. Fügen Sie <Typvariable> nach dem Schnittstellennamen hinzu, dann wird diese Schnittstelle zu einer generischen Schnittstelle.
2. Die Typvariable der Schnittstelle ist für alle anderen Mitglieder der Schnittstelle sichtbar, d. h. alle Mitglieder der Schnittstelle können die Typvariable verwenden.
3. Wenn Sie eine generische Schnittstelle verwenden, müssen Sie den konkreten Typ explizit angeben.

4. Allgemeiner Werkzeugtyp

Generische Werkzeugtypen: TS hat einige häufig verwendete Werkzeugtypen integriert, um einige gängige Vorgänge in TS zu vereinfachen

Erläuterung: Sie werden alle auf Basis von Generika implementiert (Generika sind auf mehrere Typen anwendbar und allgemeiner), und sie sind integriert und können direkt im Code verwendet werden. Es gibt viele Arten dieser Tools. Lernen wir zunächst die folgenden drei kennen:

① Teilweise

Alle Eigenschaften in einem Objekttyp optional machen;

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

Der resultierende UpdatedPerson-Typ ist identisch mit der folgenden Typdefinition:

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

② Schreibgeschützt

Setzen Sie alle Eigenschaften von Type auf readonly (schreibgeschützt).

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

Der erstellte neue Typ ReadonlyProps hat die gleiche Struktur wie Props, aber alle Eigenschaften werden schreibgeschützt. Unveränderlich

③ Wählen Sie

Pick<Type, Keys> Wählt eine Reihe von Eigenschaften aus Type aus, um einen neuen Typ zu erstellen.

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

1. Der Werkzeugtyp „Auswählen“ verfügt über zwei Typparameter: 1 gibt an, welches Attribut ausgewählt ist; 2 gibt an, welche Attribute ausgewählt sind. 2. Wenn für die zweite Typvariable nur eine ausgewählt ist, kann nur der Attributname übergeben werden.
2. Die von der Variablen des zweiten Typs übergebenen Attribute können nur die Attribute sein, die in der Variablen des ersten Typs vorhanden sind.
3. Der erstellte neue Typ PickProps verfügt nur über zwei Eigenschaftstypen: id und title.