typescript 学习

npm i -g typescript

tsc

.ts -> .js

javascript 的超集，js的升级版

1、类型声明

let  变量：类型A | 类型B（联合类型）

let  c:boolean = true

function sum(a:number,b:number):number{

  return a+b

}

2、ts中的类型

number,string,boolean

字面量  let a:10 | 11

any  声明变量如果不指定类型，ts解析器则会自动判断变量的类型为any(隐式的any)，一般不建议，可以赋值给任意变量

unknown 表示未知类型的值  unknown就是一个类型安全的any，不能直接赋值给其它变量

        s = e as string 类型断言：可以用来告诉解析器变量的实际类型

        s = <string>e

void,never  函数的返回值

        void:用来表示空，表示没有返回值的函数

        never:表示永远不会返回结果

        function fn():never{

           throw new Error('报错了！')

        }

object 对象

        a = {}  a = function(){}

        let c = {name:string,[propName:string]:any}  表示任意类型的属性

        let d : (a:number,b:number) => number

array  let f:number[]   let g:Array<number>

tuple  元组 就是固定长度的数组  let h:[string,number]

enum   枚举 let i:{name:string,gender:Gender.male}

       enum Genfer {

         male:0,

         female:1

       }

       let j:{name:string} & {age:number}

3、编译选项

  tsc app.ts -w   监视模式 只对当前文件

  tscconfig.json  是ts编译器的配置文件，对全局ts文件进行编译  tsc 或者 tsc -w

     {

       include:['./src/**/*'],  任意目录的任意文件  /**  任意目录  /* 任意文件

       exclude:['./src/hello/**/*'], 不需要被编译的

       extends:'', 定义被继承的配置文件

       files:'',指定被编译文件的列表，只有被编译的文件少时才会用到

       compilerOptions:{//编译选项

          target:ES3, //默认转换成es3,指定被编译的ES版本

          module:'commonjs',指定要使用的模块化的规范

          lib:[],指定项目中要用到的库

          outDir:'',//指定编译后的文件所在目录

          outFile:'',//将代码合并成一个文件

          allowJs:false,//是否对js文件进行编译

          checkJs:false,//是否检查js代码是否符合规范

          removeComments:false,//是否移除注释

          noEmit:true,//不生成编译后的文件，只检查语法，不生成js文件

          noEmitOnError:false,//当有错误时，不生成编译文件

          alwaysStrict:false,//用来设置编译后的文件是否启用严格模式

          noImplicitAny:true,//不允许隐式的any类型

          noImplicitThis:false,//不允许不明类型的this

          strictNullChecks:false,//严格检查空值

          strict:false,//所有严格检查的总开关

       }

     }

4、webpack 打包 ts代码

   cnpm i -D webpack webpack-cli typescript ts-loader

   webpack.config.js

   const htmlWebpackPlugin = require('html-webpack-plugin')

   module.exports = {

      entry:'./src/index.ts',//入口文件

      output:{

        path:path.resolve(__dirname,'dist'),//指定打包文件的目录

        filename:'bundle.js',//打包后文件的文件

        environment:{//告诉webpack不使用箭头函数

          arrowFunction:false

        }

      }，

      module:{//指定打包时使用模块

        rules:[{

          test:/\.ts$/,//指定的是规则生效的文件

          use:[{

            loader:'babel-loader',

            options:{

              presets:[

                [

                  '@babel/preset-env',

                  {

                    targets:{

                      "chrome":'88',

                      ie:'11'

                    },

                    'corejs':'3',

                    useBuiltIns:'usage',//表示按需加载

                  }

                ]

              ]

            }

          },'ts-loader']，//要使用的loader

          exclude:/node_modules/,要排除的文件

        },]

      },

      plugins:[

        new htmlWebpackPlugin({

          title:'这是',

          template:'./src/index.html'

        })

      ],

      resolve:{//用来设置引用模块

        extensions:['.ts','.js']

      }

   }

   

   cnpm i -D html-webpack-plugin  //html

   cnpm i -D webpack-dev-server   //实时响应

   cnpm i -D clean-webpack-plugin //清空dist

   cnpm i -D @babel/core @babel/preset-env  babel-loader core-js  //babel

   5、面向对象和类

      OA，一切操作都要通过对象，就是所谓的面向对象

      类包含两部分，属性和方法

      class Person {

         name:string='hello'

         //加static是类方法，静态方法，不加就是就是对象方法    

         static  sayHello(){

           console.log('大家好')

         }

      }

      const per = new Person()

      Person.sayHello()

  6、构造函数和this

     constructor(){

      console.log(this) //谁调用就指向谁

     }  构造函数会在对象创建时调用

     

  7、继承

     extends

     //在类的方法中super表示当前类的父类

     //如果在子类中写了构造函数，在子类的构造函数中必须对父类的构造函数进行调用

     construtor(name,age){

      super(name)

     }

     super()

     

  8、抽象类

     abstract 不能用来创建对象

     抽象类中可以定义抽象方法,子类必须重写抽象方法

     abstract sayHello():void

  9、属性的封装

     

     在属性前加修饰符

     public  _name:string; //public可以在任意位置访问修改

     private _age:number; //私有属性，只能在类里面访问

     protected  num:number; //受保护的属性，只能在当前类和当前类的子类中访问

     //ts中设置getter方法的方式

     get name(){}

     set name(){}

  10、泛型

     定义函数或者类时，如果遇到类型不明确就可以使用泛型

      function fn<T>(a:T):T{

        return a

      }

      function fn<T,K>(g:T,b:K):T{

      }

      interface Inter{

        length:number

      }

      function fn3<T extends Inter>(g:T):[]<number>{

        return g.length

      }