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

Zeworl_rod
516 阅读2分钟

前言

  • TypeScript作为JavaScript的超集,增加了可选的静态类型。相比动态类型的JavaScript,TypeScript具有更强大的静态类型系统,可以在编译阶段发现更多bug。
  • 其中类和泛型是TypeScript中非常重要和强大的特性。
  • 本文将记录在实际项目中使用TypeScript类和泛型的一些心得体会。旨在加深对TypeScript特性的理解,提高类型系统应用能力。同时也可供其他TypeScript学习者参考借鉴,以更好地利用TypeScript开发安全可靠的应用程序。

一、泛型函数

  • 定义函数时不预设具体类型,使用泛型参数T代替
  • 调用时传入具体类型,T会被自动替换
  • 灵活适用多种类型,也可以添加多个泛型参数 泛型函数可以定义多种类型的参数和返回值,增加灵活性。例如:
typescript
function identity<T>(arg: T): T {
  return arg; 
}

let output = identity<string>("myString");

二、泛型接口

  • 接口中使用泛型参数定义结构- 实现该接口的类可以传入不同的具体类型
  • 既定义了通用接口结构,又保证了类型安全 泛型接口定义函数和类结构,例如:
typescript 
interface GenericIdentityFn<T> {
  (arg: T): T;
}

function identity<T>(arg: T): T {
  // ...
}

let myIdentity: GenericIdentityFn<number> = identity;

三、泛型类

  • 类中可以使用泛型类型定义成员
  • 创建类实例时可以传入具体的类型
  • 不同的实例可作用于不同类型,提高复用性 泛型类可以定义多种类型的成员变量:
typescript
class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

四、泛型约束

  • 使用继承和接口约束泛型- 限制泛型的类型范围
  • 既保证灵活性又增加代码安全性
  • 通常将泛型类型约束为具有共同属性的类型 可以用接口和继承来实现对泛型的约束:
typescript
interface Lengthwise {
  length: number;
}

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

后记:

通过这次TypeScript学习与项目实践,我对TypeScript的类与泛型有了更深入的理解:

  1. TypeScript类与接口是构建类型安全程序的基石,它们为代码提供结构与规范。
  2. 访问修饰符、属性修饰符提供了细致的访问控制能力。
  3. 泛型巧妙地支持多种类型,既保证灵活性又提供类型约束。
  4. 关键是要善用这些特性解决实际需求,不能机械使用。
  5. TypeScript的类型系统需要我们不断练习,以深挖其优势。
  6. 多阅读TypeScript社区最佳实践,学习他人设计思想。
  7. 本次记录让我受益匪浅,也更加热爱TypeScript这门多范式语言。TypeScript与JavaScript的结合为前端开发带来了革命性创新。我会继续努力,深入学习TypeScript的新特性,在工作中发掘更多应用场景。
avatar
文章
阅读
粉丝