typescript

1.什么是typescript， js的超集

2.为什么需要typescript ，有类型约束 适合中大型项目，很方便

3.ts环境搭建

  • npm i typescript -g tsc —version 能看到版本号就是安装好了
  • tsc —init 会产生一个 tsconfig.json文件
  • “outDir” : “./dist”
  • “rootDir”: “./src”
  • 在src .ts下写代码
  • dist/运行.ts文件

类型的约束

  • string \ number \ boolean \ null :object类型，代表空，代表一个空对象指针 \ undefined : undefined 类型 未定义 \ any 任何类型，一维，放弃了类型的约束

自动类型推断

  • a=’abc’

数组的约束

  • let arr:number[] =[1,2,3,4];
  • let arr2:Array=[5,6,7];

元组 Tuple约束数组中的每一个元素[number,string] 类似如此

  • let arr3:[boolean,string]=[false,’www’];

any 任何类型，意味放弃了类型的约束

void 表示没有任何返回值

联合类型

  • | let id= string|number;

交叉类型

  • 1、interface IPerson {

    id:number,
    name:string
    }

  • 2、interface ICoder{

    lang:string
    }

  • 3、type IDev = IPerson & ICoder;

  • 4、let zst:IDev ={id:111,name:’zst’,lang:’js’};

枚举

  1. enum route {
  2.        add=1,
  3.        code=404,
  4.        every=500
  5.    }
  6.    可以通过route.add拿到1；

断言 assert 变量 as 类型 <类型>变量

  1. function  getLength(a:string|number){
  2.                 // if(typeof a==="string"){
  3.                 //     return a.length;
  4.                 // }
  5.                 // else{
  6.                 //     return a.toString().length
  7.                 // }
  8.                 //return (a as string).length
  9.                 //return (<string>a).length
  10.         if((<string>a).length){
  11.             return (a as string).length
  12.         }
  13.         else{
  14.             return a.toString().length
  15.         }
  17.         }
  19.     console.log(getLength(123));
  21.     var el:HTMLDivElement|null=null;
  22.     el=document.getElementById("box") as HTMLDivElement;
  24.     console.log(el.innerHTML)

泛型 接口泛型 函数泛型

  1. function fun<T>(x:T):T{
  2.             return x;
  3.         }
  4.         var d=fun<string>("555")
  5.         //泛型类
  6.         class Pereson<T>{  //泛型类
  7.         id:T
  8.         name:string
  9.         constructor(id:T,name:string){
  10.             this.name=name;
  11.             this.id=id
  12.         }
  13.     }
  15.     var p=new Pereson<number>(11,"sss")

class

  1. 1.类的构造函数的重载
  2.    class Test{
  3.        name:string,
  4.        age:number,
  5.        constructor(name:string,age:number)
  6.        constructor(name:string)
  7.        constructor(name:any='',age:any=18){
  8.            //构造函数
  9.            this.name=name;
  10.            this.age=age;
  11.        }
  12.    }
  13.    2.setter
  14.      (public) setName(参数：类型){
  15.          this:类的私有属性=参数
  16.      }
  17.      getter
  18.      getName(){
  19.          return this.name;
  20.      }
  21.    3.权限修饰符
  22.       private 类的内部才能访问
  23.       public （默认的） 类的内部外部子类都可以访问
  24.       protected 受保护的 类和子类可以访问，外部不可以访问；
  25.    4.类的静态成员
  26.    5.抽象类
  27.       关键字 abstract
  29.       abstract class Animal{
  30.           //抽象类不能实例化，继承抽象类实现抽象方法
  31.           abstract say():void;
  32.       }
  34.       class Cat extends Animal{
  35.           say():void{
  37.           }
  38.       }
  1. interface IProgramer extends IPerson {
  2.       当前定义属性
  3.   }

函数的类型约束

  1. function 函数的名字（参数，类型.....）:返回值的类型{
  2.        return 返回值的类型
  3.    }
  4.    let mySum :(x:number,y:number)=>number=function(x:number,y:number):number{
  5.        return x+y;
  6.    }
  7.    //也可以简写为
  8.    let mySum = function (x:number,y:number):number{
  9.        //自动推断
  10.        return x+y;
  11.    }
  12.    //函数接口
  13.    interface IFun{
  14.        (x:number,y:number):number;
  15.    }
  16.    let sum3:IFun=(x:number,y:number):number=>x+y;
  17.    //可以简写为
  18.    let sum2 = (x:number,y:number):number =>x+y ;//自行判断
  19.    //函数参数的默认值
  20.    function show(name:string,age:number=20):string{
  21.        return "name"+name+"age"+age
  22.    }
  23.    //函数的可选参数
  24.    function showinfo(name:string,age?:number){
  25.        if(age){
  26.            return `nume${name}age${age}`
  27.        }else{
  28.            return `name${name}`
  29.        }
  30.    }
  31.    //函数的默认参数
  32.    function show (name:string ,age:number=20):string{
  33.        return 'name':name+","+age+'age'
  34.    }
  35.    //函数的剩余参数
  36.    function sum(...arr:number[]){
  37.        return arr.reduce((a,b)=>a+b)
  38.    }
  39.    //函数重载
  40.     function sum9(x:number,y:number):number
  41.     function sum9(x:string,y:string):string
  42.     function sum9(x:any,y:any):any{
  43.         if(typeof x==="string"){
  44.             return x+"---"+y
  45.         }
  46.         else{
  47.             return x+y;
  48.         }
  49.     }
  50.    //接口对函数的约束
  51.    interface Ifun {
  52.        (x:number,y:number):number
  53.    }
  54.    let sum3:Ifun =(x:number,y:number):number=>x+y;
  55.    可简写为
  56.    let sum3=(x:number,y:number):number=>x+y;
  57.    函数参数的默认值

修饰器模式：设计模式 。 给代码打扮

  • 函数和 class类 ：属性 方法（功能）
  • 添加功能 (函数形式去添加功能)
  1. //1.装饰器本身就是一个函数
  2.    //2.它的参数是构造函数
  3.    //3.可以通过这个构造器去添加修饰的方法
  4.    //4.通过@符号调用
  8.    //修饰器虽然是函数，但是不能以函数的方式调用
  9.    //通过包装修饰器，把他包装在一个函数中
  10.    function testDecorator (flag){
  11.        function decorFn(constructor:any){
  12.          constructor.prototype.getName=()=>{
  13.                return '我是修饰的方法'
  14.            }
  15.          }
  16.    }
  18.    @testDecorator(true)
  19.    class Preson {
  20.        myFn(){
  22.        }
  23.    }
  24.     const person =new Person();
  25.     (preson  as  any).getName();
  26.        function decorateClass(t:Function){  //类装饰器 本质是一个函数 不修改类的代码的前提下，可以给类增加成员
  27.                                                 //target 装饰的类
  28.               t.prototype.school="bw"
  29.           }
  31.         @decorateClass
  32.         class Pereson<T>{  //泛型类
  33.             id:T
  34.             name:string
  35.             constructor(id:T,name:string){
  36.                 this.name=name;
  37.                 this.id=id
  38.             }
  39.         }
  41.         var p=new Pereson<number>(11,"sss")
  42.         console.log(p.school)
  • vue ts 修饰器模式实现

如果ts中使用es6的东西，tsconfig中的“target”改成es6

建立能使用类型的地方，不要用any，any在你不知道类型的时候选择，放弃了约束

对象的约束要用interface而不是object

接口和类的结合使用

  1. interface IGo{
  2.       go(type:string):void
  3.   }
  5.   class Person 
  6.      //属性(private类的内部可以拿到)name :'zs'和方法（public  默认权限，都可以拿到）
  7.      //protected 类和子类可以拿到  类的外部拿不到
  8.    getter
  9.      getName():string{
  10.          return this.name
  11.      }
  12.     setter
  13.       setName(name:string){
  14.           this.name=name;
  15.     }
  17.     //接口定义的是规范，方法定义的是实现
  18.     interface |xxx{
  19.         exam :(type:string):void  //void可以没有返回值
  20.     }
  21.     class Xxx implements |Xxx{
  22.         exam:(type:string):void{
  24.         }
  25.     }