深入浅出 TypeScript（TypeScript中的泛型的使用方法和场景） ｜ 青训营

知识点一

TS是JS的超集，支持静态和动态类型，在编译时就能发现错误。

TS到JS在线编译：

www.typescriptlang.org/play?#code/…

知识点二

TypeScript中的泛型的使用方法和场景：

泛型的本质是参数化类型，通俗的将就是所操作的数据类型被指定为一个参数。在TypeScript中，泛型是一种创建可复用代码组件的工具。这种组件不只能被一种类型使用，而是能被多种类型复用。类似于参数的作用，泛型是一种用以增强类（classes）、类型（types）和接口（interfaces）能力的非常可靠的手段。开发者就可以轻松地将那些可复用的代码组件，适用于各种输入。

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

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('可爱温温','笔记'));