TypeScripet

TypeScript(微软, 趋势)为js提供了静态类型检测的能力

1. 概念类

   • 概念: JavaScript的超集语言(兼容js语法)

   • 作用: 给js提供了类型系统和ES6的语法支持

   • 与Flow的区别: Flow是类型检查工具, TypeScript是开发语言, 有自己的编译工具, 会最终转换成js

2. 安装使用

   官网: https://www.tslang.cn/docs/home.html

   安装TS编译器: cnpm i typescript -g

   安装完成, 提供tsc命令使用, 把ts文件转换成js文件 tsc ./index.ts

3. TS的配置文件

   • 创建tsconfig.json配置文件, tsc --init

   • 设置常用的配置:
     target: 转化后的js是es5模式
     module: 转化后的js模块化方式
     outFile: "outDir": "./dist", 全部转化到dist文件夹下
     rootDir: "rootDir": "./src", 需要转化的是src目录下
     strict: 转化后是否严格模式

TS的数据类型

1. number类型

  let a: number = 10;
  let b: number = NaN;
  let c: number = infinity;
  // number还可以是八进制 十六进制

2. string类型

  let str: string = 'abc';
  let str1: string = `这是模板字符串${str}`;

3. boolean类型

  let flag: boolean = true;

4. 数组类型

  // number型数组
  let arr: Array = [1, 2];
  // number型数组
  let arr1: number[] = [1, 2, 3]

5. 元组

  // 允许表示已知元素长度和类型, 两个元素, 第一个元素必须number
  let arr2: [number, string] = []
  // 越界访问时, 第三个元素既可以number也可以是string, 其他不允许

6. void 空值

  // 可以表示undefined
  let res: void = undefined;
  let res1: undefined = undefined;
  let res2: null = null;

7. never 类型, 用于不可能有返回值的函数

  const fn = (): never => {
    while (true) {

    }
  }

8. 对象类型

  let obj: object = {};
  let obj1: object = [];
  let obj2: {name: string, age: number} = {name: 'tt', age: 18};

9. 枚举类型(enum)

  enum ColorFool {
    red = '红色',
    yellow = '黄色'
  };
  let color: ColorFool = ColorFool.red;

10. 类型断言

  // 根据length属性, 推断它就一定是number
  let str: any = 'abc';
  // let len: number = str.length;
  let len: number = (str).length;

TS中的类

1. 类的实现

  class Animal {
    // 和ES6不同, TS属性必须声明类型
    type: string = '动物'
    // 声明好属性之后, 属性必须赋值, 或者在构造函数中进行初始化(上下两种)
    age: number
    constructor (age: number) {
      this.age = age;
    }
    eat () {
      console.log('动物进食')
    }
  }

2. 类的继承, 跟ES6类似

  class Dog extends Animal {
    name: string
    constructor ( name: string, age: number) {
      // 必须先继承父集的属性
      super(age)
      this.name = name;
    }
    // 子集的eat方法会覆盖父集的eat方法
    eat () {
      console.log('狗狗独有的')
    }
  } 

3. 类成员的访问修饰符

   • 在类成员前通过添加关键字来设置当前成员的访问权限

     • public 公开, 默认, 都允许访问
     • private 私有, 只能在当前类内部做访问
     • protected 受保护的, 只能在当前类或子类中访问

  enum Color {
    red = '红色',
    yellow = '黄色',
    green = '绿色'
  }
  class Car {
    // public可以任意访问
    public color: Color
    constructor () {
      this.color = Color.red
      // this.run()         // 可以内部访问
      // this.loadPeople()  // 可以内部访问
    }
    // 私有属性, 只能在Car类内部中使用
    private run () {
      console.log('run')
    }
    // 受保护属性, 只能类内部或者子类内部可以访问
    protected loadPeople () {
      console.log('载人')
    }
  }
  // 外部访问
  let car = new Car()
  // car.color    // public可以访问
  // car.run()    // 私有属性不可以被访问了
  // car.loadPeople() // 被保护的属性不可以被访问了

  // 子类访问
  class Audi extends Car {
    sayHi () {
      // console.log(this.color) // public可以访问
      // this.run()           // 私有属性不可以被访问了
      // this.loadPeople()    // 被保护的属性可以被子类访问
    }
  }
  // 子类的外部访问都可以
  let audi = new Audi()
  // audi.color   // public可以访问
  // audi.run()    // 私有属性不可以被访问了
  // audi.loadPeople()  // 被保护的属性不可以被访问了

4. 类的只读属性和参数属性

  class Cat {
    // 只读属性
    readonly name: string
    // 参数属性, 加了public, 相当于省去了声明属性和构造器中初始化的过程
    constructor ( public type: string) {
      this.name = '嘟嘟'
    }
  }
  let cat = new Cat('噗噗')
  // cat.name = 'test' // 只读属性不可以被改写

5. 类的存取器

  class Person {
    // 私有属性 "_" 标记
    private _name: string = ''
    // 存取器, 就是get和set函数, 对存储值做校验
    get name (): string {
      return this._name
    }
    set name (value: string) {
      this._name = value
    }
  }
  let p = new Person();
  console,log(p.name)

TS中的接口, 可选属性, 只读属性

1. 概念: 一个约定或者规范, 限制用户传入的参数, 关键字
   interface

2. 可选属性, 此属性可传可不传

3. 接口内部还可以只读属性, 不可以重新赋值

  // interface 关键字声明接口, '?'可选属性, 可传可不传
  interface AjaxOption {
    url?: string,
    // 只读属性
    readonly type: string,
    data?: object,
    success(data: object):void,
    // 额外的属性检查, 告诉接口可能还存在其他多个参数
    [propName: string]: any
  }
  // 创建ajax方法, 参数是定好的接口
  const ajax = (options: AjaxOption) => {}
  // 调用, 如果不按接口来就会报错
  // ajax({}) 

4. 函数类型的接口

  interface SumInterFace {
    (a: number, b:number):number
  }
  // 函数
  const sum: SumInterFace = (a: number, b: number) => { return a + b }

5. 类的类型接口(数据库访问层代码接口), 关键字: implements

  interface PersonInterFace {
    name: string,
    age: number,
    eat(): void
  }
  // 类实现接口, 必须使用关键字`implements`
  class XiaoMing implements PersonInterFace {
    name =  '小明'
    age = 18
    eat () {
      console.log(123)
    }
  }
  // 可用于数据库访问层的代码实现

6. 接口的继承

   1. 接口继承接口, 关键词是: extends, 还有多接口继承,分隔

     interface TwoDPointInterFace {
       x: number,
       y: number
     }
     interface TimeInterFace {
       time: string
     }
     // 3D的点继承2D的点还有时间轴, 关键字extends
     interface ThreeDPointInterFace extends TwoDPointInterFace, TimeInterFace{
       z: number
     }
   

   2. 接口继承类

     // 定义类
     class Bird {
       type: string = '鸟'
       fly () {
   
       }
     }
     // 定义继承类的接口
     interface MiniBird extends Bird {
   
     }
     // 实现接口
     let flyingBird: MiniBird = {
       type: '',
       fly () {
         
       }
     }