TypeScript总结

1.基础类型：

number,string,null,undefinde,symbol,boolean，void

2.对象类型：

对象类型，数组类型，类类型，函数类型

3.类型推断：(赋值字面量给变量 小写开头就是字面量如:number)

• 如果 TS 能够自动分析变量类型， 我们就什么也不需要做了
• 如果 TS 无法分析变量类型的话， 我们就需要使用类型注解

//能推断
const one = 1;
const two = 2;
const total= one + two;

//不能推断 （因为one和two可以传入其他类型）
function getTotal(one, two) {
  return one + two;
}
//total可以推断，为了更严禁 还是需要指定类型，因为还是里面可以返回其他的
const total = getTotal(1, 2);

4.类型别名（type）和 类进行定义和接口 是互通的

type Lady = { name: string, age: Number };

class Lady {
  name: string;
  age: number;
}


interface Lady {
  name: string;
  age: number;
  waistline?: number;       //非必须值
  [propname: string]: any;  //允许加入任意 key：string  value 任意值
  say(): string;            //方法
}


 //接口和类型别名区别
 //类型别名可以代表基础类型type name= string | number ,联合类型 ,utility type：相当于是类型的处理函数
 //接口必须代表的是一个对象

 //接口和类
  class XiaoJieJie implements Girl {}


 //接口可以继承接口
  interface Teacher extends Girl {
    teach(): string;
  }

5.元组和数组

//数组 数据位置任意
const xiaojiejie: (string | number)[] = ["dajiao", "teacher", 28];

//固定位置 固定数据
const xiaojiejie: [string, string, number] = ["dajiao", "teacher", 28];

6.类的基本使用

•  继承，重写
• private，protected，public

7.类的构造函数

class Person{
    public name :string ;
    constructor(name:string){
        this.name=name
    }

}

const person= new Person('jspang')
console.log(person.name)

//简化写法 这种写法就相当于你定义了一个name,然后在构造函数里进行了赋值，
class Person{
    constructor(public name:string){
    }
}

const person= new Person('jspang')
console.log(person.name)




子类继承父类并有构造函数的原则，就是在子类里写构造函数时，必须用super()调用父类的构造函数，如果需要传值，也必须进行传值操作

7.类中getter和setter，static,readonly

// 让私有属性 在外部可以访问和修改
class Xiaojiejie {
  constructor(private _age:number){}
  get age(){
      return this._age-10
  }
  set age(age:number){
    this._age=age
  }
}

const dajiao = new Xiaojiejie(28)
dajiao.age=25
console.log(dajiao.age)

// 静态方法，不用new
  static name
  static sayLove() {
    return "I Love you";
  }

//只读
public readonly _name :string;

8.抽象类

继承抽象类的类必须实现抽象方法才可以

abstract class Girl{
    abstract skill()  //因为没有具体的方法，所以我们这里不写括号

}

9.联合类型和类型保护

• | :表示联合类型 （有|就需要类型保护）
• 4种类型保护

1.断言保护(你告诉ts是什么类型, 他都信) as
interface Waiter {
  anjiao: boolean;
  say: () => {};
}

interface Teacher {
  anjiao: boolean;
  skill: () => {};
}

function judgeWho(animal: Waiter | Teacher) {
  if (animal.anjiao) {
    (animal as Teacher).skill();
  }else{
    (animal as Waiter).say();
  }
}

2.in语法
function judgeWhoTwo(animal: Waiter | Teacher) {
  if ("skill" in animal) {
    animal.skill();
  } else {
    animal.say();
  }
}

3.typeof语法
function add(first: string | number, second: string | number) {
  if (typeof first === "string" || typeof second === "string") {
    return `${first}${second}`;
  }
  return first + second;
}

4.instanceof语法
function addObj(first: object | NumberObj, second: object | NumberObj) {
  if (first instanceof NumberObj && second instanceof NumberObj) {
    return first.count + second.count;
  }
  return 0;
}

10.枚举

enum Status {
  MASSAGE,  //MASSAGE = 1 调整为从1开始
  SPA,
  DABAOJIAN,
}

枚举下标默认从0开始

11.泛型

// 普通泛型
function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
join < number, string > (1, "2");

//数组泛型
function join<T>(params: Array<T> { // ANY[])
  return params;
}
//可以推导，但是还是加上明确一点
join< string > ["123", "456"];


//类泛型
class SelectGirl<T> {
  constructor(private girls: T[]) {}
  getGirl(index: number): T {
    return this.girls[index];
  }
}
//可以推导，但是还是加上明确一点
const selectGirl = new SelectGirl() < string > ["大脚", "刘英", "晓红"];

//泛型继承
interface Girl {
  name: string;
}

class SelectGirl<T extends Girl> {
  constructor(private girls: T[]) {}
  getGirl(index: number): string {
    return this.girls[index].name;
  }
}

//泛型约束 （只能是数字和字符串）
class SelectGirl<T extends number | string> {
  
}

12.命名空间

namespace Home {
  class Header {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Header";
      document.body.appendChild(elem);
    }
  }

  class Content {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Content";
      document.body.appendChild(elem);
    }
  }

  class Footer {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Footer";
      document.body.appendChild(elem);
    }
  }

  export class Page {
    constructor() {
      new Header();
      new Content();
      new Footer();
    }
  }
}

new Home.Page();

12.映射类型参考（映射类型比较像修改类型的工具函数）

为 Vue3 学点 TypeScript, 解读高级类型