什么是 TypeScript
TypeScript 是由 Microsoft Corporation 开发和维护的面向对象的编程语言. 它是 JavaScript 的超集, 包含所有元素.
TypeScript 完全遵循 OOPS 概念, 在 TSC(TypeScript 编译器)的帮助下, 我们可以将 Typescript 代码 (.ts 文件) 转换为 JavaScript(.JS 文件).
为什么要使用 TypeScript
TypeScript 的设计目的应该是解决 JavaScript 的 "痛点": 弱类型和没有命名空间, 导致很难模块化, 不适合开发大型程序. 另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程.
TypeScript 简化了 JavaScript 代码, 使其更易于阅读和调试.
TypeScript 是开源的.
TypeScript 为 JavaScript IDE 和实践提供了高效的开发工具, 例如静态检查.
使用 TypeScript, 我们可以比普通的 JavaScript 做出巨大的改进.
TypeScript 为我们提供了 ES6(ECMAScript 6)的所有优点, 以及更高的工作效率.
TypeScript 可以帮助我们避免开发人员通过类型检查代码编写 JavaScript 时经常遇到的痛苦错误.
强大的类型系统, 包括泛型.
TypeScript 代码可以按照 ES5 和 ES6 标准进行编译, 以支持最新的浏览器.
支持静态类型.
TypeScript 将节省开发人员的时间.
什么是泛型
泛型的本质是参数化类型, 通俗的将就是所操作的数据类型被指定为一个参数, 这种参数类型可以用在类, 接口和方法的创建中, 分别成为泛型类, 泛型接口, 泛型方法.
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.
来源: http://www.jianshu.com/p/d6610ebdfb2e