TypeScript 类、泛型的使用实践记录

TypeScript

TypeScript 是一种开源的编程语言，是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript可以编译出纯净、简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。

安装

npm install -g typescript

编译

tsc helloTypeScript.ts

TypeScript 基础类型

Boolean ：布尔类型。
Number ：数字类型。
String ：字符串类型。
Array ：数组类型。
Enum ：枚举，包括数字的和基于字符串的枚举，以及异构枚举。
Any 和 Unknown ：当不确定一个类型是什么类型的，可以选择给其声明为 any 或者 unkown。
Tuple ：表示元组，固定大小的不同类型值的集合。
Void ：表示没有任何类型。
Null 和 Undefined ：TypeScript 里，undefined 和 null 两者有各自的类型分别为 undefined 和 null。
Never ：表示永不存在的值的类型。

TypeScript 中的泛型

泛型：组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，即可以支持不特定的数据类型。如果想要创建可处理多种类型而不只是一种类型的组件，可以使用泛型。泛型是可以在代码库中定义和重复使用的代码模板。它们提供了一种方法，可用于指示函数、类或接口在调用时要使用的类型。可以通过将参数传递给函数的方式来理解，不同之处是使用泛型可以指示组件在被调用时应该使用哪种类型。

泛型函数

函数定义时，函数中的类型变量称为 <T>，指定类型变量后，可以使用 T 来代替参数中的类型、返回类型或将其置于函数中要添加类型批注的任何其他位置。在以下例子中，可以声明getData函数的泛型为number类型，并传递number类型的参数，也可以声明getData函数的泛型为string类型，同时传递参数。

 function getData<T>(data:T):T{
    return data;
 }
 getData<number>(666666);
 getData<string>('888888');

泛型类

泛型类使用 <> 括起泛型类型，跟在类名后面。如果定义的类不加泛型，默认则是Object类型，添加元素的时候，类型可以是任意的。

class getData<T> {
  output(data: T): T {
    return data
  }
}

let data1 = new getData<number>();
data1.output(6);

let data2 = new getData();
data2.output('hello');

泛型接口

接口也可以配合泛型来使用，以增加其灵活性，增强复用性。定义泛型接口时，接口中的方法参数和接口一致。

interface GetData<T, U> {
    data: T;
    value: U;
}

let msg1: GetData<number, string> = {
    data: 6,
    value: 'hello'
}
let msg2: GetData<string, number> = {
    data: 'hello',
    value: 6
}

总结

我们都知道TypeScript提供了类型能力，提高开发效率，提升代码可维护性和稳定性，可以在大型开发项目中帮助开发人员更好的协作。另外泛型是TypeScript中非常重要的一部分，适合解决一些因为不同类型但是业务逻辑相似的场景，但是泛型也不能随便滥用，应该根据实际开发需要，在可以使用多种类型的情况下简化或最小化代码。

TypeScript 类、泛型 ｜ 青训营