响应式设计网站怎么做,慈溪网站设计,wordpress 添加备案,wordpress 加视频教程文章目录 前言泛型类型链接关系K、T、V 含义自动类型推断泛型的应用场景容器类和数据结构函数和方法接口和类类型约束和扩展常用的工具类型 前言
在 TypeScript 的泛型里经常会碰到一些字母#xff0c;比如 K、T、V#xff0c;是不是觉得很奇怪#xff1f;
泛型类型 图中的… 文章目录 前言泛型类型链接关系K、T、V 含义自动类型推断泛型的应用场景容器类和数据结构函数和方法接口和类类型约束和扩展常用的工具类型 前言
在 TypeScript 的泛型里经常会碰到一些字母比如 K、T、V是不是觉得很奇怪
泛型类型 图中的 T 称为泛型类型参数它是我们希望传递给函数的类型占位符。
使用泛型类型参数可以使函数、类或接口在处理不同类型的数据时变得更加灵活和通用。当我们定义泛型类型参数时它会在函数、类或接口中作为一个占位符表示可以接受任意类型的值。
链接关系
就像传递参数一样我们获取用户指定的实际类型并将其链接到参数类型和返回值类型。 K、T、V 含义
那么是什么T意思呢图中的泛型类型参数T代表Type实际上T可以替换为任何有效的名称。除了 之外T常见的泛型变量还有 K、V、E 等。 K(Key)表示对象中key的类型 V(Value)表示对象中值的类型 E(Element)表示元素类型 K 和 V
// 定义一个泛型接口表示键值对
interface KeyValuePairK, V {key: K;value: V;
}// 使用 K 和 V 分别表示键和值的类型
let pair1: KeyValuePairstring, number { key: age, value: 25 };
let pair2: KeyValuePairnumber, boolean { key: 1, value: true };
E实现一个简单的队列Queue数据结构
// 定义一个泛型队列类
class QueueE {private elements: E[] [];// 将元素添加到队列末尾enqueue(element: E) {this.elements.push(element);}// 从队列头部移除并返回元素dequeue(): E | undefined {return this.elements.shift();}// 返回队列中的所有元素getAll(): E[] {return this.elements;}
}// 使用泛型队列存储数字
const numberQueue new Queuenumber();
numberQueue.enqueue(1);
numberQueue.enqueue(2);
numberQueue.enqueue(3);
console.log(numberQueue.getAll()); // Output: [1, 2, 3]
console.log(numberQueue.dequeue()); // Output: 1// 使用泛型队列存储字符串
const stringQueue new Queuestring();
stringQueue.enqueue(apple);
stringQueue.enqueue(banana);
console.log(stringQueue.getAll()); // Output: [apple, banana]
console.log(stringQueue.dequeue()); // Output: apple
当然不必只定义一个类型参数可以引入任意数量的类型参数。这里我们引入了一个新的类型参数U它扩展了我们定义的函数。 自动类型推断
在调用identity函数时我们可以显式指定泛型参数的实际类型。 当然你也可以不指定泛型参数的类型让TypeScript自动帮我们完成类型推断。 看完上面的动画你是否已经了解泛型类型参数了
泛型的应用场景
泛型在许多场景下都非常有用。下面是一些常见的泛型应用场景
容器类和数据结构
泛型可以用于创建容器类和数据结构如数组、链表、栈和队列等。通过使用泛型我们可以在这些数据结构中存储和操作不同类型的数据而不需要为每种类型都编写单独的实现。 // 使用泛型创建一个通用的数组栈
class StackT {private items: T[] [];push(item: T) {this.items.push(item);}pop(): T | undefined {return this.items.pop();}
}// 使用字符串类型的栈
const stringStack new Stackstring();
stringStack.push(Hello);
stringStack.push(World);
console.log(stringStack.pop()); // Output: World// 使用数字类型的栈
const numberStack new Stacknumber();
numberStack.push(1);
numberStack.push(2);
console.log(numberStack.pop()); // Output: 2
函数和方法
泛型函数和方法可以适用于多种类型的参数和返回值。这使得我们可以编写更加通用和灵活的函数而不需要为每种类型都编写重复的代码。 // 泛型函数用于反转数组
function reverseArrayT(array: T[]): T[] {return array.reverse();
}const numbers [1, 2, 3, 4, 5];
const reversedNumbers reverseArray(numbers); // Output: [5, 4, 3, 2, 1]const strings [apple, banana, orange];
const reversedStrings reverseArray(strings); // Output: [orange, banana, apple]
接口和类
泛型还可以用于定义接口和类。通过使用泛型我们可以创建可重用的接口和类以适应不同类型的数据。这在编写通用的数据结构、算法和组件时非常有用。
使用泛型类型参数的接口 // 泛型接口定义一个通用的 Pair 类型
interface PairT, U {first: T;second: U;
}// 使用字符串和数字的 Pair
const pair1: Pairstring, number { first: one, second: 1 };
const pair2: Pairnumber, boolean { first: 42, second: true };
使用泛型类型参数的类
class BoxT {private value: T;constructor(value: T) {this.value value;}getValue(): T {return this.value;}setValue(value: T) {this.value value;}
}let box new Boxstring(Hello);
console.log(box.getValue()); // output: Hellobox.setValue(World);
console.log(box.getValue()); // output: World
类型约束和扩展
泛型还可以与类型约束和扩展一起使用以限制泛型参数的类型范围或添加特定的行为。通过使用类型约束我们可以确保泛型参数具有特定的属性或方法。这提供了更强的类型安全性和代码可读性。 // 使用类型约束确保泛型参数具有 length 属性
function getLengthT extends { length: number }(obj: T): number {return obj.length;
}console.log(getLength(Hello)); // Output: 5
console.log(getLength([1, 2, 3])); // Output: 3
console.log(getLength({ length: 10, width: 5 })); // Output: 10// 使用类型约束确保泛型参数为数字类型
function sumT extends number(a: T, b: T): T {return a b;
}console.log(sum(3, 4)); // Output: 7
console.log(sum(2, test)); // Error: Argument of type test is not assignable to parameter of type number.
常用的工具类型
为了方便开发者 TypeScript 内置了一些常用的工具类型
Partial将类型 T 中的所有属性变为可选属性。
interface User {name: string;age: number;email: string;
}function updateUser(user: PartialUser, newName: string): User {return { ...user, name: newName } as User;
}const user: User {name: Alice,age: 30,email: aliceexample.com,
};const updatedUser updateUser({ age: 35 }, Bob);
console.log(updatedUser);Required将类型 T 中的所有属性变为必选属性。
interface Props {name?: string;age?: number;
}function printInfo(info: RequiredProps) {console.log(info.name.toUpperCase(), info.age.toFixed(2));
}printInfo({ name: John, age: 30 });Readonly将类型 T 中的所有属性变为只读属性。
interface Point {x: number;y: number;
}const point: ReadonlyPoint { x: 10, y: 20 };
// point.x 5; // Error: Cannot assign to x because it is a read-only property
RecordK, T创建一个具有指定键类型 K 和值类型 T 的对象类型
type Fruit apple | banana | orange;
const prices: RecordFruit, number {apple: 1.5,banana: 2,orange: 1,
};PickT, K从类型 T 中选择部分属性 K 组成新类型。
interface Person {name: string;age: number;address: string;
}type PersonInfo PickPerson, name | age;
// PersonInfo: { name: string; age: number; }
keyof: 获取给定类型的所有键属性名的联合类型。
interface Person {name: string;age: number;email: string;
}type PersonKeys keyof Person;// PersonKeys 类型为 name | age | email
