TypeScript学习的总结

Vue3-TS(ts笔记)

1.成员修饰符

public 公共的,都可以访问
	例==>public name:string
private 私有的,只能内部访问,外部谁也访问不了
	例==>private age:number
protected 受保护的,只有内部和子类可以访问
	例==>protected gender:string
readonly 只读,不能在外部进行修改,内部类中普通方法也不能修改readonly修饰的元素,"构造函数"可以对其进行修改

constructor中也可以使用成员修饰符
	例==>constructor( public name:string = "zqk")
	此时name叫做参数属性

2.存取器

​ get 和set来控制存和取数据

例==>
	//获取fullName的值
	get fullName(){
	return this.firstName+"_"+this.lastName
	}
	//设置fullName
	set fullName(value){
	let names = value.split("_")
	this.firstName = names[0]
	this.lastName = names[1]
	}

3.静态成员修饰符static

//通过static修饰的属性或方法,只能通过自身类.静态属性来访问该成员数据,子类和实例对象都不能访问该属性,即通过static修饰的属性,在构造函数中也不能使用this.该静态属性来赋值,因为this是实例对象,静态属性不能被实例对象所访问,所以不能用this
	例==>
	static name1:string
	constructor(name1:string){
		this.name1 = name1 //报错
	}

4.抽象类 abstract

//抽象类,不能被实例化的类,只能被子类继承.其也可以有抽象方法和实例方法,抽象方法得被子类来实现
	例==>
	abstract class Person{
	 abstract eat() //抽象方法,其里面不能实现任何代码
	}
	//子类person来实现抽象类父类中的eat方法
	class person extends Person{
		eat(){
		console.log("跑着吃")
		}
	}
	const p1 = new person()
	p1.eat() // 跑着吃

5.可选参数与默认参数

//可选参数:函数声明时,内部的参数使用了?进行修饰,就表示该参数可以传也可以不传
//默认参数:函数声明时,内部的参数有自己的默认值,此时这个参数就可以叫做默认值
	例==>function fn(firstName:string = "东方",lastName?:string):string{
	if(lastName){
	return firstName+"_"+lastName
    }else{
        return firstName
    }
        }

6.剩余参数(rest参数)

//...args将总和所有的剩余的实参,然后放进数组中,...args只能放在最后
function fn(str:string,...args:string[]){
log(str)
log(args)
}
fn("zqk","a","b","c","d") // 输出:zqk ["a","b","c","d"]

7.函数重载

//函数重载:函数名字相同,函数的参数及个数不同
//函数重载声明,在此处就是限制了参数及返回值,要么都是字符串类型
//,要么都是数字类型,其它的都为错误类型
function add(x:string,b:string):string
function add(x:number,b:number):number

//函数声明
function add(x:string|number,b:string|number):string|number{
.....
}

8.泛型

泛型在参数类型不确定时使用 语法:<T>
	例==>function fn<T>(x:T):T[]{
		let arr:T[] = []
		arr.push(x)
		return arr
	}
	const num = fn<number>(5)
	const str = fn<string>("zqk")
2.多个泛型参数的函数
	function fn<K,V>(x:K,y:V):[K,V]{
	return [x,y]
	}
	const arr1 = fn<string,number>("zqk",99)
	const arr2 = fn<number,string>(99,"zqk")

9.泛型类

//定义一个泛型类
class GeneriNumber<T>{
	defaultValue:T
	add:(x:T,y:T)=>T
}
//实例这个泛型类
const n1:GeneriNumber<number> = new GeneriNumber<number>()
//实现
n1.defaultValue = 5
n1.add = function(x,y){
return x+y
}

10.泛型约束

interface ILength{
	length:number
}
function fn<T extends ILength>(x:T):number{
return x.length
}
log(fn<string>("zqkymm"))//输出6
log(fn<number>(60)) //报错,数字上没有length这个属性