TypeScript 类、泛型的使用实践记录｜ 青训营

泛型的定义

• 通过使用类型约束和泛型，我们可以增加代码的灵活性和安全性
• 泛型可以让我们编写可重用的类、函数和接口，并在编译时提供类型检查
• 这可以帮助我们在开发过程中捕捉潜在的错误，并提供更好的代码可读性和维护性。

对泛型进行总结就是：定义前不明确类型，使用的时候再明确类型，能够给我们保留有足够的自由度，又不会像any丧失类型检查的效果

有无泛型的对比

• 无泛型

//数字类型
function num(A:number,B:number):Array<number>{//Array<number>为希望返回number类型的数组
    return [a,b]
}

• 有泛型

function add<T>(a:T,b:T):Array<T>{
  return [a,b];
}
add<number>(1,2)
add<string>('1','2')

add(1,2)
add('1','2')

通常定义的时候类型是不明确的，所以一般使用T来定义

编辑器会自动推断类型，但最好还是写一下，如果你知道你具体需要的是什么的话

泛型的使用

1. 类中的泛型：可以使用泛型来实现可复用的类。例如，可以创建一个 Box 类，使用泛型来表示存储在盒子中的值的类型：

class Box<T> {
  private value: T;
 
  constructor(value: T) {
    this.value = value;
  }
  getValue(): T {
    return this.value;
  }
}

const numberBox = new Box<number>(10);
console.log(numberBox.getValue()); // 输出 10

const stringBox = new Box<string>('Hello');
console.log(stringBox.getValue()); // 输出 'Hello'

在这个例子中，Box 类使用泛型 T 来表示存储在盒子中的值的类型。在实例化 Box 对象时，可以指定具体的类型，例如 number 或 string。通过使用泛型，我们可以定义一个可重用的盒子类，适用于不同类型的值。

2. 函数中的泛型：可以使用泛型来编写可复用的函数。例如，可以编写一个reverse函数，接受一个数组并返回其反转的副本：

function reverse<T>(array: T[]): T[] {
  return array.reverse();
}

const numbers = [1, 2, 3, 4, 5];
const reversedNumbers = reverse(numbers);
console.log(reversedNumbers); // 输出 [5, 4, 3, 2, 1]

const strings = ['Hello', 'World'];
const reversedStrings = reverse(strings);
console.log(reversedStrings); // 输出 ['World', 'Hello']

在这个例子中，reverse 函数使用泛型 T 来表示数组中元素的类型。通过使用泛型，该函数可以适用于不同类型的数组，并返回相同类型的反转副本。

3. 接口中的泛型：可以使用泛型来定义灵活的接口。例如，可以创建一个 Response 接口，使用泛型来表示返回值的类型：

interface Response<T> {
  success: boolean;
  data: T;
  message?: string;
}
interface User {
	id: number;
    name: string;
}
const userResponse: Response<User> = {
  success: true,
  data: {
    id: 1,
    name: 'John Doe',
  }
};

在这个例子中，Response 接口使用泛型 T 来表示 data 属性的类型。通过使用泛型，我们可以定义一个灵活的接口，适用于不同类型的返回值。

4. 泛型约束，使用泛型约束来限制泛型的类型范围。使用 extends 关键字来约束泛型类型必须是某个类的子类或者实现了某个接口：

function logLength<T extends { length: number }>(arg: T): void {
  console.log(arg.length);
}

logLength('Hello'); // 输出 5
logLength([1, 2, 3]); // 输出 3
logLength({ length: 10 }); // 输出 10

在这个例子中，T extends { length: number } 表示泛型 T 必须具有 length 属性，且该属性的类型必须是 number。

泛型工具类型

typeof

typeof 的主要用途是在类型上下文中获取变量或者属性的类型，下面我们通过一个具体示例来理解一下。

interface Person {
  name: string;
  age: number;
}
const sem: Person = { name: "semlinker", age: 30 };
type Sem = typeof sem; // type Sem = Person

此外，typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型，比如：

function toArray(x: number): Array<number> {
  return [x];
}
type Func = typeof toArray; // -> (x: number) => number[]

keyof

keyof 操作符是在 TypeScript 2.1 版本引入的，该操作符可以用于获取某种类型的所有键，其返回类型是联合类型。

interface Person {
  name: string;
  age: number;
}

type K1 = keyof Person; // "name" | "age"
type K2 = keyof Person[]; // "length" | "toString" | "pop" | "push" | "concat" | "join" 
type K3 = keyof { [x: string]: Person };  // string | number

extends

有时候我们定义的泛型不想过于灵活或者说想继承某些类等，可以通过 extends 关键字添加泛型约束。

interface Lengthwise {
  length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

这篇好文章是转载于：学新通技术网