TypeScript学习总结

向右看齐 2021-09-08 22:12 362阅读 0赞

# TypeScript简单说明 #

TypeScript 是由微软开发的一款开源的编程语言，是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发。添加了类型系统的 JavaScript，适用于任何规模的项目。

## 什么是 TypeScript？ ##

TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目。  
TypeScript 是一门静态类型、弱类型的语言。  
TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性。  
TypeScript 可以编译为 JavaScript，然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。  
TypeScript 拥有很多编译选项，类型检查的严格程度由你决定。  
TypeScript 可以和 JavaScript 共存，这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。  
TypeScript 增强了编辑器（IDE）的功能，提供了代码补全、接口提示、跳转到定义、代码重构等能力。  
TypeScript 拥有活跃的社区，大多数常用的第三方库都提供了类型声明。  
TypeScript 与标准同步发展，符合最新的 ECMAScript 标准（stage 3）。

## 特性 ##

1.  类型系统

「类型」是其最核心的特性。

类型系统按照「类型检查的时机」来分类，可以分为动态类型和静态类型。

动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。
    
    静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。

TypeScript 是弱类型

类型系统按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型

1.  适用于任何规模

## 配置 ##

tsc --init 生成tsconfig.json  
vscode 任务-运行任务 tsc：监视-tsconfig.json

## 运行项目 ##

第一方式：
    
    1 命令 在文件目录下
    
        tsc hello.ts 编译
        这时可以看到目录下生成 hello.js 里面内容就是刚刚创建的
    
    2.执行 node hello.js  这时就可以执行js内容 
    
        输出：hello Yee
    
    第二种 利用开发工具自动编译.ts文化
    
    在项目cd E:\gitProgram\gitee\tsc
    
    1 生产配置文件tsconfig.json
    tsc --init 
    
    修改tsconfig.json文件：     "outDir": "./js",     
    
    
    2 vscode 工具：终端-》运行任务-》TypeScript-》tsc 监视 tsconfig.json  
     生产js/index.js 文件

# 语法 #

## 数据类型 ##

原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt

*  boolean

let isDone: boolean = false;  
注意，使用构造函数 Boolean 创造的对象（let createdByNewBoolean: boolean = new Boolean(1) ）不是布尔值：

*  number  
    let decLiteral: number = 20;//十进制  
    let hexLiteral: number = 0x14; //十六进制0x  
    let binaryLiteral: number = 0b10100;//二进制 0 1  
    let octalLiteral: number = 0o24;//八进制
 *  string  
    let myName: string = ‘Tom’;  
    // 模板字符串  
    let sentence: string = `Hello, my name is ${myName}.`
 *  void  
    空值 void 类型 一般用于 定义方法的时候没有返回值  
    void 表示没有任何返回值的函数,声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null
 *  元组类型tuple  
    let arr:\[string,number,boolean\] = \[“tes”, 1, false\]
 *  枚举类型enum

enum Color { 
        red,
        blue,
        yellow = 5,
    }
    let color:Color = Color.yellow // 5
    color = Color.yellow // 0， 未赋值则输出下标

*  任意类型any  
    任意值（Any）用来表示允许赋值为任意类型。  
    any 类型，则允许被赋值为任意类型。  
    let myFavoriteNumber: any = ‘seven’;  
    myFavoriteNumber = 7;  
    声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。  
    变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型  
    let something;  
    something = ‘seven’;  
    something = 7;  
    用处：**不知道变量得类型时，可以定义任意类型**  
    var oBox:any = document.getElementById(‘box’)  
    oBox.style.color=‘red’ //修改颜色
 *  null和undefined是其他（never）类型的子类型  
    与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量,而 void 类型的变量不能赋值给 number 类型的变量。nerver的变量只能被nerver类型所赋值

let u: undefined = undefined;
    let n: null = null;
    // 这样不会报错
    let num: number = undefined;
    // 这样也不会报错
    let u: undefined;
    let num: number = u;
        let u: void;
    let num: number = u; //报错

## 函数 ##

两种常见的定义函数的方式——函数声明（Function Declaration）和函数表达式（Function Expression）

1. es5 ：
    // 函数声明（Function Declaration）
    function sum(x, y) { 
        return x + y;
    }
    
    // 函数表达式（Function Expression）
    let mySum = function (x, y) { 
        return x + y;
    };
    
    2. ts 函数声明（ts）
    function sum(x: number, y: number): number { 
        return x + y;
    }
    注意，输入多余的（或者少于要求的）参数，是不被允许的：
    function sum(x: number, y: number): number { 
        return x + y;
    }
    sum(1, 2, 3);//错误
    sum(1);//错误
    
    3. ts 函数表达式（ts）
    let mySum = function (x: number, y: number): number { 
        return x + y;
    };
    
    let mySum: (x: number, y: number) => number = function (x: number, y: number): number { 
        return x + y;
    };

注意：不要混淆了 TypeScript 中的 => 和 ES6 中的 =>  
在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。  
在 ES6 中，=> 叫做箭头函数，

// 函数声明
    function run():string { 
        return '123'
    }
    
    // 匿名表达式
    var run2 = function():string { 
        return '123'
    }
    
    // ts中定义方法传参
    function getInfo(name: string, age: number):string { 
        return `${ name}:${ age}`
    }
    
    // 方法可选参数(age可传，可不传)
    // 可选参数要放在所有参数的最后
    function getInfo(name: string, age?: number):string { 
        if (age) { 
            return `${ name}:${ age}`
        }
        return `${ name}`
    }
    
    // 默认参数
    function getInfo(name: string, age: number = 20):string { 
        if (age) { 
            return `${ name}:${ age}`
        }
        return `${ name}`
    }
    
    // 剩余参数（基于三点运算符）
    function sum(a: number, b:number, c:number, d:number):number { 
        return a + b + c + d;
    }
    可改为
    function sum(a: number, ..res: number[]):number { 
     var sum =a;
        for(var i =0;i<arr.length;i++){ 
            sum +=arr[i]
        }
        return sum
    }
    sum(1,2,3,4,5)// 这边就会默认a 传的是1 ，其他的剩下 都是arr 的值

补充：

### 用接口定义函数的形状 ###

interface SearchFunc \{  
(source: string, subString: string): boolean;  
\}  
let mySearch: SearchFunc;  
mySearch = function(source: string, subString: string) \{  
return source.search(subString) !== -1;  
\}  
采用函数表达式|接口定义函数的方式时，对等号左侧进行类型限制，可以保证以后对函数名赋值时保证参数个数、参数类型、返回值类型不变。

### 重载 ###

js 是面对对象的语言，它是没有重置的。  
ts中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的。  
ts 为了兼容es5以及es6重载的写法。

1.  es5中 出现同名方法，下面会替换上面的方法  
    function css(config)\{\}  
    function css(config,value)\{\}
2.  ts函数重载

function getInfo(name: string): string;
    function getInfo(age: number): number;
    
    function getInfo(arg: any): any { 
      return 123;
    }

## 类 ##

### es5 的类 ###

1. 简单的类
    function Person(){ 
        this.name ='张三'
        this.age=20
    }
    var p =  Person()
    alert(p.name)
    
    2.构造函数和原型链里面的增加方法
    
    构造函数增加方法
    function Person(){ 
        this.name ='张三' //属性
        this.age=20
        this.run =function(){ //实例方法  是需要new 实例化 才可以
            alert(this.name+'在运动')
        }
    }
    原型链里面的增加方法(原型链上面的属性会被多个实例共享，构造函数不会)
    Person.prototype.age='男'
    Person.prototype.work = function(){ //方法
        alert(this.name+'在工作')
    }
    var p = new Person()
    alert(p.name)
    p.run()
    p.work()
    
    3. 静态方法（基于2的基础）
        Person.getInfo = function(){ ....}
    
        调用静态方法
        Person.getInfo()
    
    静态方法调用不需要new  实例化 ，
    
    4. es5里面的继承
    function Person(){ 
        this.name ='张三' //属性
        this.age=20
        this.run =function(){ //实例方法  是需要new 实例化 才可以
            alert(this.name+'在运动')
        }
    }
    Person.prototype.age='男'
    Person.prototype.work = function(){ //方法
        alert(this.name+'在工作')
    }
    Web类 继承Person继承 
    
    a. 对象冒充继承方式
    function Web(){ 
        Person.call(this)//对象冒充实现继承
    }
    var w =new Web()
    w.run()
    w.work()//错误
    
    注意：对象冒充可以继承构造函数的属性和方法，但是不能继承原型链的属性和方法
    
    b . 原型链继承
    function Web(){ }
    Web.prototype =new Person();//原型链实现继承方法
    var w =new Web()
    w.run()
    w.work()
    
    注意：原型链实现继承：可以继承构造函数的属性和方法，也可以继承原型链上的属性和方法，但是实例化子类的时候 没法给父类传参
    
    如问题：
    function Person(name,age){ 
        this.name =name
        this.age=age
        this.run =function(){ //实例方法  是需要new 实例化 才可以
            alert(this.name+'在运动')
        }
    }
    
    Person.prototype.age='男'
    Person.prototype.work = function(){ //方法
        alert(this.name+'在工作')
    }
    
    
    var w =new  Person('张三',20)
    w.run()//张三 在运行
    
    
    现在用继承后
    function Web(name,age){ }
    Web.prototype =new Person();//原型链实现继承方法
    var w =new Web('王一',20)
    w.run()// undefined在运行
    
    所以 可以看出： 使用原型链实现继承后，实例化子类的时候 没法给父类传参
    
    
    c. 原型链+对象冒充的组合继承模式(推荐)
    
    
    function Person(name,age){ 
        this.name =name
        this.age=age
        this.run =function(){ //实例方法  是需要new 实例化 才可以
            alert(this.name+'在运动')
        }
    }
    
    Person.prototype.age='男'
    Person.prototype.work = function(){ //方法
        alert(this.name+'在工作')
    }
    
    function Web(name,age){ 
        Person.call(this,name,age)//对象冒充实现继承 实例化子类可以给父类传参
    }
    
    Web.prototype =new Person(); 或者是 Web.prototype =Person.prototype ; //原型链实现继承方法
    
    var w =new  Person('赵四',20)
    
    w.run()//赵四 在运行
    w.work()//赵四 在工作

### ts 中定义类 ###

class Person{ 
        name:string;//属性 前面省略了public 关键词
        constructor(n:string){ //构造函数 实例化类的时候触发的方法
            this.name=n
        }
        getName():void{ 
            alert(this.name);
        }
        setName(name:string):void{ 
            this.name =name
        }
    }
    
    var p  = new Person('张三')
    p.getName()
    
    
    （1）继承 extends  super 配合使用
    
    1.继承
    
    class Web extends Person{ 
        constructor(name:string){ 
           super(name)// 初始化父类的构造函数
        }
    }
    
    var w =new Person('隶属')
    w.getName() //隶属
    
    2. ts 中继承的探讨 父类的方法和子类的方法名一致时,是调用子类的方法
    
    class Web extends Person{ 
        constructor(name:string){ 
           super(name)// 初始化父类的构造函数
        }
        work(){ 
            alert(this.name);
        }
        getName():void{ 
            alert(this.name+'在运动');
        }
    }
    
    var w =new Web('张一')
    // w.getName()
    
    // w.work()
    
    w.getName()//张一在运动
    
    
    （2） 类里面的修饰符 ts里面定义属性的时候给我们提供了 三种修饰符
    
    public： 公有的  在类里面、子类、类外面都可以访问
    
    private：  私有  在类里面可以访问，在子类里面，类外部没法访问
    
    protected：保护类型   在类里面、子类里面可以访问，在类外部没法访问
    
    属性如果不加修饰符的话，默认是公有public
    
    1. public 公有的  在类里面、子类、类外面都可以访问
    
    class Person{ 
        public name:string;//属性 前面省略了public 关键词
        constructor(n:string){ //构造函数 实例化类的时候触发的方法
            this.name=n
        }
        getName():void{ 
            // 类里面可以访问
            alert(this.name);
        }
        setName(name:string):void{ 
            this.name =name
        }
    }
    class Web extends Person{ 
        constructor(name:string){ 
           super(name)// 初始化父类的构造函数
        }
        work(){ 
            alert(this.name);
        }
        getName():void{ 
            alert(this.name+'在运动');
        }
    }
    
    var w =new Web('张一')
    //子类 Web 的方法 work 也可以访问name
    w.work()
    //类外面都可以访问
    var p  = new Person('张三')
    console.log(p.name)
    
    
    2. protected：保护类型   在类里面、子类里面可以访问，在类外部没法访问
    
    class Person{ 
        protected name:string;//属性 
        constructor(n:string){ //构造函数 实例化类的时候触发的方法
            this.name=n
        }
        getName():void{ 
            // 类里面可以访问
            alert(this.name);
        }
        setName(name:string):void{ 
            this.name =name
        }
    }
    class Web extends Person{ 
        constructor(name:string){ 
           super(name)// 初始化父类的构造函数
        }
        work(){ 
            console.log('protected：保护类型 ----',this.name);
        }
        getName():void{ 
            alert(this.name+'在运动');
        }
    }
    
    var w =new Web('张一')
    //子类 Web 的方法 work 也可以访问name
    w.work()//protected：保护类型 ---- 张一
    
    // //类外面都可以访问
    var p  = new Person('张三')
    // console.log(p.name)//报错
    
    
    3.private：  私有  在类里面可以访问，在子类里面，类外部没法访问
    
    class Person{ 
        private name:string;//属性 
        constructor(n:string){ //构造函数 实例化类的时候触发的方法
            this.name=n
        }
        getName():void{ 
            // 类里面可以访问
            alert(this.name);
        }
        setName(name:string):void{ 
            this.name =name
        }
    }
    class Web extends Person{ 
        constructor(name:string){ 
           super(name)// 初始化父类的构造函数
        }
        work(){ 
            console.log('protected：保护类型 ----',this.name);
        }
        getName():void{ 
            alert(this.name+'在运动');
        }
    }
    
    var w =new Web('张一')
    //子类 Web 的方法 work 也可以访问name
    w.work()//报错
    
    // //类外面都可以访问
    var p  = new Person('张三')
    console.log(p.name)//报错
    
    （3） 类的静态属性 静态方法（有 static 就是静态方法）
    
    1. es5 静态属性 静态方法/实例方法
    
    function Person(){ 
        this.work = function(){ //实例方法： 实例方法调用，必须var  p  = new Person() p.work()
    
        }
        
    }
    Person.name ='张三'//静态属性
    Person.run = function(){ //静态方法
    
    }
    
    var  p  = new Person()
    Person.run()//静态方法调用
    
    2. ts 静态属性 静态方法/实例方法
    
    class Person{ 
        name:string;//属性 
        static age:number=20;
        constructor(n:string){ //构造函数 实例化类的时候触发的方法
            this.name=n
        }
        work(){ //实例方法 实例方法调用，必须var  p  = new Person() p.work()
            console.log('ts 实例方法：',this.name+'在工作')
        }
        static print(){ // 含有 static 就是静态方法
            console.log('ts 静态方法：') // 静态方法调用  Person.print()  
            // console.log('ts 静态方法：',this.name) // 静态方法 没办法直接调用类里的属性，只有把属性改成静态属性 则就可以调用
        }
    }
    var  p  = new Person('张三')
    Person.print()
    console.log('ts 静态属性',Person.age)//ts 静态属性 20   只有把属性改成静态属性 ，则就可以调用
    
    
    a. 实例化  ：实例方法调用，必须var  p  = new Person() p.work()
    b.含有 static方法 就是静态方法,静态方法调用  Person.print() ;静态方法 没办法直接调用类里的属性
    c.含有 static 变量就是静态属性，则就可以调用
    
    （4） 多态：父类定一个方法不去实现，让继承它的子类区实现，每一个子类有不同的表现
    
    多态也属于继承的一类
    
    class Animal{ 
        name:string;
        constructor(n:string){ //构造函数 实例化类的时候触发的方法
            this.name=n
        }
        eat(){ 
            console.log('吃的方法：')//具体吃啥没说 而是在子类里面一一针对
        }
    }
    class Dog extends Animal{ 
        constructor(n:string){ 
            super(n)
        }
        eat(){ 
            return this.name+'吃狗粮'
        }
    }
    
    class Cat extends Animal{ 
        constructor(n:string){ 
            super(n)
        }
        eat(){ 
            return this.name+'吃猫粮'
        }
    }
    
    （5） 抽象类，抽象方法
    
    ts中的抽象类：它是提供其他类继承的基类，不能直接被实例化
    
    用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类(子类)中实现
    
    abstract 抽象方法只能放在抽象类里面
    
    抽象类和抽象方法用来定义标准。
    
    eg  : Animal这个类要求它的子类必须包含eat方法
    
    abstract class  Animal { 
        name:string;
        constructor(n:string){ 
            this.name =n
        }
        abstract eat():any;//抽象类的子类必须实现抽象类里面的方法
    }
    // var a = new Animal()//提供其他类继承的基类，不能直接被实例化 这个是错误
    
    class Dog extends Animal{ 
    
        constructor(name:any){ 
            super(name)
        }
        // 抽象类的子类必须实现抽象类里面的方法
        eat(){ 
            console.log(this.name+'吃狗粮')
        }
    }
    var d = new Dog('旺财')
    d.eat()// 旺财吃狗粮

## 接口 ##

接口作用  
在面对对象的编程中，接口时一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要的遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。ts中接口类似Java，同时还增加了更灵活的接口类型，包括属性，函数，可索引和类等

（1） 属性类接口 ---对json 的约束
    
    1. ts的定义方法
    
    function printLable():void{ 
        console.log('定义方法')
    }
    
    printLable();
    
    2. ts的定义方法 传递参数
    
    function printLable(label:string):void{ 
        console.log('定义方法:',label)
    }
    
    printLable('参数一');
    
    3. ts 中定义方法传入的参数 对json进行约束
    
    
    function printLable(params:{ label:string}):void{ 
        console.log('定义方法:',params.label)
    }
    
    printLable('参数一');//错误
    
    printLable({ name:'参数一'});//错误
    
    printLable({ label:'参数一1'});//正确  定义方法: 参数一1
    
    4. 对批量方法传入参数进行约束
    
    接口：行为和动作的规范，对批量方法进行约束
    
        // 定义接口
        interface FullName{ 
            firstName:string;
            secondName:string;
        }
    
        function printName(name:FullName){ 
            //必须传入 firstName  secondName
            console.log(name.firstName+'---'+name.secondName)
        }
    
        printName('111')//报错
        //如果时以下这种方式的话，传递的参数 必须跟接口一致，或者会报错
        printName({ 
            age:20,//多传一个就报错
            firstName:'王',
            secondName:'依'
        })
    
        var obj ={ 
            age:20,
            firstName:'王',
            secondName:'依'
        }
        printName(obj)//这样的传对象的话， 只要含有接口定义的参数（正确的参数，类型也是对的），都是正确的 王---依
    
        // 批量的时候
    
        function printInfos(infos:FullName){ 
            //必须传入 firstName  secondName
            console.log(infos.firstName+'---'+infos.secondName+'-----1111')
            //虽然参数可以多传，但是在使用中，必须和接口定义的参数一致，否则会报错
            // console.log(infos.firstName+'---'+infos.secondName+'---'+infos.age)
        }
        printInfos(obj)//王---依-----1111
    
    5. 接口：可选属性
    
        interface FullName{ 
            firstName:string;
            secondName:string;
            age?:number
        }
    
        function printName(name:FullName){ 
            //必须传入 firstName  secondName
            console.log(name.firstName+'---'+name.secondName)
        }
    printName({ 
        firstName:'王',
        secondName:'依'
    })
    //age 可选可不选
    
    
    eg:  接口和ajax
    
    $.ajax({ 
        type:'GET',
        url:'test.json',
        data:{ name:$('#name').val(),pass:$('#pass').val()}
        dataType:'json'
    })
    
    接口定义
    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('成功')
            }
        }
    }
    
    ajax({ 
        type:'get',
        url:'http://192.168.5.97:8000/user',
        dataType:'json'
    })
    
    
    （2） 函数类接口:对方法传入的参数，以及返回值进行约束
    
    1. 加密的函数类型接口
    interface encrypt{ 
        (key:string,value:string):string
    }
    
    var md5:encrypt = function(key:string,value:string):string{ 
        //模拟操作
        return key+value
    }
    console.log(md5('111','zhangyi'))//111zhangyi
    
    （3） 可索引类接口:数组、对象的约束（不常用）
    
    
    //定义数组的约束
    var arr:number[]=[11,222]
    
    1. 可索引类接口  ： 针对数组
    interface UserArr{ 
        [index:number]:string
    }
    var arr:UserArr =['1','22111']
    
    console.log(arr[1])
    
    // var arr:UserArr =[111,'22111']// 接口定义的是 string  不能返回number 报错
    
    2. 对对象的约束
    
    interface UserObj{ 
        [index:string]:string
    }
    var obj:UserObj ={ name:'张三',age:'20'}
    var obj:UserObj ={ name:'张三',age:20}//这个是错误
    
    console.log(obj)//{ name: "张三", age: "20"}
    
    
    （3） 类类型接口：对类的约束（抽象类有点相似）
    
    interface Animal{ 
        name:string;
        eat(str:string):void;
    }
    
    class Dog implements Animal  { 
        name:string;
        constructor(n:string) { 
            this.name =n
        }
        //必须要有eat 方法
        // eat(){ //没参数的情况下
        //     console.log(this.name+'吃狗粮')
        // }
        eat(foot:string){ //有参数的情况
            console.log(this.name+'吃'+foot)
        }
    }
    var d = new Dog('旺财');
    d.eat('狗粮1')
    
    （4） 接口扩展：接口的继承
    interface Animal{ 
        eat():void;
    }
    //接口的继承Person 继承Animal
    interface Person extends Animal{ 
        work():void;
    }
    
    class  Web implements Person{ 
        name:string;
        constructor(n:string) { 
            this.name =n
            
        }
        eat(){ 
            console.log(this.name+'吃狗粮')
        }
        work(){ 
            console.log(this.name+'在工作')
        }
    }
    
    var d = new Web('小李')
    d.eat()
    d.work()
    
    2. 可以继承也可以实现接口
    
    interface Animal{ 
        eat():void;
    }
    
    interface Person extends Animal{ 
        work():void;
    }
    class Programmer{ 
        name:string;
        constructor(n:string){ 
            this.name =n
        }
        coding(code:string){ 
            console.log(this.name+code)
        }
    }
    //web 可以继承也可以实现接口
    class  Web extends Programmer implements Person{ 
        constructor(name:string) { 
           super(name)
        }
        eat(){ 
            console.log(this.name+'吃狗粮')
        }
        work(){ 
            console.log(this.name+'在工作')
        }
    }
    
    var d = new Web('小李')
    d.eat()
    d.work()
    d.coding('在敲代码')

## 泛型 ##

通俗理通俗理解：泛型就是解决 类 接口 方法的复用性 、以及对不待定数据类型的支持 (解决代码冗余的问题)

*  解决类 ，接口，方法的复用性, 以及对不特定数据类型的支持
 *  泛型可以支持不特定的类型数据，要求：传入的参数和返回的参数一致

### 泛型的定义，泛型函数 ###

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

### 泛型类 ###

比如有个最小推算法，需要同时支持返回数字和字符串俩种类型，通过类的泛型来实现

（1） 普通类型 转成泛型类
    
    1.普通类型
    
    class MinClass{ 
        list:number[]=[];
        add(n:number){ 
            this.list.push(n)
        }
        min():number{ 
            var el =this.list[0]
            for(var i=0;i<this.list.length;i++){ 
                if(el>this.list[i]){ 
                    el = this.list[i]
                }
            }
            return el
        }
    }
    var m = new MinClass()
    m.add(5)
    m.add(33)
    m.add(11)
    m.add(3)
    console.log(m.list)
    console.log(m.min())
    
    但是这个有一个问题，都是执行类型 ，如果数组是string,则这报错
     所以改成 类的泛型
    
    2. 泛型类
    
    class MinClass<T>{ 
        list:T[]=[];
        add(n:T){ 
            this.list.push(n)
        }
        min():T{ 
            var el =this.list[0]
            for(var i=0;i<this.list.length;i++){ 
                if(el>this.list[i]){ 
                    el = this.list[i]
                }
            }
            return el
        }
    }
    var m = new MinClass()//实例化类
    m.add(5)
    m.add('222')
    m.add(11)
    m.add(3)
    m.add('1')
    console.log(m.list)
    console.log(m.min())
    
    
    注意：这些T 都是有实例化类的时候决定的，var m = new MinClass<number>()
    这边定number 则 传入的数据 返回的数据都是number
    m.add('222') 则会报错
    
    <number>这个就是 传入参数的做了约束，如果没有的话，传入什么数据 都不会报错，
    
    （2） 把类当作参数的泛型类
    
    1. 定义类
    2. 把类作为参数来约束数据传入类型
    
    eg:定义一个User的类(username,password字段) 这个类的作用就是映射数据库字段，然后再定义一个MysqlDb的类，这个类用于操作数据库，把User类作为参数传入到MysqlDb中
    
    
    class User{ 
        username:string|undefined;
        password:string|undefined;
    }
    class  MysqlDb { 
        //传入的参数来验证合法性
        add(user:User):boolean{ 
            console.log(user)//{ username: "李四", password: "1111122"}
            return true
        }
    }
    
    // 初始化值
    var u = new User();
    u.username ='李四'
    u.password ='1111122'
    
    //存到MysqlDb里
    var Db = new MysqlDb()
    
    Db.add(u)
    
    
    3. 如果有多个表想存入数据库MysqlDb中。上面的做法就不简洁，重复使用了MysqlDb。所以这种情况下，就要封装一个MysqlDb 的泛型类
    
    class MysqlDb<T> { 
        //传入的参数来验证合法性
        add(infos: T): boolean { 
            console.log(infos)
            return true
        }
        updated(infos:T,id:number):boolean{ 
            console.log(infos,id)
            return true
        }
    }
    
    // a. 定义一个user类
    
    class User { 
        username: string | undefined;
        password: string | undefined;
    }
    
    var u = new User();
    u.username = '李四'
    u.password = '1111122'
    
    var Db = new MysqlDb<User>();// 实例类定义T的类型
    Db.add(u)
    
    
    // b. 定义一个Article类
    
    class ArticleFn { 
        title: string | undefined;
        desc: string | undefined;
        status: number | undefined;
        constructor(params: { 
            title: string | undefined,
            desc: string | undefined,
            status?: number | undefined
        }) { 
            this.title = params.title
            this.desc = params.desc
            this.status = params.status
        }
    }
    
    var a = new ArticleFn({ 
        title: "元旦",
        desc: '2021'
    });
    var Ar = new MysqlDb<ArticleFn>();
    Ar.add(a)
    
    a.status=0
    //修改
    Ar.updated(a,12)

### 泛型接口 ###

1. 函数类型接口
    
    interface ConfigFn{ 
        (val1:string,val2:string):string;
    }
    
    var setData:ConfigFn = function(val1:string,val2:string):string{ 
        return val1+val2
    }
    console.log(setData('name','张三'))
    
    2. 泛型接口
    
    把上面改成 泛型接口
    
    interface ConfigFn{ 
        <T>(value:T):T;
    }
    
    var setData:ConfigFn = function<T>(value:T):T{ 
        return value
    }
    console.log(setData<string>('张三'))
    
    
    也可以改成这样
    
    interface ConfigFn<T>{ 
        (value:T):T;
    }
    
    function setData<T>(value:T):T{ 
        return value
    }
    var myGetData:ConfigFn<string> = setData;
    console.log(myGetData('张三'))

### 案例 ###

案例
    
    功能：定义一个操作数据库的库，支持Mysql Mssql MongoDb，操作用户表，定义一个User类和数据表映射
    要求：Mysql Mssql MongoDb功能一样，都有add update get 方法
    注意：约束统一的规范，以及代码重用
    解决方案：需要约束规范所以要定义接口，需要代码重用所以用到泛型
        1.接口：再面对对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范
    
        2.泛型 通俗理解：泛型就是解决类 接口方法的复用性
    
        interface  DBI<T>{ 
        add(info:T):boolean;
        update(info:T,id:number):boolean;
        delete(id:number):boolean;
        get(id:number):any[];
    }
    
    // 定义一个操作mysql的数据库的类，
    // 注意：要实现泛型接口，这个类也要是一个泛型类
    class Mysql<T> implements DBI<T> { 
        add(info: T): boolean { 
            console.log(info)
            return true
        }
        update(info: T, id: number): boolean { 
            console.log(info)
            return true
        }
        delete(id: number): boolean { 
            console.log(id)
            return true
        }
        get(id: number): any[] { 
            let list =[
                { id:0,username:'张翰',password:'1111'},
                { id:1,username:'赵薇',password:'133'},
                { id:2,username:'王一博',password:'1111'},
                { id:3,username:'赵丽颖',password:'1111'}
            ]
            let resulit = list.filter((u) => u.id == id)
            return resulit
        }
    
    }
    // 定义Mssql类
    class Mssql<T> implements DBI<T> { 
        add(info: T): boolean { 
            console.log(info)
            return true
        }
        update(info: T, id: number): boolean { 
            console.log(info)
            return true
        }
        delete(id: number): boolean { 
            console.log(id)
            return true
        }
        get(id: number): any[] { 
            console.log(id)
            return []
        }
    }
    
    // 操作用户表，定义一个User类和数据表映射
    
    class User { 
        username: string | undefined;
        password: string | undefined;
    }
    var u = new User();
    u.username = '李四'
    u.password = '1111122'
    
    var Db = new Mysql<User>();
    Db.add(u)
    console.log('获取数据：',Db.get(1))

## 模块 ##

我们可以把一些公共地功能单独抽离成一个文件作为一个模块。模块里面地变量 函数 类 等默认是私有的，如果我们要在外部访问模块里面的数据（变量，函数，类）。我们需要通过export暴露模块里面的数据（变量，函数，类。。）  
暴露后我们通过import引入模块就可以使用模块里面暴露的数据（变量，函数，类。。）

// db.ts
    var dbUrl = 'xxx'
    
    function getData():any[] { 
      console.log('获取数据库数据')
      var list = [
        { 
          title: '222'
        }, { 
          title: '333'
        }
      ]
      return list
    }
    
    function saveData() { 
      console.log('保存')
    }
    
    export { 
      dbUrl,
      getData,
      saveData
    }
    
    // export default getData // export default在一个模块中只能用一次，引入时import getData from ’xxxx/xxx‘
    
    // index.ts
    
    import {  getData as get, saveData } from './modules/db'
    
    get()
    saveData()

应用举例：封装db库

// modules/db.ts
    
    interface DBI<T> { 
     add(info: T):boolean;
     update(info: T, id: number):boolean;
     delete():boolean;
     get(id: number): any[]
    }
    
    export class MssqlDb<T> implements DBI<T> { 
     add(info: T): boolean { 
       console.log(info)
       return true
     }
     update(info: T, id: number): boolean { 
       throw new Error("Method not implemented.");
     }
     delete(): boolean { 
       throw new Error("Method not implemented.");
     }
     get(id: number): any[] { 
       var list = [
         { 
           title: 'xxxx',
           desc: 'xxx1'
         },
         { 
           title: 'xxxx',
           desc: 'xxx1'
         },
       ]
       return list
     }
    }
    
    // model/user.ts
    
    import {  MssqlDb } from '../modules/db'
    
    class UserClass { 
     username: string | undefined;
     password: string | undefined;
    }
    
    var UserModel = new MssqlDb<UserClass>(); // 用类约束传入参数的合法性
    
    export { 
     UserClass,
     UserModel
    }
    
    // index.ts
    
    import {  UserClass, UserModel } from './model/user'
    import  { ArticleClass, ArticleModel } from './model/article'
    
    var user = new UserClass();
    user.username = 'zhangsan'
    user.password = '123344'
    
    UserModel.add(user)
    var res = UserModel.get(123)
    console.log(res)

## 命名空间 ##

再代码量较大地情况下，为了避免各种变量命名出冲突，可将相似功能地函数，类，接口等放置到命名空间内，同Java的包，。net的命名空间那样，ts的命名空间可以将代码包裹起来，只对外访问的对象，命名空间内的对象通过export

命名空间和模块的区别

命名空间：内部模块，主要用于组织代码，避免命名冲突  
模块：ts的外部模块的简称，侧重代码的复用，一个模块里可能会有很多个命名空间

namespace A { 
        class Animal { 
            name: string;
            constructor(n: string) { 
                this.name = n
            }
            eat() { 
                console.log('吃的方法：')
            }
        }
        export class Dog extends Animal { 
            constructor(n: string) { 
                super(n)
            }
            eat() { 
                return this.name + '吃狗粮'
            }
        }
    
    }
    // 调用命名空间中的方法，或类，需要在namespace中暴露export出来
    var a = new A.Dog('小喵')
    console.log(a.eat())
    
    namespace B { 
        class Animal { 
            name: string;
            constructor(n: string) { 
                this.name = n
            }
            eat() { 
                console.log('吃的方法：')
            }
        }
        export class Dog extends Animal { 
            constructor(n: string) { 
                super(n)
            }
            eat() { 
                return this.name + '吃狗粮'
            }
        }
    }
    
    // 调用命名空间中的方法，或类，需要在namespace中暴露export出来
    var d = new B.Dog('小狗')
    console.log(d.eat())
    
    
    注意：可将命名空间当作一个模块直接暴露出来  
    
    // modules/a.ts
    namespace A { 
      // ...
    }
    namespace B { 
      // ...
    }
    
    export { A,B}
    
    // index.ts
    
    import {  A,B} from 'xxxx'
    var d = new A.dog('test')

## 装饰器 ##

装饰器：是一种特殊类型的声明，能够被附加到类声明，方法，属性，或参数上，可以修改类的行为  
通俗的讲，装饰器就是一个方法，可以注入到类，方法，属性参数上来扩展类，属性，方法，参数的功能；

常见装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器

装饰器的写法：普通装饰器（无法传参）、装饰器工厂（可传参）

装饰器是过去几年中js 最大的成就之一，已是es7的标准特征之一

### 类装饰器 ###

在类声明之前被声明（紧接着类声明），应用于类构造函数，可用来监视、修改、或替换类定义

#### 类装饰器：装饰器工厂（无传参） ####

function logClass(params:any) { 
        console.log(params) // params 就是当前类
        params.prototype.apiUrl = '动态扩展的属性'
        params.prototype.run = function() { 
            console.log('run method')
        }
    }
    // HttpClient 使用了这个logClass 装饰器（装饰器 扩展类的属性，方法）
    @logClass
    class HttpClient { 
        constructor() { 
    
        }
        getData() { 
    
        }
    }
    
    var http:any = new HttpClient()
    console.log(http.apiUrl)
    http.run()

#### 类装饰器：装饰器工厂（传参） ####

// 装饰器工厂
    function logClass(params: string) { 
        return function(target: any) {  // target为类
            // console.log(target)// f HttpClient(){ }
            / console.log(params)// http://hello
            target.prototype.apiUrl = params
        }
    }
    
    @logClass('http://hello')
    class HttpClient { 
        constructor() { 
        }
        getData() { 
        }
    }
    
    var http:any = new HttpClient()
    console.log(http.apiUrl)//http://hello

### 类装饰器 ###

下面是一个重载构造函数的例子, （修改当前类的构造函数或方法，可看为固定用法）  
类装饰器表达式会再运行时当作函数被调用，类的构造函数作为其唯一的参数。如果类装饰器返回一个值，她会使用提供的构造函数来替换类的声明

@logClass
    class HttpClient { 
        public apiUrl: string | undefined;
        constructor() { 
            this.apiUrl = '我是构造函数里面的apiUrl'
        }
        getData() { 
            console.log(this.apiUrl)
        }
    }
    
    var http = new HttpClient()
    http.getData()//我是构造函数里面的apiUrl
    
    
    基于上面地案例 基础上 重载构造函数
    
    
    function logClass(target:any) { 
        console.log(target)// f HttpClient(){   this.apiUrl = '我是构造函数里面的apiUrl'}
        return class extends target { //修改类地方法，属性
            apiUrl: any = '修改后数据'
            getData() { 
                console.log(this.apiUrl)
            }
        }
    }
    
    @logClass
    class HttpClient { 
        public apiUrl: string | undefined;
        constructor() { 
            this.apiUrl = '我是构造函数里面的apiUrl'
        }
        getData() { 
            console.log(this.apiUrl)
        }
    }
    
    var http = new HttpClient()
    http.getData()//修改后数据

### 属性装饰器 ###

属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数
    return function (target: any, attr: any) 
    1. 对静态成员来说是类的构造函数，对实例成员来说是类的原型对象
    2. 成员的名字
    
    //属性装饰器
    function logProperty(params: any) { 
        return function (target: any, attr: any) { 
            console.log(target)// f { getData:f,onstructor:f}
            console.log(attr)//url
            target[attr] = params
        }
    }
    
    @logClass('http://hello')
    class HttpClient { 
        @logProperty('newUrl')
        public url: any | undefined 
        constructor() { 
    
        }
        getData() { 
            console.log('getData===>', this.url)
        }
    }
    
    var http = new HttpClient()
    http.getData()

### 方法装饰器 ###

方法装饰器 会应用到方法的属性描述符上，可以用来监视，修改，或者替换方法定义

方法装饰器会在运行时，传入下列三个参数

1.  对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2.  成员的名字
3.  成员的属性描述符

#### 方法装饰器一: 修改当前实例的属性和方法 ####

function get(params: any) { 
        return function (target: any, methodName: any, desc: any) { 
            // 仍可改变类原型上的方法和属性
             console.log(target) //{ getData:f,onstructor:f}
            console.log(methodName)//当前方法名称：getData
            console.log( desc.value)//当前方法 里的内容
            
            target.apiUrl = 'apiUro'
            target.run = function () { 
                console.log('run')
            }
        }
    }
    
    class HttpClient { 
        public url: any | undefined
        constructor() { 
    
        }
        @get('htttp://dksjflsjkf')
        getData() { 
            console.log('getData===>', this.url)
        }
    }
    
    var http:any = new HttpClient()
    console.log(http.apiUrl)//apiUro
    http.run()//run

#### 方法装饰器二： 修改当前方法 ####

function get(params: any) { 
        return function (target: any, methodName: any, desc: any) { 
            console.log(target, methodName, desc.value)
    
            // 修改装饰器的方法，把装饰器方法里面传入的所有参数改为string类型
            // 1. 保存当前方法
            var oMethod = desc.value;
            //这样写就是直接替换了getData的方法
            desc.value = function (...args: any[]) { 
                args = args.map(val =>return String(val))
                console.log(args)
            }
            // 修改getData的方法
            desc.value = function (...args: any[]) { 
                args = args.map(val =>return String(val))
                console.log(args)// [123, 'xdd']
                // 2. 调用原来的旧方法(看是否需要直接覆盖，可省略)
                oMethod.apply(this, args)
            }
    
        }
    }
    
    class HttpClient { 
        public url: any | undefined
        constructor() { 
    
        }
        @get('htttp://dksjflsjkf')
        getData(...args: any[]) { 
            console.log('我是getData', args)// [123, 'xdd']
        }
    }
    
    var http: any = new HttpClient()
    http.getData(123, 'xdd')

### 方法参数装饰器 ###

参数装饰器表达式会在运行时当作函数被调用，可用使用参数装饰器为类的原型增加一些元素数据，传入下列3个参数

1.  对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2.  方法的名字
3.  参数在函数参数列表中的索引

function logParam(params: any) { 
        return function (target: any, methodName: any, paramsIndex: any) { 
            // console.log(params)//打印出@logParam('uuid')里传的 uuid
            // console.log(target)//target原型对象 { getData:f,constructor:f}
            console.log(methodName)//getData
            console.log(paramsIndex)//0
    
            target.apiUrl = params
        }
    }
    
    class HttpClient { 
        public url: any | undefined
        constructor() { 
    
        }
        getData(@logParam('uuid') uuid: any) { 
            // console.log(uuid)// 123456
        }
    }
    
    var http: any = new HttpClient()
    console.log(http.apiUrl)
    http.getData(123456)

### 装饰器的执行顺序 ###

属性 > 方法 > 方法参数 > 类装饰器  
有多个同样的装饰器，则会先执行后面的

function logClass1(params: string) { 
        return function (target: any) { 
            console.log('类装饰器1')
        }
    }
    
    function logClass2(params: string) { 
        return function (target: any) { 
            console.log('类装饰器2')
        }
    }
    
    function logAttr(params?: string) { 
        return function (target: any, attr: any) { 
            console.log('属性装饰器')
        }
    }
    
    function logMethod(params?: string) { 
        return function (target: any, methodName: any, desc: any) { 
            console.log('方法装饰器')
        }
    }
    
    function logParam1(params?: any) { 
        return function (target: any, methodName: any, paramsIndex: any) { 
            console.log('方法参数装饰器1')
        }
    }
    
    function logParam2(params?: any) { 
        return function (target: any, methodName: any, paramsIndex: any) { 
            console.log('方法参数装饰器2')
        }
    }
    //类装饰器
    @logClass1('http://1')
    @logClass2('http://2')
    class HttpClient { 
        @logAttr()//属性装饰器
        public url: any | undefined
        constructor() { 
    
        }
        @logMethod()//方法装饰器
        getData() { 
            return true
        }
        //@logParam1()， @logParam2() 参数装饰器
        setData(@logParam1() attr1: any, @logParam2() attr2: any) { 
        }
    }
    
    var http: any = new HttpClient()
    
    
        // 打印结果是
        / *
        属性装饰器
    方法装饰器
    方法参数装饰器2
    方法参数装饰器1
    类装饰器2
    类装饰器1
        * /