版权声明:原创文章,如想转载,请注明原文网址,注明出处;否则,禁止转载;谢谢配合! https://blog.csdn.net/c_kite/article/details/85335913
本系列目的: 列出TypeScript与JavaScript的不同点, 缩小文档内容, 提高学习速度. 原文档地址: https://www.tslang.cn/index.html
泛型
简单使用
泛型解决的问题: 一种方法使返回值的类型与传入参数的类型是相同的. 下面是小例子:
function identity<T>(arg: T): T {
return arg;
}
// 有两种使用方法
// 1.
let output = identity<string>("myString"); // 传入所有的参数,包含类型参数
// 2. 省略类型, 编辑器类型推断, 取参数的类型
let output = identity("myString");
-------------------------------
// 如果想要表达一个T类型的数组, 如下面的例子
function loggingIdentity<T>(arg: T[]): T[] {
console.log(arg.length); // Array has a .length, so no more error
return arg;
}
// 或者
function loggingIdentity<T>(arg: Array<T>): Array<T> {
console.log(arg.length); // Array has a .length, so no more error
return arg;
}
泛型类型
如果想要一个变量表示泛型函数可以如下面的例子:
function identity<T>(arg: T): T {
return arg;
}
let myIdentity: <T>(arg: T) => T = identity;
// 或者
let myIdentity: {<T>(arg: T): T} = identity;
-----------------------------------------------
// 泛型接口
interface GenericIdentityFn {
<T>(arg: T): T;
}
function identity<T>(arg: T): T {
return arg;
}
let myIdentity: GenericIdentityFn = identity;
// 或者
let myIdentity: GenericIdentityFn<number> = identity; // 这里传入了number就锁定了之后代码里使用的类型
泛型类
这个和函数差不多, 见下面例子
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; };
泛型约束
相比于操作any所有类型,我们想要限制函数去处理任意带有属性的所有类型。 只要传入的类型有这个属性,我们就允许,就是说至少包含这一属性。 因此, 为了解决这种情况我们可以采用extend
关键字, 如下面例子:
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length); // 现在我们可以处理带有length属性的变量
return arg;
}
loggingIdentity(3); // Error, 3不含有length属性
loggingIdentity({length: 10, value: 3}); // ok