TS基础

ts+vue3笔记

一.TypeScript定义

定义:TypeScript是JavaScript的超集.TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统.
Ts不能直接运行在浏览器上,需要先被编译为js再运行.

TypeScript优势:
JS 不会检查变量的类型是否发生变化,但是TS会.
编译代码过程中,发现代码中的错误
可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

示例:

//js:
//动态类型:类型随时可以改变
let a = 123;
a = "123";//✔

//ts:
//静态类型:类型一旦被定义不可以改变
let b = 456;
b = "456"; //Type '"123"' is not assignable to type number

Ts的基础环境:
1️⃣安装node
2️⃣npm i typeScript -g (安装ts)
由于tsc ***.ts 会生成一个 ***.js文件
3️⃣ npm i -g ts-node 直接运行ts文件

二.静态类型

静态类型:就是你一旦定义了，将这个类型赋予某个变量，那么这个变量至始至终永远都是这个类型。ts使用静态类型，意味着使用静态类型的变量今后类型无法改变，类型的属性和方法也跟着确定了。

1.常用基础类型

可以将 TS 中的常用基础类型细分为两类：1 JS 已有类型 2 TS 新增类型
原始类型：number/string/boolean/null/undefined/symbol
对象类型：object（包括，数组、对象、函数等对象）

(1)JS 已有类型
1.原始类型
原始类型：number/string/boolean/null/undefined/symbol
特点：简单，这些类型，完全按照 JS 中类型的名称来书写

let age: number = 18
let myName: string = '老师'
let isLoading: boolean = false

// 等等...

2.对象类型:对象类型包括对象类型、数组类型、函数类型、类类型的定义。

• 对象类型

function getObj(obj: object): object {
    console.log(obj)
    return obj
  }

  console.log({ name: 'father', nick: '爸爸' })
  console.log(new String('床前明月光'))// new 一个String对象
  console.log(String)

• 数组类型(对象类型的一种)
  数组类型的两种写法：
  推荐使用 number[] 写法

// 写法一：
let numbers: number[] = [1, 3, 5]
// 写法二：
let strings: Array<string> = ['a', 'b', 'c']

(2).TS新增类型
联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any 等
注意：
原始类型在 TS 和 JS 中写法一致
对象类型在 TS 中更加细化，每个具体的对象（比如，数组、对象、函数）都有自己的类型语法

//类型注解 type annotation:我们告诉TS变量是什么类型。
let age: number = 18

说明：代码中的 : number 就是类型注解
作用：为变量添加类型约束。比如，上述代码中，约定变量 age 的类型为 number 类型
解释：约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错
错误演示：

// 错误代码：
// 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致。
let age: number = '18'

类型推断 type inference:TS会尝试去分析变量是什么类型。
如果TS能自动分析变量的类型，我们就什么都不需要做了。
如果TS不能自动分析变量的类型，我们就需要使用类型注解。

类型推断.png

function add(num1: number, num2: number) {
  return num1 + num2;
}
let num3 = add(1, 2);//num3推断为number
-----------------------------------------------------------
function add(num1: number, num2: number) {
  return num1 + num2 + "";
}
let num3 = add(1, 2);//num3推断为string
--------------------------------------------------------
//限制方法的返回值
function add(num1: number, num2: number) :number{
  //return num1 + num2 + "";//提示语法错误，返回的值不符合要求
  return num1 + num2;
}
let num3 = add(1, 2);
-------------------------------------------------------
//无返回值的函数
function print():void{
  console.log("123");
}
-------------------------------------------------------
//函数无法执行完
function errorEmiter():never{
  throw new Error();//throw error后,后面的代码无法继续执行
}
-----------------------------------------------------
//解构时类型注解的写法
function add({ first, second }: { first: number; second: number }): number {
  return first + second;
}
let num3 = add({ first: 1, second: 2 });

类型别名：
类型别名（自定义类型）：为任意类型起别名
使用场景：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用

type CustomArray = (number | string)[]

let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]

(3)数组和元组

1.数组

const arr: string[] = ["a", "b", "c"];
const arr2: number[] = [1, 2, 3];
const arr3: (string | number)[] = [1, "2", 3];

const undefinedArr: undefined[] = [undefined];

//类型别名
type User = { name: string; age: number };
const objectArr: { name: string; age: number }[] = [{ name: "张三", age: 18 }];
const objectArr2: User[] = [{ name: "张三", age: 18 }];

2元组:tuple:个数有限的数组，每一项的类型都是固定的形式，这种特殊的数组，我们称之为元组。()元组类型允许表示一个已知元素数量和类型的数组)

const userInfoArr: [string, string, number] = ["Dell", "male", 18];
const teacherList: [string, string, number][] = [
  ["Dell", "male", 18],
  ["john", "male", 19],
  ["lily", "female", 18],
];

（4）接口interface：通用的类型 :可以用来约束一个函数，对象，以及类的结构和类型

与别名（type）的区别：type可以代表string，number等，而interface只能用对象或者函数表示。
①直接传入对象

const setPersonName = (person: { name: string }, name: string): void => {
  person.name = name;
};

const getPersonName = (person: { name: string }): void => {
  console.log("name:" + person.name);
};

const person = {
  name: "张三",
};
setPersonName(person, "李四");
getPersonName(person);

从跟上面的代码,我们发现,person: { name: string }是重复使用的,我们可以使用interface或者type(别名)来代替,通常情况下,可以使用interface的我们一般不使用type.
②使用interface

interface Person {
  name: string;
  age?: 18;//当不确定属性是否一定需要时,可以这么处理
}

const setPersonName = (person: Person, name: string): void => {
  person.name = name;
};

const getPersonName = (person: Person): void => {
  console.log("name:" + person.name);
};

const person = {
  name: "张三",
};
setPersonName(person, "李四");
getPersonName(person);

参数不全.png

还有一个问题,当字面量传参时,是强校验,不能包含传入参数限定以外的属性,但是间接传入对象时,当传入对象满足所需参数限定的属性即可.

const setPersonName = (person: { name: string }, name: string): void => {
  person.name = name;
};

const getPersonName = (person: { name: string }): void => {
  console.log("name:" + person.name);
};

const person = {
  name: "张三",
};
setPersonName( {
  name: "张三",
  age:18
}, "李四");
getPersonName(person);

直接字面量传参的方式,包含限定外的参数时.png

而下面这种传参方式相较于直接传参,检验没有那么严格.

const setPersonName = (person: { name: string }, name: string): void => {
  person.name = name;
};

const getPersonName = (person: { name: string }): void => {
  console.log("name:" + person.name);
};

const person = {
  name: "张三",

};
setPersonName(person, "李四");
getPersonName(person);

或者我们也可以用这种方式来解决

interface Person {
  name: string;
  age?: number;
  [propsName: string]: any;//任意字符串类型的属性名
}
const setPersonName = (person: Person, name: string): void => {
  person.name = name;
};

const getPersonName = (person: Person): void => {
  console.log("name:" + person.name);
};

const person = {
  name: "张三",
  age: 18,
};
setPersonName(
  {
    name: "张三",
    age: 18,
    sex:"male"
  },
  "李四"
);
getPersonName(person);

class 可以应用interface

interface Person {
  name: string;
  age?: number;
  [propsName: string]: any;
  say(): string;
}
//类实现接口后,必须具备接口的属性
class User implements Person {
  name = "张三";
  say(): string {
    return "say Hello";
  }
}

接口可以继承接口:除了继承之前的接口属性,还可以有自己的属性及方法

interface Person {
  name: string;
  age?: number;
  [propsName: string]: any;
  say(): string;
}

interface Teacher extends Person {
  teach(): string;
}
const setPersonName = (person: Teacher, name: string): void => {
  person.name = name;
};
const getPersonName = (person: Teacher): void => {
  console.log("name:" + person.name);
};
const person = {
  name: "张三",
  age: 18,
  say() {
    return "say hello";
  },
  teach() {
    return "教学";
  },
};
setPersonName(person, "李四");
getPersonName(person);

接口的继承.png

interface定义函数:

interface sayHi {
  (word: string): string; //传一个string参数,返回一个string入参
}
const say: sayHi = (word: string) => {
  return word;
};
let sayContent = say("haha");

类的继承:

class Person {
  name = "dell";
  getName() {
    return this.name;
  }
}

class Teacher extends Person {
  getTeacherName() {
    return this.name;
  }
  //重写父类的方法
  getName() {
    return super.getName() + "lee";
  }
}

const teacher = new Teacher();

console.log("Teacher:", teacher.getTeacherName());
console.log("----------------------------");

console.log("重写父类方法:", teacher.getName());
//运行结果
Teacher: dell
----------------------------
重写父类方法: delllee

super作用:子类重写父类方法后,可以通过super来重新调用父类的方法.

类中的访问类型和构造器:
访问类型:public protected private
public:允许在类的内外调用
protected:允许在类内和继承的子类中使用
private:允许在类内调用

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

let customer = new Customer("dell");
console.log(customer.name);

等价于

class Customer {
  //传统写法
  // name: string;
  // constructor(name: string) {
  //   this.name = name;
  // }
  //简化写法
  constructor(public name: string) {}
}

let customer = new Customer("dell");
console.log(customer.name);

类继承时,父类有构造器,子类也有构造器时,子类的构造器中要手动的调用super()方法,来调用父类的构造函数.并且需要按照父类构造器的参数来传参.

class Person {
  //传统写法
  // name: string;
  // constructor(name: string) {
  //   this.name = name;
  // }
  //简化写法
  constructor(public name: string) {}
}

class Teacher extends Person {
  constructor(public age: number) {
    super("dell");
  }
}

let person = new Person("dell");

console.log(person.name);

let teacher = new Teacher(18);

console.log(teacher.age);//18
console.log(teacher.name);//dell
//子类重写父类的方法
class Person {
  constructor(public name: string, public age: number) {}
  say() {
    console.log(`我的名字是${this.name},我的年龄是:${this.age}`);
  }
}

class Student extends Person {
  constructor(name: string, age: number, public school: string) {
    super(name, age);
  }

  //重写父类的方法
  say() {
    console.log(
      `我的名字是${this.name},我的年龄是:${this.age},我来自${this.school}`
    );
  }
}
let person = new Person("张三", 18);
let hlbt = new Student("哈利波特", 18, "格兰芬多");
hlbt.say();

静态属性:getter和setter

//类中的私有属性,为了安全不直接暴露给外部,但是可以对外提供get和set//方法,对其进行处理后,对外提供
class People {
  constructor(private _name: string) {}
  get name() {
    return this._name + "lee";
  }
  set name(name: string) {
    this._name = name;
  }
}

const people = new People("blouse");
console.log(people.name);
people.name = "李小龙";
console.log(people.name);

类想要创建唯一的实例(单例模式),限制通过new的方式创建多个不同的实例,可以通过将构造方法私有化的方法.

class Demo {
  private constructor() {}
}
class demo1 = new Demo("");

类限制通过new的方式创建实例.png

但是上面的Demo怎么去创建唯一实例呢

class Demo {
  //static 静态的,将属性挂载在类上,而不是实例上,即实例话对象不可调用,只有类本身和其子类使用.
  private static instance: Demo;
  private constructor() {}

  //对外提供创建唯一实例的方法
  static getInstance() {
    //判断是否已经存在instance
    if (!this.instance) {
      this.instance = new Demo();
    }
    return this.instance;
  }
}
const demo1 = Demo.getInstance();
const demo2 = Demo.getInstance();
//这样,创建的两个实例是完全相等的
console.log(demo1 === demo2);//true

readonly:只能读不能改

class Color {
  readonly name: string;
  constructor(name: string) {
    this.name = name;
  }
}
const red = new Color("red");

console.log(red.name);//red
red.name = "dark red";

readonly只读.png

类的多态:多态指的是父类型的引用指向了子类型的对象，不同类型的对象针对相同的方法，产生了不同的行为。

(()=>{
// 定义一个父类
class Animal {
    // 定义一个属性
    name:string
    // 定义一个构造函数
    constructor(name:string){
        this.name = name
    }
    // 定义方法
    sayRunDistance(distance:number = 0){
        console.log(`我跑了${distance}米！！！！！！`)
    }
}

//定义一个子类1
class Dog extends Animal {
    // 构造函数
    constructor (name:string) {
    // 调用父类的构造函数，实现子类中属性的初始化操作
        super(name)
    }
    // 实例方法，重写父类中的实例方法
    sayRun(distance:number = 5) {
        console.log(`我跑了${distance}米！！！！！！`)
    }
}

//定义一个子类2
class Cat extends Animal {
    // 构造函数
    constructor (name:string) {
    // 调用父类的构造函数，实现子类中属性的初始化操作
        super(name)
    }
    // 实例方法，重写父类中的实例方法
    sayRun(distance:number = 10) {
        console.log(`我跑了${distance}米！`)
    }
}
// 实例化父类对象
const Animal = new Animal ('大毛')
Animal.sayRun();
// 实例化子类对象1
const Dog = new Dog('泰迪')
Dog .sayRunDistance();
// 实例化子类对象2
const Cat = new Cat ('布偶猫')
Cat .sayRunDistance();
// 父类型和子类型的关系：父子关系，此时，父类类型创建子类的对象
const Dog1 :Animal = new Dog('金毛');
const Cat1 :Animal = new Cat('蓝短');
Dog1.sayRun();
Cat1.sayRun();
})

多态的作用:

// 定义一个函数，该函数需要的参数是Animal类型的
function showRun (ani:Animal){
    ani.sayRun()
}
// 此时将Animal的子类作为参数传进去
showRun(Dog1)
showRun(Cat1)

抽象类:服务于子类(派生类),一般作为子类的基类来使用.

1.关键字abstract
2.抽象类不允许被实例化，抽象类的存在只为了向子类服务
3.抽象类中包含抽象属性/方法，和普通属性/方法
4.被抽象的属性/方法不允许拥有具体的内容
5.子类如果不是抽象类，就必须将所有抽象父类的方法/属性具体化

abstract class Person {
    name: string;
    constructor(name) {
     this.name = name;
    }
    abstract sayHi(); //抽象方法
}

//抽象类不允许被实例化
let test = new Person('小明');

//报错
//Cannot create an instance of an abstract class.
//抽象类中的抽象方法必须在子类中实现
class Child extends Person {
  run() {
    console.log('learn to run...');
  }
}

let child = new Child();

//这样写会报错
//Non-abstract class 'Child' does not implement inherited abstract member 'sayHi' from class 'Person'.
-------------------------------------------------------------------------------------
//修改成下面这样可以正常编译通过
class Child extends Person {
  run() {
    console.log(this.name + ' ' + 'learn to run...');
  }

  sayHi() {
    console.log('hello,everyone');
  }
}

let child = new Child('小明');
child.sayHi();
child.run();

interface和abbstract的异同.png

函数的重载:函数名相同,但是函数的参数级个数不相同.

//函数重载声明
  function add(param1: string, param2: string): string;
  function add(param1: number, param2: number): string;
  //函数的重载
  function add(param1: string | number, param2: string | number) {
    if (typeof param1 === "string" && typeof param2 === "string") {
      return `${param1}${param2}`;
    } else if (typeof param1 === "number" && typeof param2 === "number") {
      return param1 + param2;
    }
  }
  add("东方", "不败");//东方不败
  add(10, 20);//30
  add("东方", 20);//报错

函数重载.png

构造函数也可以进行重载

type people = {
  name: string;
  age: number;
  sex?: string;
};
const san: people = {
  name: "山姆",
  age: 18,
  sex: "男",
};
console.log("type类型：", typeof san); //object

class Love {
  public name: string;
  public age: number;
  public sex: string;

  constructor(name_: string, age_: number);
  constructor(param: people);
  //由于构造函数本身不返回任何值，默认this且隐藏，所以重载和实现签名都不返回
  constructor(nameOrParam: any, age_: number = 0) {
    if (typeof nameOrParam === "object") {
      this.name = nameOrParam.name;
      this.age = nameOrParam.age;
      this.sex = nameOrParam.sex;
    } else {
      this.name = nameOrParam;
      this.age = age_;
      this.sex = "未知";
    }
  }

  public show(): string {
    let str = `这是一位${this.age}的${this.sex},名叫${this.name}`;
    console.log(str);
    return str;
  }
}

const a = new Love("小丽", 18);
const b = new Love(san);
a.show(); //这是一位18的未知,名叫小丽
b.show(); //这是一位18的男,名叫山姆