Typescript中的泛型的作用及使用场景

什么是TypeScript

TypeScript是由Microsoft Corporation开发和维护的面向对象的编程语言。它是JavaScript的超集，包含所有元素。

TypeScript完全遵循OOPS概念，在TSC（TypeScript编译器）的帮助下，我们可以将Typescript代码（.ts文件）转换为JavaScript（.js文件）。

为什么要使用TypeScript

TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。

• TypeScript简化了JavaScript代码，使其更易于阅读和调试。

• TypeScript是开源的。

• TypeScript为JavaScript IDE和实践提供了高效的开发工具，例如静态检查。

• 使用TypeScript，我们可以比普通的JavaScript做出巨大的改进。

• TypeScript为我们提供了ES6（ECMAScript 6）的所有优点，以及更高的工作效率。

• TypeScript可以帮助我们避免开发人员通过类型检查代码编写JavaScript时经常遇到的痛苦错误。

• 强大的类型系统，包括泛型。

• TypeScript代码可以按照ES5和ES6标准进行编译，以支持最新的浏览器。

• 支持静态类型。

• TypeScript将节省开发人员的时间。

什么是泛型

泛型的本质是参数化类型，通俗的将就是所操作的数据类型被指定为一个参数，这种参数类型可以用在类、接口和方法的创建中，分别成为泛型类，泛型接口、泛型方法。

TypeScript中的泛型跟java中的泛型基本类似。

为什么使用泛型

TypeScript 中不建议使用 any 类型，不能保证类型安全，调试时缺乏完整的信息。

TypeScript可以使用泛型来创建可重用的组件。支持当前数据类型，同时也能支持未来的数据类型。扩展灵活。可以在编译时发现你的类型错误，从而保证了类型安全。

泛型的使用

使用泛型可以创建泛型函数、泛型接口，泛型类

1.使用泛型变量

// 泛型变量的使用
function identity<T>(arg:T):T{
    console.log(typeof arg);
    return arg;
}
let output1=identity<string>('myString');
let output2=identity('myString');
let output3:number=identity<number>(100);
let output4:number=identity(200);

// 使用集合的泛型
function loggingIdentity<T>(arg:Array<T>):Array<T>{
    console.log(arg.length);
    return arg;
}
loggingIdentity([1,2,3]);

2.定义泛型函数

// 泛型函数
function identity<T>(arg:T):T{
    return arg;
}
let myIdentity:{<T>(arg:T):T}=identity;

3.定义泛型接口

// 泛型接口
interface GenericIdentityFn<T> {
    (arg: T): T;
}
function identity<T>(arg: T): T {
    return arg;
}
let myIdentity: GenericIdentityFn<number> = identity;

4.定义泛型类

// 泛型类
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;};
console.info(myGenericNumber.add(2,5));
let stringNumberic=new GenericNumber<string>();
stringNumberic.zeroValue='abc';
stringNumberic.add=function(x,y){return `${x}--${y}`};
console.info(stringNumberic.add('张三丰','诸葛亮'));

---

经典前端面试题每日更新，欢迎参与讨论，地址：https://github.com/daily-interview/fe-interview。

---

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

image