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 = ['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的男,名叫山姆