一、介绍
1.typescript是由微软开发的一款开源的编程语言
2.ts是js的超级，拓展了js语法，更像java/c#这样面向对象语言，更适合开发大型项目。
3.谷歌也在大力支持ts,谷歌的angular2x+ 就是基于ts语法的。
4.最新的Vue ,React 也可以集成ts。
二、安装和编译
1.安装：npm install -g typescript
2.生成配置文件：tsc --init 创建tsconfig.json 文件（eg:可修改输出地址“outDir”：“./js”,等配置）
3.编译：tsc hello.ts (hello.ts 是自己建的ts名)
4.点击菜单栏 任务-运行任务 点击tsc 监视-tsconfig.json ,然后就可以自动生成代码了。
三、ts的数据类型
1.布尔类型（boolean）
2.数字类型（number）
3.字符串类型（string）
4.数组类型（array）
5.元祖类型（tuple）
6.枚举类型（enum）
7.任意类型（any）
8.null 和 undfined
9.void 类型
10.never类型
四、各类型的用法
1.布尔类型（boolean）
let flag:boolean = true; flag =false;
2.数字类型（number）
let num:number;
num =3;
3.字符串类型（string）
let str:string = '';
str = 'I am string';
4.数组类型（array）
let arr:string[]=[]; arr = ['1','2','3','4'];
or
let arr:Array<number> =[1,2,3,4];
5.元祖类型（tuple）
//已知数组元素的个数，并且知道每个元素的类型
let tupleArr :[string,number] =['lalala',2];
6.枚举类型（enum）
enum Color{ red = 1, blue, orange = 5, green = 7 } let redNum:Color = Color.red //1 let blueNum:Color = Color.blue //2 let orangeNum:Color = Color.orange //5 let red:string = Color[1] //red let blue:string = Color[2] //blue let orange:string = Color[5] //orange
7.任意类型（any）
let notSure:any = 4; notSure = 'maybe a string instead'; notSure = false; //okay
8.null 和 undfined
//strictNullChecks标记的启用是在tsconfig.json文件里进行配置。 // { // "compilerOptions": { //编译选项,可以被忽略，这时编译器会使用默认值 // "strictNullChecks": false, //在严格的null检查模式下，null和undefined值不包含在任何类型里，只允许赋值给void和本身对应的类型。 // } // } //"strictNullChecks": false, //默认情况下，null 和 undefined 是其它类型的子类型，可以赋值给其它类型，如number类型，此时，赋值后的类型会变成 null 或 undefined。 let hh: number; hh = null; //ok的 hh = undefined; //ok的 //"strictNullChecks": true, let ss: number; ss = null; //提示不可以 ss = undefined; //提示不可以
//定义没有赋值就是undifined;
let aa :string | undifined;
console.log(aa) //undefined
//一个元素可能是number，null，undifined
let num: number | null | undefined
num=123;
9.void 类型
//表示方法没有返回任何类型 function run(): void { console.log(111); } run() //表示传参是number类型，函数返回值也是number类型 function sum(num:number): number { console.log(111); return num + 123 } sum(12);
10.never类型
//never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。
// 即使 any也不可以赋值给never。通常表现为抛出异常或无法执行到终止点（例如无线循环）。比如： let x: never; let y: number; // 运行错误，数字类型不能转为 never 类型 x = 123; // 运行正确，never 类型可以赋值给 never类型 x = (() => { throw new Error('exception') })(); // 运行正确，never 类型可以赋值给 数字类型 y = (() => { throw new Error('exception') })(); // 返回值为 never 的函数可以是抛出异常的情况 function error(message: string): never { throw new Error(message); } // 返回值为 never 的函数可以是无限循环这种无法被执行到的终止点的情况 function loop(): never { while (true) { } }
五、类
1.类的写法
2.类的继承
3.属性修饰符（public、protected、private）
4.必传参数和可选参数
//类里面的修饰符:ts里定义属性的时候提供了三种修饰符: /* public:共有 在类里面、子类、类外面都可以访问 protected：保护类型 在类里面，子类里面可以访问，在类外部没法访问 private:私有 在类里面可以访问 ，类外面和子类都不访问 属性如果不加修饰符，默认是public */ class Person { name: string; //必传，属性修饰符这里没写就默认是public，同public name:string; private sex: string; protected age?: number; //age：可有可没有 //namepro:必传，agepro：可传可不传，可选参数必须配置到 参数的最后面 //‘lisi’是namepro的默认值 constructor(namepro: string = 'lisi', sexpro: string = '男', agepro?: number) { this.name = namepro; this.age = agepro; this.sex = sexpro; } run(): void { console.log(this.name); } } let zhangsan = new Person('zhangsan', '女'); zhangsan.run(); zhangsan.age; //提示出错。age是保护类型 class Web extends Person { constructor(name: string) { super(name) //继承父级的参数需要同过super函数传值 } work() { console.log(this.sex); //sex是父类的私有属性，所以子类是访问不到的，这里会提示错误 } }
5.参数中的三点运算符
//三点运算符，接受新参传过来的值 function sumFn(...result: number[]): number { let sum: number = 0; for (let i = 0; i < result.length; i++) { sum += result[i]; } return sum; } sumFn(1, 2, 3, 4); sumFn(1, 2, 3, 4, 5, 6) //如果有默认的参数，那传参前面就是默认的参数，剩下的就在。。。的result中 function sumFn(a:number,b:number,...result: number[]): number { let sum: number = a+b; for (let i = 0; i < result.length; i++) { sum += result[i]; } return sum; } sumFn(1, 2, 3, 4); sumFn(1, 2, 3, 4, 5, 6)
六、ts函数重载
1.ts中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的
function getInfo(name: string): string; function getInfo(age: number): string; function getInfo(str: any): any { if (typeof str === 'string') { return '我叫' + str; } else { return '我的年龄' + str; } } getInfo('张三') //我叫张三 getInfo(20) //我的年龄20
七、类的静态属性 静态方法
1. /*es5中的写法*/
function Person () { // this.run = function () {} // 实例方法 // this.run = ()=> {} } Person.run = function () {} // 静态方法
2./*es6的写法*/
class Person1 { name:string; static sex = 'man'; // 静态属性 constructor(name: string) { this.name = name; } eat() { console.log(`${this.name}吃饭`) } static work() { console.log(`这是一个静态方法` + Person1.sex) // console.log(`${this.name}哈哈`) // 错误的写法，静态方法里面无法调用类的属性、方法。 } } var p = new Person1('aaa'); p.eat(); // 实例方法调用 Person1.work(); // 静态方法调用
八、ts中的抽象类和抽象方法,多态
1.typescript中的抽象类是提供其它类的基类，不能直接被实例化；
2.用abstract关键字定义的抽象方法和抽象类，不包括具体实现必须在派生类实现。
3. 抽象类: abstract 修饰， 里面可以没有抽象方法。但有抽象方法(abstract method)的类必须声明为抽象类(abstract class)
4.抽象类用于定义标准
5. 多态:父类定义一个方法不去实现，让继承它的子类去实现 每一个子类有不同的表现
abstract class Animal { name: string; constructor(name: string) { this.name = name; } //抽象方法 ，不包含具体实现，要求子类中必须实现此方法 abstract eat(): any; //非抽象方法，无需要求子类实现、重写 run(): void { console.log('非抽象方法，不一定要子类实现、重写'); } } //子类中必须实现父类抽象方法，否则ts编译报错 class Dog extends Animal { eat() { return this.name + '吃鱼' } } class Cat extends Animal { //子类中必须实现父类抽象方法，否则ts编译报错 eat() { return this.name + "吃鱼"; } } var dog = new Dog("tom"); var cat = new Cat("kitty"); console.log(dog.eat()); console.log(cat.eat()); //多态 ，一种事物的不同表现形态。如下面的代码中 先声明变量f是Animal类型，具体是Dog还是Cat，在new 对象时才知道 //如果是Dog，则f.eat()调用的是Dog类中的eat方法；如果是Cat，则f.eat()调用的是Cat类中的eat方法，这就是多态！！！ var f: Animal;//声明变量为Animal类型 //f=new Dog("sunny"); f = new Cat("sunny"); console.log(f.eat());
九、接口
1.接口：行为和动作的规范，对批量方法进行约束
2.接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面
3.分类：属性接口、函数类型接口、可索引接口、类类型接口
（1）属性接口：
//属性接口 interface fullName{ firstName:string; secondName:string; } function getName(name:fullName):void{ console.log(name.firstName + name.secondName); } getName({ firstName:'Li', secondName:'haha' })
interface Shape { head: string; arm: string; } interface Human { name: string; age: number; shape: Shape; say(word: string): void; } let jack: Human = { name: 'Jack', age: 18, shape: { head: 'head', arm: 'arm' }, say(word: string) { console.log(word) } } jack.say('hi')
（2）函数类型接口：
//函数类型接口 interface Fn{ (key:string,val:string):string; } let add1:Fn = function(key:string,val:string):string{ return key+val; } let add2:Fn = function(key:string,val:string){ return `${key}------${val}` }
（3）可索引接口（数组对象的约束，不常用）
//ts定义数组的方式 let arr1: number[] = [11, 22]; let arr2: Array<string> = ['11', '22']; //可索引接口的实现 interface UserArr { [index: number]: string } let arr3: UserArr = ['aa', 'bb'] //ok console.log(arr3[0]); let arr4:UserArr=[11,'aa'];//报错 interface UserObj{ [index:string]:string } let arr5:UserObj ={name:'张三'} //OK，但是这样实现已经不是数组，没有意义了，所以不常用
（4）类类型接口（对类的约束，和抽象类有点像）
interface Aniaml1 { name: string; eat(str: string): void; } //implements ,是对类Aniaml1的实现 class Dog1 implements Aniaml1 { name: string; constructor(name: string) { this.name = name; } eat(str: string) { console.log(this.name + '吃粮食' + str); } } let d = new Dog1('小黑'); d.eat('肉');
4.接口的拓展：接口可以继承接口
interface Animal { eat(): void; } interface Person extends Animal { work(): void; } class Web implements Person { name: string; constructor(name: string) { this.name = name; } eat() { console.log(this.name + '喜欢吃馒头'); } work() { console.log(this.name + '写代码'); } } let zhangsan = new Web('zhangsan'); zhangsan.work();
十、泛型
1.泛型的定义：指在定义函数、接口或者类的时候， 不预先指定其类型，而是在使用时手动指定其类型的一种特性
2.泛型分类：泛型函数、泛型类、泛型接口
（1）泛型函数
//使用泛型函数（T：类型变量） function myfn<T>(args: T): T { return args; } let output = myfn<string>("Hello"); //明确传入类型参数 let output2 = myfn("Hello") //不传入类型参数，TS根据上下文自动推断类型 //使用泛型变量（这可以让我们把泛型变量T当做类型的一部分使用，而不是整个类型） function myfn1<T>(args: T[]): T[] { console.log(args.length) return args; } function myfn2<T>(args: Array<T>): Array<T> { console.log(args.length); return args; }
（2）泛型类
class add<T>{ value: T; add: (x: T, y: T) => T; } let myTest = new add<number>(); myTest.value = 0; myTest.add = function (x, y) { return x + y }
（3）泛型接口
//第一种方法 interface Test { <T>(args: T): T } let myTest: Test = function <T>(args: T): T { return args; } myTest<string>('20'); myTest<string>(20); //第二种方法 interface Test1<T> { (args: T): T } function myfn1<T>(args: T): T { return args; } let myTest1: Test1<string> = myfn1; myTest1('20') //ok myTest1(20)//报错
（4）泛型约束（类型变量继承接口）
//例中，传入的参数必须具有length属性 interface Test{ length:number; } function myfn<T extends Test>(args:T):T{ console.log(args.length) return args; } myfn(3); //error myfn("abc") //3
十一：模块
1.模块的概念
2.模块导出的几种方式：export导出声明、export导出语句、export default、import 导入模块
3.模块封装（DB库）
4.命名空间
十二、装饰器
1.概念
2.分类：属性装饰器、方法装饰器、方法参数装饰器、类装饰器（装饰器的执行顺序也是这样）
3.装饰器的写法：普通装饰器（无法传参）、装饰器工厂（可传参）
（1）普通装饰器
//类装饰器 function logClass(target: any) { console.log(target); //httpClient类 params.prototype.apiUrl = '动态扩展的属性'; params.prototype.run = function () { console.log('动态拓展的方法'); } } @logClass class httpClient { constructor() { } getData() { } } let http: any = new httpClient();
//类装饰器重载构造函数和当前类的方法（普通装饰器） function logClass(target: any) { //target:httpClient 类 return class extends target { //装饰器重载构造函数 apiUrl: any = '我是修改后的数据'; getData() { this.apiUrl + '----'; console.log(this.apiUrl); } } } @logClass class httpClient { public apiUrl: string | undefined; constructor() { this.apiUrl = '我是构造函数里面的apiUrl'; } getData() { console.log(this.apiUrl); } } let http: any = new httpClient(); console.log(http.apiUrl); //我是修改后的数据
（2）装饰器工厂（可传参）
2.1 类装饰器
//类装饰器（装饰器工厂的方式） function logClass(params: any) { //params：传的参数 return function (target: any) {//target:httpClient类 console.log(params);//hello console.log(target);//httpClient类 target.prototype.apiUrl = params; //可以用上传的参数 target.prototype.run = function () { console.log('动态拓展的方法'); } } } @logClass('hello') //可以传参 class httpClient { constructor() { } getData() { } } let http: any = new httpClient(); console.log(http.apiUrl); //hello
2.2 属性装饰器
//属性装饰器 function logProperty(params: any) { //params：传的值：我是属性装饰器 return function (target: any, attr: any) { //target:httpClient 类，attr：apiUrl target[attr] = params; } } class httpClient { @logProperty('我是属性装饰器') //注意后面是不能加分号的 public apiUrl: string | undefined; constructor() { this.apiUrl = '我是构造函数里面的apiUrl'; } getData() { console.log(this.apiUrl); } } let http: any = new httpClient(); console.log(http.apiUrl); //我是属性装饰器
2.3 方法装饰器//方法装饰器
function get(params: any) { //params：传的值：我是方法装饰器 //target:httpClient类，methodName：方法名getData， desc:方法的描述 return function (target: any, methodName: any, desc: any) { target.addPara = '我是拓展的属性'; //同类装饰器的方法 target.addFn = function () { //同类装饰器的方法 console.log('我是拓展的方法'); } //修改装饰器的方法，把装饰器里面传入的参数改为string类型 //获取当前的方法 desc.value =getData() {console.log(this.apiUrl);} //先保存当前的方法 let oldMethond = desc.value; //修改当前的方法 desc.value = function (...args: any[]) { args = args.map((val) => { return String(val) }) console.log(args);//['123','xxx']
console.log(params); //我是方法装饰器 //将原来的方法继承到修改后的方法里面，这样既有修改的方法，又包含原有未修改的方法 oldMethond.apply(this, args) } } } class httpClient { public apiUrl: string | undefined; constructor() { this.apiUrl = '我是构造函数里面的apiUrl'; } @get('我是方法装饰器') getData(...args: any[]) { console.log(args); //['123','xxx'] console.log(this.apiUrl); //我是构造函数里面的apiUrl } } let http: any = new httpClient(); http.getData; //['123','xxx']
//我是方法装饰器
//['123','xxx'] //我是构造函数里面的apiUrl
2.4 方法参数装饰器
//方法参数装饰器:可以为类的原型增加一些元素数据（一般不用，类装饰器就可以做到这些） function logParams(params: any) { //params：传的值：我是方法参数装饰器 //target:httpClient类，methodName：方法名getData， paramsIndex:函数参数的index索引 return function (target: any, methodName: any, paramsIndex: any) { target.addUrl = 'params';//可以为类的原型增加一些元素数据 } } class httpClient { public apiUrl: string | undefined; constructor() { } getData( @logParams('我是方法参数装饰器') uuid:any) { console.log(uuid); //haha } } let http: any = new httpClient(); http.getData('haha');