ts中定義類、類的繼承、修飾符

首先，簡單介紹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()) // 一年級