招聘网站开发的公司,销售运营主要做什么,html网页大赛优秀作品,小型教育网站的开发建设开题报告泛型是 TS 中一个重要的概念#xff0c;它可以创建可复用的组件#xff0c;同时保持对类型信息的一致性。
泛型提供了一种方式使得类型可以被参数化#xff0c;这样就可以创建可以适用于各种数据类型的函数或类#xff0c;而不仅仅限于一个数据类型。
一、泛型
先来看一…泛型是 TS 中一个重要的概念它可以创建可复用的组件同时保持对类型信息的一致性。
泛型提供了一种方式使得类型可以被参数化这样就可以创建可以适用于各种数据类型的函数或类而不仅仅限于一个数据类型。
一、泛型
先来看一个需求 我有一个 compiler 函数我希望这个函数可以接收一个字符串或一个字符串数组返回值也是一个字符串或一个字符串数组有什么办法 结合多种编程语言我们很容易想到几种解决方法
1. 使用函数重载
在传统的面向对象编程语言中例如 Java 或 C函数重载允许我们使用相同的函数名定义多个函数只要它们的参数列表参数的数量或类型不同即可。在编译过程中编译器会通过函数调用时的参数列表判断调用哪个重载函数。
在 JavaScript 中如果尝试使用相同的函数名定义多个函数后定义的函数将覆盖先定义的函数。
在 TS 中可以函数重载如我们可以这样做
function compliler(template: string): string;
function compliler(template: string[]): string[];
function compliler(template: any) {return template;
}
console.log(compliler(abc)); // abc
console.log(compliler([abc, efg])); // [abc, efg]
// console.log(compliler(123)); // 报错
在这个例子中compiler 函数有两个重载签名和一个实现函数。第一个重载签名接受一个字符串类型的参数返回一个 字符串。第二个重载签名接受一个字符串数组类型的参数返回一个字符串数组。
实现函数接受任意类型的参数返回参数本身。这个实现函数必须能兼容所有的重载签名所有对 compiler 函数的调用都会执行这个实现函数。
需要注意的是TS 在解析函数重载时会按照重载签名从上到下的顺序进行匹配所以在编写重载签名时应该把最精确的定义放在最前面。
使用这个方法可以解决这个需求但是这么一个简单的需求写出的代码看起来很麻烦让人很不舒服不够简洁因此此方案作废。
2. 使用联合类型
使用联合类型也可以解决这个需求。
function compiler(template: string | string[]): string | string[] {return template;
}
我们定义了一个 compiler 函数有一个字符串类型或字符串数组类型的参数返回值可以是字符串也可以是字符串数组。
这个方法和使用函数重载的方法相比代码简洁了许多。但如果参数类型可以是很多种比如 template 参数同时也可以是数字类型、布尔类型、数字数组等。虽然可以在参数的类型注解后面继续加上 | number | bool | number[]但这样代码的观感也不是很好。
在这个例子中传入 compiler 函数的参数类型可以和返回值类型不一致。如果想让返回值的类型和参数的类型一致如函数重载案例的效果就可以使用类型变量。
3. 使用类型变量
类型变量是 TS 中的一种特殊的变量只用于表示类型而不是值。通过使用类型变量我们可以创建出在多种类型之间都可以共享的函数或组件。
// 类型变量
function compiler T (template: T): T {// ...return template;
}
尖括号中的 T 就是类型变量它可以捕获用户传入的一些类型允许我们跟踪函数中使用的这些类型的信息。这里我们定义了类型变量 T就可以在函数定义中使用它。我们定义了参数 template 的类型为 T返回值类型也为 T这样就保证了参数类型和返回值类型一致。
在这个案例中T 可以是任意类型函数运行时也并不知道 T 是什么类型。、
为了解决这个问题我们可以在调用函数时指定参数的类型。如下所示
compilerstring(123);
这里我们指定了传入的参数类型为字符串后面传入的 123 就是一个字符串。
也可以直接传入 123TS 有类型推导机制在编译时编译器会推导出传入的参数为字符串类型T 这时也就是字符串类型返回值的类型也自然就是字符串类型。
// 类型推导
compiler(123);
现在返回去看需求传入的参数需要是字符串类型或字符串数组类型我们就可以结合联合类型这样做
compilerstring | string[](123);
这个案例中的 compiler 函数就是一个泛型函数。
二、泛型约束
来看下面的案例
function compiler T (template: T): T {console.log(template.length);// ...return template;
}compilerstring(123);
编辑器可以通过我们传入的参数 123 来推断出 T 为字符串类型但是编译时仍然会报错Property length does not exist on type T.表示类型 T 中不存在 length 这个属性。
我们可以使用继承接口的方法来实现泛型约束通过接口来指定一个泛型必须具有某些属性或方法。
interface Len {length: number;
}function compiler T extends Len (template: T): T {console.log(template.length);// ...return template;
}compilerstring(123);
这里我们先定义一个接口 Len接口中有一个属性 length再让类型变量 T 继承这个接口编译器知道了类型 T 下有 length 这个变量即可编译成功。
这里需要注意使用这种方法我们传入的这个参数必须要有 length 这个属性否则会报错。如
compiler([]); // 0
compiler(false); // 报错
第一行我们传入一个数组我们都知道数组是有 length 属性的因此可以正确运行输出 0。
第二行我们传入一个 false为布尔类型布尔类型没有 length 属性所以会报错Argument of type boolean is not assignable to parameter of type Len.表示布尔类型和接口 Len 不匹配。
如果我们修改 Len 接口在接口中增加一个 split 属性类型为 函数
interface Len {length: number;split: Function;
}
修改 Len 接口后传入 compiler 的参数必须同时具有 length 属性和 split 函数。因此 compiler([]) 会报错因为数组不具备 split 方法。
三、总结
使用泛型的优势
1. 函数和类可以轻松的支持多种类型增强程序的扩展性。
2. 不必写多条函数重载、联合类型声明增强代码的可读性。
3. 灵活控制类型之间的约束。
