让前端飞Web前端之路web前端经典面试题

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

2019-08-13  本文已影响5人  全栈弄潮儿

什么是TypeScript

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

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

为什么要使用TypeScript

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

什么是泛型

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

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
上一篇下一篇

猜你喜欢

热点阅读