typescript

1、typescript 安装 编译

在使用npm命令之前必须安装 nodejs
// 安装
npm install -g typescript
cnpm install -g typescript
yarn global add typescript

//运行
tsc helloworld.ts
//注意：如果电脑上面没有安装过cnpm,先安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

//如果使用yarn安装
npm install -g yarn  或者 cnpm install -g yarn

//查看typescript版本
tsc -v

//typescript开发工具vscode自动编译ts文件
步骤一：创建  tsconfig.json 文件，  tsc --init 生成配置文件
步骤二：打开  tsconfig.json 文件，找到 outDir配置为： outDir:'./js'
步骤三：在 vscode开发工具中，点击终端--点击运行任务---点击tsc监视-tsconfig.json
然后写完代码就可以自动生成js文件了。

 2、typescript 数据类型

布尔类型 (boolean) true false
var flag:boolean = true;
如果这样子写： flag = 'hello';//会报错,因为写法错误

数字类型 (number)
var a:number = 123;
如果想把a赋值其他类型就会报错哦

字符串类型(string)
var str:string = 'hello';

数组类型(array) ts中定义数组有两种方式
第一种：
    let arr1:number[] = [1,2,3,4]
    let arr2:string[] = ["js","golang"]
第二种：
    let arr3:Array<number> = [1,2,3]
第三种：
    var arrs:any[] = [1,'hello',false];

元组类型(tuple) 属于数组的一种,指定数组里面值的类型
let arr:[string,number,boolean] = ['hello',2,true];

枚举类型(enum)
enum 枚举名{
   标识符[=整型常数],
   标识符[=整型常数],
   ...
   标识符[=整型常数]
}
pay_staus  0 未支付， 1 支付 ， 2交易成功
flag       1表示true    -1表示false

enum Flag{success=1,error=-1}
var f:Flag = Flag.success
console.log(f);//1
eg:
   enum Color{red,blue,orange=5,green}
   var c:Color = Color.blue;
   var d:Color = Color.green;
   console.log(d);//6 这个值是基于 orange的基础上+1来的
   console.log(c);//输出1，如果没有赋值的话打印出对应值的索引值

任意类型 (any)
var num:any = 123;
num = 'str';
num = true;
用处：
    var oBox:any = document.getElementById('box');
    oBox.style.color = 'red';


null 和 undefined 其他(never类型)数据类型的子类型
var num:number;
console.log(num);//变量定义未赋值，是undefined，报错
var num:undefined;
console.log(num);//输出 undefined ；正确
var num:number|undefined;
num = 123;
console.log(num);//正确
var num:null;
num = 123;//会报错
num = null;//不报错
一个元素可能是 number类型可能是null可能是undefined
var num:number|null|undefined;
num = 123;//不会报错

void类型：typescript中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值。
//es5
function run(){
  console.log('run')
}
run();
//表示方法没有返回任何类型
function run():void{
  console.log('run')
}
//如果有返回值
function run():number{
  return 123
}

never 类型：是其他类型（包括null 和 undefined）的子类型，代表从不会出现的值
var a:undefined;
a = undefined;
 
var b = null;
b = null;

var a:never;
a = 123;//报错，错误写法
a = (()=>{
  throw new Error('错误')
})()

3、typescript中的函数

函数的定义：
//函数声明法  es5
   function run(){
      return 'run';
   }
//匿名函数  es5
var run2 = function(){
   return 'run2';
}
//ts中定义函数的方法
函数声明法：
   function run():string{
      return 'hello';
   }
匿名函数
   var run2 = function():number{
      return 123;
   }

//ts 中定义方法传参
   function getInfo(name:string,age:number):string{
       return `${name}---${age}`;
   }
   alert(getInfo('sunny',20);
  
   var getInfo = function(name:string,age:number):string{
       return `${name}---${age}`;//模板字符串
   }
   //没有返回值的方法
   function runs:void(){
      console.log('runs')
   }
   runs();

//方法可选参数
es5里面方法的实参和行参可以不一样，但是 ts 中必须一样，如果不一样就需要配置可选参数
function getInfo(name:string,age?:number):string{//注意在参数前面加上 问号 ?
   if(age){
      return `${name}----${age}`
   }else{
      return `${name}----年龄保密`
   }
}
console.log(getInfo('hello'));
//注意：可选参数必须配置到参数的最后面

//默认参数
es5里面没法设置默认参数，es6 和 ts中可以设置默认参数

function getInfo(name:string,age:number=20):string{

   if(age){
      return `${name}----${age}`
   }else{
      return `${name}----年龄保密`
   }
}
alert(getInfo('hello'));//hello----20

//剩余参数
function sum(a:number,b:number,c:number,d:number):number{
   return a+b+c+d;
}
sum(1,2,3,4);
三点运算符，接受行参传过来的值:
function sum(...result:number[]):number{
   var sums = 0;
   for(var i=0;i<result.length;i++){
       sums+=result[i];
   }
   return sums;
}
sum(1,2,3,4);
另外一种写法:
function sum(a:number,b:number,...result:number[]):number{
   var sums = =a+b;
}
sum(1,2,3,4,5,6);

//函数重载
Java中方法的重载，重载指的是两个或者两个以上同名函数，但他们的参数不一样，
这时会出现函数重载的情况
typescript中的重载，通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
ts为了兼容 es5 以及 es6重载的写法和Java中的区别。

//es5中出现同名方法，下面的会替换上面的方法
function css(config){
}
function css(config，value){
}
//ts 中支持方法的重载
function getInfo(name:string):string;
function getInfo(age:number):number;
function getInfo(str:any):any{
  if(typeof str==='string'){
     return 'i am'+str;
  }else{
     return 'age'+str;
  }
}
alert(getInfo('hello'));//i am hello.正确写法
alert(getInfo(20));//age 20. 正确写法
alert(getInfo(true));//错误写法

//箭头函数 es6
setTimeout(function(){
  
},1000)
setTimeout(()=>{},1000);//this 指向上下文

4、typescript里面的类继承

//es5 里面的类
//1.最简单的类
      function Person(){
         this.name = 'sunny';
         this.age = 18;
      }
      var p = new Person();
      alert(p.name);
//2.构造函数和原型链增加方法
      function Person(){
         this.name = 'sunny';
         this.age = 18;
         this.run = function(){
            alert(this.name+'running');
         }
      }
      //原型链上面的属性会被多个实例共享，构造函数不会
      Person.prototype.sex = 'man';
      Person.prototype.work = function(){
         alert(this.name+'working');
      }
      var p = new Person();
      p.run();
      p.work();
//3.类里面的静态方法
function Person(){
   this.name = 'sunny';//属性
   this.age = 20;
   this.run = function(){ //实例方法
     console.log(this.name+'running');
   }
}
Person.getInfo = function(){
   console.log('静态方法');
}
var p = new Person();
Person.getInfo();//调用静态方法
//4.es5里面的继承
function Person(){
  this.name = 'sunny';
  this.age = 20;
  this.run = function(){
    console.log(this.name+'running');
  }
}
Person.prototype.sex = 'man';
Person.prototype.work = function(){
   console.log(this.name+'working');
}
//web类继承 Person类（原型链+对象冒充的组合继承模式）
function Web(){
  Person.call(this);//对象冒充实现继承，Web继承Person
}
var w = new Web();
w.run();//对象冒充可以继承构造函数里面的属性和方法
w.work();//会报错，work is not a function。但是没法继承原型链上面的属性和方法

//5.原型链实现继承
function Web(){

}
Web.prototype = new Person();//原型链实现继承
var w = new Web();
w.run();//sunny running
w.work();//sunny working
原型链实现继承好处：可以继承构造函数里面的属性和方法，也可以继承原型链上面的属性和方法。
//6.原型链实现继承出现的问题：
function Person(name,age){
  this.name = name;
  this.age = age;
  this.run = function(){
    console.log(this.name+'running');
  }
}
Person.prototype.sex='man';
function Web(name,age){

}
Web.prototype = new Person();
var w = new Web('eve',20);
w.run();//undefined running。实例化子类的时候没法给父类传参

//7.原型链+构造函数的组合继承模式
function Web(name,age){
  Person.call(this,name,age);//对象冒充继承   实例化子类可以给父类传参
}
//8.原型链+对象冒充的另外一种方式
将 Web.prototype = new Person() 改成  Person.prototype 。

//////// typescript 中定义类
1.ts中类的定义
   class Person{
      name:string;//属性
      constructor(name:string){//构造函数    实例化类的时候触发的方法
         this.name = name;
      }
      run():void{
          console.log(this.name);
      }
      getName():string{
         return this.name;
      }
      setName(name:string):void{
         this.name = name;
      }
   }
   //实例化
   var p = new Person('sunny');
   p.run();
   console.log(p.getName());

2.ts中实现继承  extends , super
class Person{
   name:string;
   constructor(name:string){
      this.name = name;
   }
   run():string{
      return `${this.name}在运动`
   }
}
var p = new Person('王五');
console.log(p.run());//王五在运动

class Web extends Person{
   constructor(name:string){
      super(name);//初始化父类的构造函数
   }
   work(){
      console.log(`${this.name}在工作`)
   }
}
var w = new Web('李四');
console.log(w.run());//李四在运动
console.log(w.work());//李四在工作

问题：ts中继承的探讨 父类的方法和子类方法一致

3.类里面的修饰符
typescript 里面定义属性的时候提供了三种修饰符： 
public , 在类里面，子类，类外面都可以访问
protected,在类里面，子类里面可以访问，在类外部没法访问
private 在类里面可以访问，子类，类外部都没法访问
属性如果不加修饰符默认就是public。

4.静态属性 静态方法
class Person{
  public name:string;
  public age:number = 20;
  static sex = 'man';
  constructor(name){
    this.name = name;
  }
  run(){
    console.log(`${this.name}在运动`);
  }
  static print(){
    console.log('print 方法');//静态方法,  没法直接调用类里面的属性
    //除非 定义属性为静态属性才可
    console.log(Person.sex);//man
    //调用其他属性的话会报 undefined。
  }
}
var p = new Person('sunny');
p.run();
Person.print();
console.log(Person.sex);//man

5.多态：父类定义一个方法不去实现，让继承他的子类去实现，每一个子类有不同的表现
多态属于继承
class Animal{
  name:string;
  constructor(name:string){
    this.name = name;
  }
  eat(){
    console.log('吃的方法');//具体吃什么不知道。具体吃什么是由他的子类去实现，每一个子类的表现都不一样
  }
}
class Dog extends Animal{
   constructor(name:string){
     super(name)
   }
   eat(){
     return this.name +'吃肉';
   }
}
class Cat extends Animal{
   constructor(name:string){
     super(name);
   }
   eat(){
     return this.name+'吃老鼠';
   }
}

6.抽象方法
typescript中的抽象类，他是提供其他类继承的基类，不能直接被实例化。
用 abstract 关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。
abstract 抽象方法只能放在抽象类里面
抽象类和抽象方法用来定义标准。标准是 Animal 这个类要求他的子类必须包含 eat方法。

abstract class Animal{
   public name:string;
   constructor(name:string){
     this.name = name;
   }
   abstract eat():any;
}
var a = new Animal();//错误写法，没法直接实例化

class Dog extends Animal{
  //抽象类的子类必须实现抽象类里面的抽象方法
  constructor(name:any){
    super(name)
  }
  eat(){
    console.log(name+'吃粮食')
  }
}
var d = new Dog('小花花');
d.eat();//小花花吃粮食

5.typescript 中的接口

接口作用：
    在面向对象的编程中，接口是一种规范的定义，他定义了行为和动作的规范。


1.属性接口  （对json的约束）
function printLabel(label:string):void{
    
}
//对象
function printLabel(labelInfo:{label:string}):void{
  
}
printLabel({name:'sunny'});//错误写法
printLabel({label:'sunny'});//正确写法
//批量方法传入参数进行约束
interface 定义接口
//就是传入对象的约束，属性接口
interface FullName{
   firstNmae:string;//分号结束
   secondName:string;
}
function printName(name:FullName){
   //必须传入对象 firstName  secodName
   console.log(name.firstName+'------'+name.secondName);
}
function printInfo(info:FullName){
   console.log(info.firstName+'----'+info.secondName);
}
var obj = {//传入的参数必须包含  firstName 和 secondName
    age:20,
    firstName:'s',
    secondName:'u'
};
var info = {
    firstName:'e',
    secondName:'v'
};
printName(obj);
printInfo(info);


2.接口  可选属性
//传入的参数顺序可以不一样
interface FullName{
   firstName:string;
   secondName?:string;//这样子就可以选择传参还是不传入参数
}
function getName(name:FullName){
}
getName({
  firstName:'s'
})

例子：（jQuery）原生js封装Ajax
   interface Config{
      type:string;
      url:string;
      data?:string;
      dataType:string
   }
   function ajax(config:Config){
      var xhr = new XMLHttpRequest();
      xhr.open(config.type,config.url,true);
      xhr.send(config.data);
      xhr.onreadystatechange = function(){
         if(xhr.readyState==4&&xhr.status==200){
             console.log('success')
             if(config.dataType==='json'){
                 return JSON.parse(xhr.responseText);
             }else{
                 return xhr.responseText;
             }
         }
      }
   }
   ajax({
      type:'get',
      url:'xxx',
      dataType:'json',
      data:'name=sunny'
   })

3.函数类型接口：对方法传入的参数以及返回值进行约束
//加密的函数类型接口
interface encrypt{
   (key:string,value:string):string;
}
var md5:encrypt = function(key:string,value:string):string{
   //模拟操作
   return key+value;
}
//用法
console.log(md5('name','sunny'));

4.可索引接口，对数组，对象的约束（不常用）
//定义数组的方式
var arr:number[] = [1,2,3];
var arr1:Array<string> = ['11','22'];

interface UserArr {
   [index:number]:string
}
var arr:UserArr = ['aa','bb'];
console.log(arr[0]);//输出aa

//可索引接口  对对象的约束
interface UsereObj{
  [index:string]:string
}
var arr1:UserObj = {name:'sunny',age:20};

5.类类型接口： 对类的约束 和抽象类相似 (常用)
interface Aniaml{
   name:string;
   eat(str:string):void;
}
class Dog implements Animal{
   name:string;
   constructor(name:string){
     this.name = name;
   }
   eat(){
     console.log(this.name+'吃粮食');
   }
}
var d = new Dog('小黑');
d.eat();//小黑吃粮食

6.接口扩展，接口可以继承接口
interface Animal{
  eat():void;
}
interface Person extends Animal{
  work():void;
}
class Programmer{
  public name:string;
  constructor(name:string){
     this.name = name;
  }
  coding(code:string){
     console.log(this.name+code)
  }
}

class Web extends Programmer implements Person{
  constructor(name:string){
     super(name)
  }
  eat(){
     console.log(this.name+'喜欢吃馒头')
  }
  work(){
     console.log(this.name+'写代码')
  }
}
var w = new Web('sunny');
w.work();//sunny 写代码
w.coing('ts代码');//sunny 写ts代码

 6.typescript 中的泛型

泛型解决 类 接口 方法的复用性，以及对不特定数据类型的支持

//同时返回 string 类型和 number 类型
//any 放弃了类型检查，传入什么，返回什么。

function getData<T>(value:T):T{ //T表示泛型，具体什么类型是调用这个方法的时候决定的
  return value;
}
getData<number>(123);
getData<number>('123');//错误写法

//泛型类，比如有个最小堆算法，需要同时支持返回数字和字符串两种类型，通过类的泛型来实现
clas MinClass{
  public list:number[] = [];
  add(num:number){
     this.list.push(num);
  }
  min():number{
     var minNum = this.list[0];
     for(var i=0;i<this.list.length;i++){
        if(minNum>this.list[i]){
           minNum = this.list[i]
        }
     }
     return minNum;
  }
}
var m = new MinClass();
m.add(3);

//定义类的泛型
class MinClass<T>{
   public list:T[] = [];
   add(value:T):void{
     this.list.push(value);
   }
   min():T{
     var minNum = this.list[0];
     for(var i=0;i<this.list.length;i++){
       if(minNum>this.list[i]){
          minNum = this.list[i]
       }
     }
     return minNum;
   }
}
var m1 = new MinClass<number>();//实例化类，并且指定了类的T代表的类型是number
m1.add(1);
m1.add(2);
m1.add(3);
console.log(m1.min());//1

//泛型接口
//这个是函数类型接口
interface ConfigFn(){
  (value1:string,value2:string):string;
}
var setData:ConfigFn = function(value1:string,value2:string):string{
   return value1+vlaue2;
}
setData('name','sunny');

//改造后
interface ConfigFn{   //换种写法： interface ConfigFn<T>{}
  <T>(value:T):T;
}
var getData:ConfigFn = function<T>(value:T):T{
  return value;
}
getData<string>('sunny');

//换种写法：
function getData<T>(value:T):T{};
var myGetData:ConfigFn<string>=getData;
myGetData('20');

例子：//定义一个user类这个类的作用是映射数据库字段，然后定义一个mysqldb的类，这个类用于操作
数据库
class User{
  username:string | undefined;
  password:string | undefined
}
class MysqlDb<T>{
  add(user:T):boolean{
    console.log(user,'user');//zhangsan 123456
    return true;
  }
}
var u = new User();
u.username = 'zhangsan';
u.password = '123456';
var Db = new MysqlDb<User>();
Db.add(u);

 7.typescript 类型，接口，类，泛型综合使用-typescript封装统一操作mysql mongodb mssql底层库

//定义一个操作封装数据库的库支持mysql
//约束统一的规范，以及代码重用
interface DBI<>T{
  add(info:T):boolean;
  update(info:T,id:number):boolean;
  delete(id:number):boolean;
  get(id:number):any[]
}
//定义一个操作mysqo数据库的类,要实现泛型接口，这个类也应该是一个泛型类
class MysqlDb<T> implements DBI<T>{
  
}
//定义一个操作mysql的数据库的类
calss