前言
- 文中会穿插部分ES6&7的代码(此处不在解释什么作用域什么的,作用什么的)，能言简意赅的绝不废话哈;
- 文中的
ts或者ts2皆指typescript;
这不是一个合格的手册,要想深入和更全应该看官方的手册文档加以练习和尝试
Typescript 三问三答
- Typescript是什么！
ts不是编程语言，可以理解为一种补充(超集)，让JS具有后端的部分特点(类型推断)ts不等同于js，但是可以理解为类似CoffeeScript,可以编译成js，跨平台且项目是开源的
- Typescript能做什么！
- 能提升你的代码质量，只要你愿意遵循它的套路(标准)
- 能简化你的代码复杂程度
ts对于ECMAScript的特性和支持一直很超前ECMAScript的部分特性还是参考ts的，其实微软也是TC39委员会成员之一啦- 有部分后端语言的特性，比如
implements,extends,inteface,abstract等。。
- Typescript难么
- 不夸大的说，若是常规使用，上手还是相当快的(有后端经验的小伙伴)
- 浓浓的
C#风格,目前最新版本是typescript 2.2，我简称它为ts2
注：文章的部分内容是会结合实际应用经验来说，基于ts最新的2.2来说;
迷你文档手册
基础类型及常规声明
众所周知：JS中有这么几种类型的数据: Symbol,boolean,Number,Object[Array在js中也属于对象],undefind,null,String;
那么在TS中如何来声明一个变量或者对象亦或者声明返回对象的值类型呢？
// 最简单的一个声明, 在需要推导的后面加上冒号和类型 let a: number; /*但是有些人有强迫症的，比如会出现这类的写法，但是这类写法在最新版 *中会变成一个警告，说是该类型没必要再写推导类型了，建议移除； */ let b: number = 0; // 会出现警告,应该改成下面这个 let c: boolean = false; let b = 0; // 推荐的写法; let c = false; //--------------- 在TS中类型会比JS稍微多一些,记得ts中类型全部是小写---------------// let temp1: number; // 二进制，八进制，浮点，整数皆归这类 let temp2: string; // 字符串类型，ES6的模板字符串也属于这货 let temp3_1: number[]; // 代表返回值均为数字的数组 let temp3_2: Array<any>; // 数组泛型，代表数组内可以包含所有类型 let temp3_3: [string,number,boolean]; 元组数组，子元素的类型强制一一对应 let temp4: any; // any代表任意类型都可以，万金油 let temp5: void; // 只能赋值undefined或者null let temp6: undefined; // 只能赋值undefined,在--strictNullChecks模式下只能赋值给: void let temp7: null; // 只能赋值null,在--strictNullChecks模式下只能赋值给: void let temp8: object; // 类似Object.create的皆可以 //------ 特殊类型 // 对于异常这类的永远得不到正确返回值的，使用: never try{ ... }catch(e): never{ ... } // 不需要推断的--- 类型断言，简言之，我不需要ts推导，本来就知道这货是什么 // 最常见的是用于引入一些第三方的js库的时候，比如echarts的作用域必须全局window const echarts = (<any>window)['echarts'];
接口
ts中的作用，可以简单的理解为规范类型
export interface Personal{ name: string; age: number; sex: string; colthColor?: string[]; // 衣服颜色,[?]可选参数，返回字符串数组 readonly idCard: number | string; /* readonly是新版本加进来的，和const大同小异， *两者区分readonly用于接口声明而const能作用于变量， *后面number | string其实另外一部分的内容点，叫做联合推导，就是值可以是数字或者字符串 */ // 接口也能描述函数参数这些，写法都差不多 } //------使用,比如用于接口上传 ----- 记得导入 // 接口内的字段及类型会强制对应，不然会报错，这会让代码更加严谨； uploadUserInfo( personalParam: Personal ): Observable<any> { return this.authHttp.upload( environment.baseUrl + 'xxxx/UpdateInfo', personalParam ); } // 接口也可以用实现某些方法，和C#或Java里接口的基本作用一样 // 关键字implements export class MitUpdateUserInfo implements Personal{ ... } // 接口与接口之间可以实现单继承或者多继承 // 关键字extends interface extraParam{ favority:any } interface Personal extends extraParam{ .... }
类
ts内的类其实就是es6的类写法，只是可以完整支持而已
export class test{ public a: number; // 在类直接声明的作用域整个类内，默认为public，写不写看自己了 constructor(){ // 构造函数，构造函数必须可以带上什么范围 // public,private,protected } test(){ 函数。。。。 } } /** 修饰符：更细致的解释请看官方文档手册 * public : 默认，公共开放 * private: 自身类使用 * protected : 派生类可以使用【子类这类】 * readonly : 只读 */ // 同理类也是必然可以继承的，但是不能多继承，不能多继承，不能多继承 // 依旧关键字是extends export class test1{ constructor(private hh:string){ this.hh = hh; } test(a){ console.log(this.hh + a); } } export class test2 extend test1{ public a = 'sfasdf'; constructor(a:string){ super(a); } test(){ super.test(); // 继承方法 } } // 当然，类中不可能少了抽象类，这货的作用就是让一堆人继承实现它带的东西 export abstract class test3 { constructor(public name: string) { } eat(): void { console.log(this.name + '吃吃吃'); // 可以在抽象内实现默认方法，然后子类复写或者直接用 } abstract move(): void; // 等着子类来实现动的方法 } // 也有set和get，就是getter和setter
函数 | 泛型 | 枚举 | 交叉及联合类型
- 函数
exrpot class test4{ constructor(){} sun(leaf:string,drink?:boolean):void{ ... // 传入的参数leaf为字符串类型，该方法没有任何返回 // 水为可选参数，传入为布尔类型 } } // 应该有人想问this，但是this的范围该怎么样就怎么样，在被调用的上下文中确定 //适量的使用箭头函数会让你写起来更舒服
- 泛型 泛型可以简单粗暴的理解为，你传入什么类型，就返回什么类型的值
// TS中的泛型只能用于接口，类(实例)，不能用于枚举和命名空间 // 泛型用符号T表示，不一定要用<T>的写法 identity<T>(arg: T): T { return arg; }
- 枚举 枚举其实就是一组常量，内部的关系是互相映射的
// 这里拿官方的文档例子就很清晰了。。 enum Enum { A } let a = Enum.A; let nameOfA = Enum[Enum.A]; // "A"
- 交叉类型
交叉类型就是复合类型，把多种类型汇总为一种类型，用 & 符号关联 , 常见用于多个对象的组合
test(args1: A,args2: B ): A & B{ ... }
- 联合类型
就是类型可以或！！！
let a: number | string | null; // 即a可以赋值为这三种类型的任意一种
杂七杂八的总结
至此，TS2的常规用法相信大部分小伙伴都能一知半解了。
至于更深入的，其实用的并不多，我自己也没用到那些；
而【d.ts和tsconfig.json的写法请看官方文档，有很详细的教程】, 安装这些就不说了
在这里汇总下我之前遇到的问题及解决方案；
- 引入第三方库该怎么破，比如主流的jquery啥米的，会报类型错误啥的。。 传送门：github.com/DefinitelyT… 安装对应的types，即可解决。。。至于上面没有的只能自己动手丰衣足食了【看官方文档然后自己写个】; 然后放到对应的文件顶部，用
/// <reference types="..." />引入 - 如何声明一个全局变量？ 写一个公用的
xx.d.ts;在里面用写，大致如下
declare var System: any; declare var $: any; declare var jQuery: any; declare var _: any; declare var echarts: any; declare var BMap: any; declare var BMapLib: any;
额外的一堆堆的废话，有些新人经常在群里问ES6模块导入有几种方式和什么意思，这里我也来个解释。。h
// 从组件中导入AppComponent这个类 import { AppComponent } from './app.component'; // 导入所有内部可以导出的 import * from './app.routes'; // 导入某个功能并且把它别名化(alias) import { MitNotificationsModule as notify } from './widgets/mit-notifications/mit-notifications.module'; // 导入两个功能(成员) import { UserAdd , UserDelte } from "User.module"; // 上面两个的结合 import { UserAdd , UserDelte as d } from "User.module"; // 导入默认成员及成员 import defaultMember, { UserAdd } from "User.module"; // 导入默认成员且重命名 import defaultMember, * as name from "module-name"; // 导入整个模块，慎重使用，尽量导入一些你需要用到的，避免这种，有可能你们有部分代码会影响全局 import "global.module"; //------- 说了导入，那么顺便扯扯导出把 // 导出的花样也挺多，下至变量常量，上至对象函数 // 比较有差异的就是default 。。 其他的和上面大致对应 export default const name = 'crper'; // 默认成员，一个模块只有一个至多一个默认 export { a , b} // 导出a,b ....
