ts中定义类、类的继承、修饰符

ES6与TypeScript类详解
本文深入解析ES6的class类语法,并详细介绍TypeScript如何增强类定义,包括属性类型声明、构造函数、方法及访问修饰符如public、private、protected、readonly和static的使用。同时,探讨了类的继承和成员访问控制。

首先,简单介绍ES6的class类

class Foo {
	constructor(name,age){ // 实例前的构造函数,实例添加name/age属性
		this.name = name
		this.age = age
	}
	getName () { // 原型添加getName()方法
		return `My name is ${this.name} age : ${this.age}`
	}
}

let foo = new Foo('小明',12) // Foo {name:'小名',age:12,__proto__:getName(){}}

ts定义类:

class Foo {
	public name:string // 需要提前声明值,默认为public
	public age:number
	public constructor(_name:string,_age:number){
		this.name = _name
		this.age = _age
	}
	public getName ():string { // 原型方法,指定返回值为string类型
		return `My name is ${this.name} age : ${this.age}`
	}
}

let foo = new Foo('小明',12) // Foo {name:'小名',age:12,__proto__:getName(){}}

这里指定name和age的类型,附部分类型:

attr : sting // sting类型
attr : number // number类型
attr : boolean // boolean类型
attr : string[] // 数组的每一项必须是string类型
attr : number[] // 数组每一项必须是number类型
attr : Array< any>// 数组每一项可以为任意类型
attr : [string,number] // 数组每一项必须是指定类型
attr ?: string // 非必传

提前声明值可以利用参数属性

class Foo {
	public constructor(public name:string,public age:number){}
	public getName ():void {
		console.log(this.name,this.age)
	}
}
let foo = new Foo(‘小明’,12) // Foo {name:'小明',age:12,__proto__:getName(){}}

介绍public、private、protected、readonly、static 等标识

  • public (默认为public,也可以设置为public)
class Foo {
	pulbic name:string
	public constructor (_name?:string) {
		this.name = _name || ''
	}
}
let foo = new Foo('小明') // Foo {name:'小名'}
  • private (可以被继承,但是无法在实例中访问)
class Foo {
	private name:string
	constructor (_name:string) {
		this.name = _name
	}
}
let foo = new Foo('小明') // Foo {name:'小名'}
console.log(foo.name) //error: Property 'name' is private;
  • protected (与private类似,但是当构造函数是protected时,无法实例化,只能被继承)
class Foo {
	protected name:string
	protected constructor(_name:string){
		this.name = _name
	}
}

let foo = new Foo('小明')  //error: Constructor of class 'Foo' is protected
  • readonly (只读属性,无法被修改/克隆)
class Foo {
	readonly name:string
	public constructor(_name:string){
		this.name = _name
	}
}

let foo = new Foo('小明')  // Foo {name:'小明'}
foo.name = '小红' //error: Cannot assign to 'name' because it is a constant or a read-only property.
  • static (静态属性,不能被实例访问,在类里面访问时,需要加上类名)
class Foo {
	static age:number = 12
	public constructor(private name:string){}
	pubilc getAge ():void {
		console.log(Foo.age)
	}
}

let foo = new Foo('小明')  // Foo {name:'小明',__proto__:getAge(){}}
console.log(foo.getAge()) // 12 

ts继承:

class Foo {
	public name:string
	public age:number
	public construcor (_name:string,_age:number) {
		this.name = _name
		this.age = _age
	}
	getName ():string {
		return this.name
	}
}

class Bar extends Foo {
	private className:string
	public constructor (_name:string,_age:number,_className:string) {
		super(_name,_age)
		this.calssName = _className
	}
	public getClassName ():void {
		console.log(this.className)
	}
}

let bar = new Bar('小明',12,'一年级') // Bar {name:'小明',age:12,className:'一年级'}
console.log(bar.getName()) // 小明
console.log(bar.getClassName()) // 一年级
TypeScript修饰符有以下几种: 1. public public是默认修饰符,即不修饰符时默认为public。public修饰的属性或方法可以在的内部和外部使用。 2. private private修饰的属性或方法只能的内部使用,无法在的外部使用。 3. protected protected修饰的属性或方法可以在的内部和子中使用,但无法在的外部使用。 4. readonly readonly修饰的属性只能在初始化时或构造函数中赋值,之后就无法再修改。 示例代码: ```typescript class Person { public name: string; // 公共属性 private age: number; // 私有属性 protected gender: string; // 保护属性 readonly id: number; // 只读属性 constructor(name: string, age: number, gender: string, id: number) { this.name = name; this.age = age; this.gender = gender; this.id = id; } public sayHello() { // 公共方法 console.log(`Hello, my name is ${this.name}.`); } private getAge() { // 私有方法 return this.age; } protected getGender() { // 保护方法 return this.gender; } } class Student extends Person { public getGenderAndAge() { console.log(`My gender is ${this.getGender()} and age is ${this.getAge()}.`); } } const person = new Person('Tom', 18, 'male', 1001); console.log(person.name); // Tom // console.log(person.age); // 无法访问 // console.log(person.gender); // 无法访问 // person.id = 1002; // 无法修改 person.sayHello(); // Hello, my name is Tom. const student = new Student('Jerry', 17, 'female', 1002); // console.log(student.age); // 无法访问 // console.log(student.gender); // 无法访问 console.log(student.name); // Jerry console.log(student.id); // 1002 student.getGenderAndAge(); // My gender is female and age is undefined. ``` 在上面的示例代码中,我们定义了一个Person,其中包含了公共属性、私有属性、保护属性、只读属性、公共方法、私有方法和保护方法。这些属性和方法都有不同的修饰符,可以在不同的场景下使用。同时,我们还定义了一个Student继承自Person,可以访问Person中的保护属性和保护方法。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小小白zyw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值