安装编译

1. 安装

   npm install -g typescript

2. 编译

   tsc 文件名.ts

配置自动编译

有构建工具(webpack等)会自动构建

1. 在项目目录中运行命令，生成ts配置文件 tsconfig.json

   tsc --init

2. 打开 tsconfig.json， 修改输出的目录

   "outDir": "./js"

3. 窗口选择 终端 --> 运行任务 --> 显示所有任务 --> tsc:监视

数据类型和效验

必须指定变量的类型

• boolean 布尔类型

  var flag:boolean = true // 指定布尔类型

• number 数字类型
• string 字符串类型

• array 数组类型

  // 数据中的元素必须是number类型
  const abc:number[] = [1,21]
  
  const arr:Array<number> = [11,22]

• null 和 undefined

  var num:undefined;
  
  // 可以为number或者undefined
  var num:number | undefined;

• enum 枚举类型

  // 枚举类型
  /**
   * enum 枚举名 {
   *      标识符[=整型常数]
   *      标识符[=整型常数]
   * }
  */
  // 如果标识符没有赋值则打印下标
  enum Flag {success=1,error=2}
  
  let s:Flag = Flag.success

• tuple 元组类型，数组的一种

  // 表示第一项为number，第二项为string
  const arrTuple:[number,string] = [123,'字符串']

• any 任意类型

  var num:any = 123

• void

  // 没有任何类型 用于定义方法 方法没有返回值
  function run():void{}

• never

  // 其他类型 包含（null和undefined） 代表从不会出现的值
  var a:undefined;
  a=undefined // a 只能等于undefined

  var a:never;
  // 从不会出现的值
  a = (()=>{
     throw new Errorr('错误') 
  })()

函数的定义

1. 函数声明

   function run():string {
       return '字符串'
   }

2. 匿名函数

   var fun2 = function():number {
       return 123
   }
   
   fun2() // 调用方法

3. 定义方法传参

   function getInfo(name:string, age:number):string{
       return name
   }

4. 没有返回值的方法

   function run():void {
   }

5. 可选参数方法

   ts形参实参需要统一，如果不同意需要在参数后面加上 ?

   function getInfo(name:string, age?:number):string{
       return name
   }

6. 默认参数

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

7. 剩余参数

   function sum (...data:number) { // 剩余参数每一项都是number
       
   }

8. 函数重载

   java中方法的重载：两个或两个以上同名函数，但是他们参数不一样，这时会出现重载的情况

   typescript重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的

   ts为了兼容es5 以及 es6 重载的写法有区别

   function getInfo(name:string):string;
   function getInfo(age:number):number;
   function getInfo(str:any):any {
       if(typeof str === 'string'){ // 匹配为字符串
           return str
       } else { // 匹配为数字
           return str
       }
   }

对类的定义

1. 定义一个类

   class Person{
       private name:string
       constructor(name:string) {
           this.name = name
       }
       getName():string{
           return this.name
       }
       setName(name:string):void{
           this.name = name
       }
   }
   var p = new Person('张三')
   p.getName

2. 继承

   class extends Person {
       constructor(name:string){
           super(name) // 传入name给父级 初始化父类的构造函数
       }
   }

3. 类的修饰符

   不加修饰符，默认就是公有

   • public：公有 都可以访问
   • protected：在类里面、子类可以访问，类外部不行
   • private：私有 只有类里面可以访问

4. 多态

   父类定义一个方法不去实现，让继承他的子类去实现，每一个子类有不同的表现

   class Animal {
       name:string;
       custructor(name:string) {
           this.name = name
       }
       eat() {
           console.log('吃的什么');
           
       }
   }
   
   class Dog extends Animal {
       custructor(name:string) {
           super(name)
       }
       eat () {
           return this.name + '吃饼干'
       }
   }

5. typescript中的抽象类，它是提供其他类继承的基类，不能直接被实例化

   abstract 抽象方法只能放在抽象类中 抽象类中所有的东西都是抽象的

   abstract class Animal {
       abstract eat():ant; // 它的子类必须包含eact方法
   }

泛型

可以支持不特定的数据类型 要求：传入的参数和返回的参数一致

1. 泛型函数

   function getData<T>(value:T):T { // T表示泛型，传入的是泛型，返回的也是泛型
       return 'abc'
   }
   getData<number>(123)

2. 泛型类

   class MinClass<T> {
       list:T[] = []
   }
   var m = new MinClass<number>()

3. 泛型接口

   interface ConfigFn {
       <T>(value:T):T
   }
   var getData:ConfigFn = function<T>(value:T):T{
       return value
   }

装饰器

1. 普通装饰器

   function logClass(params:any) {
       // params 就是当前类 
       // 给当前类扩展一个 变量
       params.prototype.apiUrl = 'xxx'
       
       // 扩展一个方法
       params.prototype.run = function() {
           
       }
   }
   
   @logClass // 调用logClass装饰器
   class  HttpClient {
       constructor() {
           
       }
   }
   var http = new HttpClient()
   http.apiUrl // 调用扩展的变量

2. 装饰器工厂

   function logClass(params:string){
       return function(target:any){
           
       }
   }
   @logClass('hello') // 把hello传给params HttpClent传给target
   class HttpClient{
       constructor() {}
   }

3. 在装饰器中修改传入类的数据

   function logClass(target:any){
       return class extends target{ // 继承传入的类后进行修改
           apiUrl:any = "修改后的apiUrl"
       }
   }
   
   @logClass
   class HttpClent {
       public apiUrl:string|undefined
       constructor(){
           this.apiUrl = '我是构造函数里面的'
       }
   }

4. 属性装饰器

   function logProperty(params:any){
       return function(target:any，attr:any) {
          //target 类的原型对象  attr:属性名称
           target[attr] = params // 表示把类的属性赋值传入进来的params
       }
   }
       
   class HttpClient{
       @logProperty('abc')
       public url:any
   }

5. 方法装饰器

   function logMethod(params:any){
       return function (target:any,methodName:any,desc:any){
           
       }
   }
   class HttpClient{
       @logProperty('params参数')
       getData() {}
   }

   • target对于静态成员来说是类的构造函数，对于实例成员来说是原型对象
   • methodName成员的名字
   • desc 成员对应的参数

6. 方法参数装饰器

   function loParams(params:any) {
       return function (target:any,paramsName:any,paramsIndex:any){
           
       }
   }
   
   class HttpClient{
       public url:any
       constructor() {}
       getData(@logParams('params参数')){}
   }

   • target 对于静态成员来说是类的构造函数，对于实例成员来说是原型对象
   • paramsName 参数的名字
   • paramsIndex 参数在函数列表中的索引

   本文为作者原创笔记~，喜欢记得给作者点赞、转发支持一下哦~，转载请注明出处！