TypeScript与JavaScript不同之处系列(五) ===> 泛型
2020-04-05 07:16
731 查看
本系列目的: 列出TypeScript与JavaScript的不同点, 缩小文档内容, 提高学习速度. 原文档地址: https://www.tslang.cn/index.html
全系列目录
- 1.基础类型 https://blog.csdn.net/c_kite/article/details/85232021
- 2.接口 https://blog.csdn.net/c_kite/article/details/85262016
- 3.类 https://blog.csdn.net/c_kite/article/details/85274189
- 4.函数 https://blog.csdn.net/c_kite/article/details/85283691
- 5.泛型 https://blog.csdn.net/c_kite/article/details/85335913
- 6.枚举 https://www.geek-share.com/detail/2797042158.html
- 7.类型推论, 类型兼容性 https://www.geek-share.com/detail/2797042155.html
- 8.高级类型 https://www.geek-share.com/detail/2797042153.html
- 9.命名空间, 三斜线指令 https://www.geek-share.com/detail/2797042143.html
文章目录
1. 泛型
1.1. 简单使用
泛型解决的问题: 一种方法使返回值的类型与传入参数的类型是相同的. 下面是小例子:
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; }
1.2. 泛型类型
如果想要一个变量表示泛型函数可以如下面的例子:
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就锁定了之后代码里使用的类型
1.3. 泛型类
这个和函数差不多, 见下面例子
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; };
1.4. 泛型约束
相比于操作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
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- TypeScript与JavaScript不同之处系列(九) ===> 命名空间, 三斜线指令
- TypeScript与JavaScript不同之处系列(八) ===> 高级类型
- TypeScript与JavaScript不同之处系列(七) ===>类型推论, 类型兼容性
- TypeScript与JavaScript不同之处系列(六) ===>枚举
- 从 JavaScript 到 TypeScript 系列
- (三)我的JavaScript系列:不同调用方式的this指向
- magento缓存系列详解:实施正确的缓存策略及不同缓存结构分析
- javascript 学习系列(-)
- Android官方开发文档Training系列课程中文版:多样屏幕之支持不同的屏幕密度
- React-Native系列Android——Javascript文件加载过程分析
- 深入理解JavaScript系列(12):变量对象(Variable Object)
- 深入理解JavaScript系列(26):设计模式之构造函数模式
- 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点
- 深入理解JavaScript系列(40):设计模式之组合模式
- javascript 高级系列之闭包(closure)
- 前端入门系列(二):javascript字符串对象方法
- 用JavaScript实现点击不同的单选按钮出现不同的内容
- javascript笔记整理系列 - canvas
- javascript入门系列演示·三种弹出对话框的用法实例
- JavaScript获取flash对象与网上的有所不同