利用typescript进行类型检查

TypeScript介绍
TypeScript官网：https://www.tslang.cn/

基本使用
全局安装：npm i typescript -g，然后就可以使用tsc命令编译.ts文件。

let num: number = 100;    //index.ts
function test(a: number): number {}

在git里运行 tsc index.ts //会自动在同级目录下生成index.js

配置文件
运行tsc --init，会生成tsconfig.json配置文件。
如果修改tsconfig.json文件中的“rootDir“:”./src”,”outDir”:”./dist”，运行tsc -p ./tsconfig.json则会自动生成dist目录。

数据类型介绍

let a: number = 123;  //number还可以是NaN Infinity 进制
let b: string = “abc”;  //也可以用单引号，模板字符串`abc${a}`
let c: Boolean = true;  //也可以是false
let arr: Array = [1,2,3];
let arr1: number[] = [1,2,3];

//元组（Tuple）规定数组的长度和每个元素的数据类型
let arr2: [number,string] = [123,”abc”];

//如果月结访问元组的元素，那么可以是已经规定的元素的类型，如果不是则不行
arr2[3] = 123;
arr2[4] = true;  //报错，只能是已规定元素的数据类型 

let res: void = undefined;
let res1: undefined = undefined;
let res2: null = null;
let somevar: any = 10;  //可以是任意类型

//never一般用在不可能有返回值的函数的返回值类型设置
function test(): never{
  while(true){}
}

//object 类型(o小写)，引用类型的都可以用object定义
let o: object = {}
let o1: object = []

//规定该对象必须有一个name属性并且属性值是string类型
let o2: {name: string} = {name:”yy”}; 

// enum类型，默认从0开始编号,可以手动编号
enum Gender{
  male,    //male = 1
  female,  //female = 0
  unknow //unknow = -1
}
let gender = Gender.male;    // 0 

//类型断言
let str: any = “abc”;
let len: number = (str).length;

TS中的类
和ES6中不同的是，TS中属性必须声明，需要指定类型，声明属性后，必须要赋值一个默认值或者在构造函数中进行初始化

class Person{
  name: string
  age: number = 10   //赋值默认值
  constructor(name: string){
    this.name = name;  //初始化属性
  }

sayHello(msg: string): void {
  console.log(msg)
  }
}

//TS类的继承

class Animal{
  age: number
  constructor(age: string){
    this.age = age
  }

  eat(){
     console.log(“eateateat”)
  }
}

class Dog extends Animal{
  type: string
  //只有子类写了构造器必须要写super()才能调用父类
  constructor(type: string,age: string){ 
    super(age)
    this.type = type
  }

  // 如果子类有和父类相同的方法，则会调用子类自己的方法
  eat(){
    console.log(“eateateat2222222222222”)
  }
}

vat dog = new Dog(18)

console.log(dog.eat())  // eateateat

TS中类成员的访问修饰符：
指的是可以在类的成员前通过添加关键字来设置当前成员的访问权限。
public：公开的，默认，所有人都可以访问
private：私有的，只能在当前类中访问
protected：受保护的，可以在当前类或者子类中访问

class Car{
  private color: string
  constructor(color: string){
    this.color = color
  }
}
let car = new Car();
car.color  //报错，在类外面无法访问

TS中的只读属性和参数属性

class Cat{
  //只读属性readonly必须在声明的时候或者在构造函数中被赋实值
  readonly color: string
  constructor(){
    this.color = “黄色“
  }
}
class Cat1{
  //在构造器的参数中给参数前添加修饰符就相当于声明了一个属性
  constructor(public type: string){
       this.type = “橘猫“
   }
}

TS中类成员的存取器

class Person{

  //name: string = “”
  private _names: string = “”
  get name(): string{
       return this._name;
   }

   set name(value: string){
     // 这里就可以添加的相关的校验逻辑了
      this._name = value
   }
}

TS中的接口
接口：可以理解成一个规范，使用interface进行声明，不需要里面方法的具体实现只需要定义数据类型即可。

interface ajaxOption{
  url: string,
  type: string,
  data: object,
  success(data: object): void,
  [propName: string]: any                   //接口中额外的属性检查
}
function ajax(options: ajaxOption){}

可选属性和只读属性： type?: string readonly type: string

接口中额外的属性检查：（如下图）


函数类型的接口：

类类型的接口：


接口继承接口：单继承 多继承



接口继承类