TypeScript学习笔记-泛型

泛型

// 泛型来创建可重用的组件，一个组件可以支持多种类型的数据
// 类型变量：表示类型而不是值
// 类型变量T，T捕获用户传入的类型，再次使用了 T当做返回值类型。现在就可以知道参数类型与返回值类型是相同的了
function identity<T> (arg: T): T {  // identity函数叫做泛型函数，它可以适用于多个类型
	return arg;
}
console.log(identity<string>('string'));  // 类型参数: 传入变量及类型参数
console.log(identity('string'));  // 类型推论: 编译器根据传入的参数自动地确定T的类型

function loggingIdentityA<T> (args: Array<T>): Array<T> {
	return args;
}
复制代码

泛型类型

泛型函数

function identityA<T> (arg: T) { 
	return arg; 
}
let identityB: <T>(arg: T) => T = identityA;
let identityC: {<T>(arg: T): T} = identity;  // 带有调用签名的对象字面量来定义泛型函数
复制代码

泛型接口

interface GenericIdentity {
	<T>(arg: T): T;
}
function identityD<T> (arg: T): T { 
	return arg; 
}
let identityE: GenericIdentity = identityD;
console.log(identityE<string>('string'));
复制代码

泛型类

// 泛型类指的是实例部分的类型，类的静态属性不能使用这个泛型类型
class GenericNumber<T> {
	zeroVale: T;
	add: (x: T, y: T) => T;
}
let genericNumber = new GenericNumber<number>();
genericNumber.zeroVale = 0;
genericNumber.add = function(x, y) { return x + y; };
复制代码

泛型约束

interface Lengthwise {  // 此处进行约束
	length: number;
}
function loggingIdentityB<T extends Lengthwise>(arg: T): T {
	console.log(arg.length);
	return arg;
}
loggingIdentityB(12);  // Argument of type '12' is not assignable to parameter of type 'Lengthwise'.
loggingIdentityB([1,2]);
复制代码

在泛型约束中使用类型参数

// 声明一个类型参数，且它被另一个类型参数所约束
function getProperty(obj: T, key: K) {  // 此例fail
    return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };
getProperty(x, "a");
getProperty(x, "m");
复制代码

在泛型里使用类类型

// 使用原型属性推断并约束构造函数与类实例的关系
function create<T>(c: new() => T): T {  // 实例
	return new c();
} 

class BeeKeeper {
	hasMask: boolean;
}
class ZooKeeper {
	nameTag: string;
}
class Animal {
	numLegs: number;
}
class Bee extends Animal {
	keeper: BeeKeeper;
}
class Lion extends Animal {
	keeper: ZooKeeper;
}
function createInstance<A extends Animal>(c: new() => A): A {
	return new c();
}
createInstance(Lion).keeper.nameTag = 'nameTag';
createInstance(Bee).keeper.hasMask = true;
复制代码

转载于:https://juejin.im/post/5a6ea3fd6fb9a01cab288368