学习typeScript的总结

关于ts ，以后是肯定是用到的 所以提前了解掌握一下基本的用法，节约以后的学习成本。

1， 数据类型 

// 1 布尔类型
    // var flag:boolean =true;
    // flag=false; // 正确
    // flag=123; //报错

// 2，string 类型    
   // 规则同上

// 3， number 类型
   // 规则同上

// 4. 数组 ts中定义数组有两种方式
//    // （1） 
//     var arr:number[] = [1,2,4] //定义数组 指定数据全部都是数字类型
//     var arr:any[]= [1,2,4] //定义数组 指定数据任意类型
//    // （2） 
//     var arr:Array<number> = [1,2,4] //定义数组 指定数据全部都是数字类型

// 5,元祖类型  属于数组的一种  但是元素类型必须一一对应  
    //  var arr:[string,number] = ['123', 2];

// 6 ,枚举类型   使得代码语意化
  //enum flag {success,error}   
  // console.log(flag.success,flag.error)  //  0 1 一般不赋值状态下在按照下标自然排列 
 
//   enum flag {success=3,error}   
//   console.log(flag.success,flag.error)  //  3 4  被重新赋值 后面的值 就会按照前面的数值去递增 

// enum flag {success='hello',error='world'}   
//   console.log(flag.success,flag.error)  // helloworld  语义化

// enum flag {success,error}   
//   console.log(flag[0],flag[1])  // 双向映射

// 7, any类型  默认状态下不 设置值 那么就是任意类型
//  var dom =document.getElementById("some");
//  console.log(dom)

// 8， undefined null 类型  是 never 类型的子类型 
  // 赋值undefined 或null 就只能是 undefined 或null
// 9 viod 类型 作为函数 没有返回值的写法
    //   function FUNC():void{
    //   }
    // viod 只能用来赋值 fun  定义变量 的话那么没有意义 只能复制undefined 或null
  
// 10 never类型     不常用
  // （1） 不存在的值
  // （2）没有终点的值
  // （3） never 是所有类型的子集  可以赋值给任何类型，但是不能够被其他类型赋值 
//   var a:never;
//   a= (()=>{
//       throw new Error("111");
//   })()

2， 函数的使用 

// 函数  
 //1, 所有函数必须规定返回值类型
//  function action():void{  //没有返回值  
//  }
//  function action1(name:string,age:number):any{ 
//     return `${name}+' '+${age}` 
// }
// action1('zhangsan',20)

// 2, 配置可选参数  ？  顺序不能反  可选参数必须放到最后
//  function action1(name:string,age?:number):any{ 
//     return `${name}+' '+${age}` 
// }
// console.log(action1('zhangsan'))

// 3, 默认参数
//  function action1(name:string,age=20):any{ 
//     return `${name}+' '+${age}` 
// }
// console.log(action1('zhangsan'))
// 4 剩余参数 
  // ... 有两种功能（1） 对象和数组的解构 （2） 接受 参数 
//    function fun(...result:number[]){  // 入参必须是数字
//       console.log(result)
//    }
//    fun(1,2)
// 5，重载 
// function fun(name:string):string;
// function fun(name:number):number;
// function fun(name:any):any{
//     if(typeof name==="number"){
//        return 0
//     }else{
//         return '2'
//     }
// }
// console.log(fun(1))
//方法3重载了方法1和2 

3 类 

/ 类 
//1. 基本使用
    // class Cat {
    //     name:string;
    //     constructor(name:string){
    //         this.name=name
    //     }
    //     get(){
    //      return  this.name
    //     }
    //     set(name:string){
    //         this.name=name
    //     }
    // }
    // var xiaoju = new Cat("橘猫");
    // console.log(xiaoju.get())
    // xiaoju.set('蓝猫')
    // console.log(xiaoju.get())

// 2 继承 
 // 父子都有 同名方法 子类覆盖父类  
//  class Cat {
//         name:string;
//         constructor(name:string){
//             this.name=name
//         }
//         run():string{
//           return this.name +"walk"
//         }
//     }
//  class Xiaojumao extends Cat {
//        constructor(name:string){
//            super(name)
//        }
//  }

// var xiaohei = new Xiaojumao("蓝猫")
// console.log(xiaohei.run())
 

// 3 类的修饰符
 // public  公类属性 类里类外都能访问 默认不写 默认public 
//  class Cat {
//         public name:string;
//         constructor(name:string){
//             this.name=name
//         }
//        get(){
//            return this.name
//        }
//     }
//  class Xiaojumao extends Cat {
//        constructor(name:string){
//            super(name)
//        }
//  }

// var xiaohei = new Xiaojumao("蓝猫")
// console.log(xiaohei.get())
 

 //protected  保护类型 在类（子父类 ）都可以访问
//  class Cat {
//     protected  name:string;
//     constructor(name:string){
//         this.name=name
//     }
//    get(){
//        return this.name
//    }
// }
// class Xiaojumao extends Cat {
//    constructor(name:string){
//        super(name)
//    }
// }

// var xiaohei = new Xiaojumao("蓝猫")
// console.log(xiaohei.get())  // 可以
// console.log(xiaohei.name)   // 报错


 //private    保护类型 只在父类都可以访问
//  class Cat {
//     private  name:string;
//         constructor(name:string){
//             this.name=name
//         }
//        get(){
//            return this.name
//        }
//     }
//     class Xiaojumao extends Cat {
//        constructor(name:string){
//            super(name)
//        }
//         print(){
//             return this.name  //  子类调用父类保护类型 直接报错
//         }
//     }
    
//     var xiaohei = new Xiaojumao("蓝猫")
   // 4 静态属性静态方法  
// 方法分为实例方法和静态方法 实例方法 需要实例化以后才能调用，静态方法直接调用
//   class Cat {
//     static age:number= 0
//     static action(){console.log(111)}
//         name:string;
//         constructor(name:string){
//             this.name=name
//         }
//         get(){
//          return  this.name
//         }
//         set(name:string){
//             this.name=name
//         }
        
//     }
//     Cat.action()
//     console.log(Cat.age)

//  5 多态 抽象 
 // 多态属于继承  父类 去定义方法 不去实现方法 子类去实现方法 有不同的表现
 // 抽象类 abstract 父类 作为基类去定义方法 不能被直接实现  子类去实现方法 有不同的表现
//  父类定义了抽象方法 那么子类必须去实现   abstract父类要写两遍 
// abstract class Cat {
//     abstract eat():string
// }
// class Xiaohei extends Cat {
//     eat(){
//         console.log("吃老鼠")
//         return '吃老鼠'
//     }
// }
// class Xiaolan extends Cat {
//     eat(){
//         console.log("吃鱼")
//         return '吃鱼'
//     }
// }
// var a=new Xiaohei();
// a.eat()
// var b=new Xiaolan();
// b.eat()

4. 接口

// 接口  对批量方法参数传入 约束 
// 接口基本实现  接口内的成员顺序可以不一样
// interface printInfo {
//     firstname:string;
//     secondname:string;
// }
// function printname(info:printInfo):void{
//   console.log(info.firstname+'--'+info.secondname)
// }
// printname({
//   firstname:'zhang',
//   secondname:'san'
// })

// 接口内的可选参数 ？
//  interface printInfo {
//         firstname:string;
//         secondname?:string;
//     }
//     function printname(info:printInfo):void{
//       console.log(info.firstname+'--'+info.secondname)
//     }
//     printname({
//       firstname:'zhang',
//     })

// 函数类型接口 
// interface funface {
//        (name:string,age:string):string
// }
// var md5:funface = function (name:string,age:string):string{
//       return name +age
// }
// console.log(md5('zhang','san'));

//  array类型接口 
// interface arrface {
//        [index:number]:string
// }
// var arr:arrface=['1','2','3'] 
// console.log(arr);

5， class的接口 和实现  implements

// class 类型接口 

// interface classface{
//     name:string;
//     eat(name:string):void
// }
// class Dog implements classface{
//     name:string = 'xiaohuang';
//     eat(){  // 参数可以不传 但是返回值必须对应上
//         console.log(this.name)
//     }
// }
// var xiaohuang = new Dog();
// xiaohuang.eat()


// 接口之间的继承 
//  interface personface {
//      eat():void;
//  }
//  interface progrommerface extends personface{
//        coding():void
//  }

//  class Xiaowang implements progrommerface {
//      name:string;
//      constructor(name:string){
//          this.name = name;
//      }
//      eat(){
//       console.log(this.name+'吃一整天')
//      }
//      coding(){
//         console.log(this.name+'码一整天')
//      }
//  }
//  var xiaowang = new Xiaowang('小王')
//  xiaowang.eat()
//  xiaowang.coding()

//  稍微复杂一点的接口继承 和 类继承混合
 
//  interface personface {
//          eat():void;
//      }
//      interface progrommerface extends personface{
//            coding():void
//      }
//      class Firstprogrommer {
//             name1:string
//           constructor(name:string){
//             this.name1 = name;
//           }
//           read(){
//               console.log(this.name1 + '读一整天的技术书籍' )
//           }
//      }
    
//      class Xiaowang extends  Firstprogrommer implements progrommerface {
//          name:string;
//          constructor(name:string){
//              super(name)
//              this.name = name;
//          }
//          eat(){
//           console.log(this.name+'吃一整天')
//          }
//          coding(){
//             console.log(this.name+'码一整天')
//          }
//      }
//      var xiaowang = new Xiaowang('小王')
//      xiaowang.eat()
//      xiaowang.coding()
//      xiaowang.read()

6 ， 泛型 

// 泛型  T 传入的参数和返回的参数数据类型一致 
// 基本实现
// function getInfo<T>(value:T):T{
//   return value
// }
//  console.log(getInfo<string>(1))
//在class中实现
//   class GetMin {
//       list:number[]=[];
//       add(num:number){
//           this.list.push(num)
//       }
//       min(){
//           let value=this.list[0];
//           for(let i=0;i<this.list.length;i++){
//               if(value>this.list[i]){
//                 value = this.list[i]
//               }
//           }
//           return value
//       }
//   }
//  var mn = new GetMin();
//  mn.add(5);
//  mn.add(22);
//  mn.add(33);
//  mn.add(444);
//  console.log(mn.min())


//   class GetMin<T>{
//       list:T[]=[];
//       add(num:T){
//           this.list.push(num)
//       }
//       min():T{
//           let value=this.list[0];
//           for(let i=0;i<this.list.length;i++){
//               if(value>this.list[i]){
//                 value = this.list[i]
//               }
//           }
//           return value
//       }
//   }
  // 比较数值的大小
        //  var mn = new GetMin<number>();
        //  mn.add(5);
        //  mn.add(22);
        //  mn.add(33);
        //  mn.add(444);
        //  console.log(mn.min())
// 比较字符串的大小
        // var mn = new GetMin<string>();
        // mn.add('5');
        // mn.add('22');
        // mn.add('33');
        // mn.add('444');
        // console.log(mn.min())


//接口实现泛型 
// interface funface {
//     <T>(value:T):T
// }
// var fun :funface = function<T>(value:T):T{
//   return value 
// }
// console.log(fun<string>('123'))
// console.log(fun<number>(123))

// 接口实现泛型2
// interface funface<T>{
//     (value:T):T
// }
// var fun:funface<string>= function<T>(value:T):T{
//   return value
// }
// console.log(fun('123'))  // 正确
// console.log(fun(123))  // 报错