TS -- 類 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # TS -- 類 ~~~ 1.'TS' 中的類和'ES6' 的類整體一樣的，有部分細節差異，比如'TS'中的類會提供修飾符一類的，下面的案例會說明 2.面向對象編程的三大特點 2.1.'封裝（Encapsulation）'：將對數據的操作細節隱藏起來，只暴露對外的接口。外界調用端不需要（也不可能）知道細節，就能通過對外提供的接口來訪問該對象， 2.2.'繼承（Inheritance）'：子類繼承父類，子類除了擁有父類的所有特性外，還有一些更具體的特性。 2.3.'多態（Polymorphism）'：由繼承而產生了相關的不同的類，對同一個方法可以有不同的響應。 ~~~ >[danger] ##### 創建一個簡單的ts類 ~~~ 1.和es6不同,下面的代碼分成三個部分，第一部分定義的參數，第二部分構造函數，第三個部分就是類的方法 ~~~ ~~~ class Point{ public x:number public y:number constructor(x:number,y:number){ this.x = x this.y = y } public getPosition(){ return `(${this.x},${this.y})` } } const point = new Point(2,3) console.log(point.getPosition()) // (2,3) ~~~ >[danger] ##### 繼承 ~~~ 1.'TS' 的繼承和'ES6' 的繼承寫法和特性也相似都是使用'extends' 2.繼承的子類也有'super()' ~~~ ~~~ class Parent { public name: string constructor(name: string) { this.name = name } } class Child extends Parent { constructor(name: string) { super(name) } } ~~~ >[info] ## public / private / protected-- 公共/私有/受保護的 ~~~ ~~~ >[danger] ##### public -- 公共 ~~~ 1.一些強類型語言是必須要寫這些修飾符的，在'TS'默認是'public'，也就是說 'public' 修飾的是可以省略的 2.通過 "super" 關鍵字只能訪問基類的公共方法和受保護方法，屬性是無法訪問的 ~~~ ~~~ class Parent { public age: number constructor(age: number) { this.age = age } } class Child extends Parent { constructor(age: number) { super(age) // console.log(super.age) // 錯誤提示：通過 "super" 關鍵字只能訪問基類的公共方法和受保護方法 } } const child = new Child(19) ~~~ >[danger] ##### private -- 私有的 ~~~ 1.當成員被標記成private時，它就不能在聲明它的類的外部訪問，簡單的說，只有自己的class內部可以訪問，即使是自己的'實例'，'繼承的子類' 都無法訪問被'private' 修飾的內容 ~~~ ~~~ class Parent { private name: string constructor(name: string) { this.name = name // 我能調用private修飾的 } public getName(){ return `我的名字${this.name}` // 我能調用private修飾的 } } class Child extends Parent{ constructor(name:string){ super(name) } getTest(){ console.log(this.name) // 兒子也不讓用錯誤提示：屬性“name”為私有屬性，只能在類“Parent”中訪問。 } } const son = new Parent('wang') // son.name = "ss" // 提示錯誤：屬性“name”為私有屬性，只能在類“Parent”中訪問。 console.log(son.getName()) // 可以訪問，打印結果：我的名字wang const child = new Child('wang') // child.getTest() // 這里是錯誤的因為Child 類也無法使用繼承父類的私有熟悉或者方法 ~~~ * 私有屬性修飾在構造函數 ~~~ 1.是無法創建實例的，但是可以通過靜態方法變相創建實例 ~~~ ~~~ class Student extends Person { private constructor (name: string, age: number) { super(name, age) console.log(this.gender) } static create (name: string, age: number) { return new Student(name, age) } } const tom = new Person('tom', 18) console.log(tom.name) ~~~ >[danger] ##### protected -- 受保護的（可以用來禁止創建實例） ~~~ 1.修飾的屬性或方法是受保護的，它和 private 類似，區別是它在子類中也是允許被訪問的，簡單的說'子類是可以訪問protected 修飾的' 實例是不可以的 2.修飾的是'constructor' 則當前類不能創建實例 3.使用protected 不能直接創建'對象使用屬性'，和private不同他可以在子類中使用，相同點都可以在自身定義類中使用 ~~~ ~~~ class Parent { // private age: number protected age: number protected constructor(age: number) { this.age = age } protected getAge() { return this.age } } // 解釋第三條 // const p = new Parent(18) //protected 修飾constructor不能創建實例報錯提示：類“Parent”的構造函數是受保護的，僅可在類聲明中訪問。 class Child extends Parent { constructor(age: number) { console.log(super.getAge()) // 可以訪問父類中的protected方法 } } const child = new Child(19) ~~~ >[info] ## 其他特性 >[danger] ##### readonly -- 只讀屬性 ~~~ 1.你可以使用readonly關鍵字將屬性設置為只讀的。只讀屬性必須在聲明時或構造函數里被初始化。 ~~~ ~~~ class Octopus { public readonly name: string; public readonly numberOfLegs: number = 8; constructor (theName: string) { this.name = theName; } } let dad = new Octopus("Man with the 8 strong legs"); dad.name = "Man with the 3-piece suit"; // 錯誤! name 是只讀的. ~~~ >[danger] ##### 參數屬性 -- 在參數前加修飾符自動幫我們創建this屬性 ~~~ 1.在'constructor' 的參數中加修飾符，相當于省略了下面的代碼注釋部分 ~~~ ~~~ class A { // public name:string constructor(public name: string) { // this.name = name } } const a1 = new A('lison') console.log(a1.name) ~~~ >[danger] ##### 靜態屬性 -- static修飾 ~~~ 1.和'es6'一樣'ts' 也有靜態'方法'，但是'ts' 提供了靜態屬性，屬性和方法都是'static' 修飾 2.左右也是一樣的只能類來使用靜態屬性 ~~~ ~~~ class Parent { public static getAge() { return Parent.age } private static age: number = 18 constructor() {} } const p = new Parent() // console.log(p.age) // age 是靜態的屬性所以實例是不能訪問的 // console.log(Parent.age) // 雖然有了類但是也是不能訪問的，因為用了private修飾用public可以訪問 ~~~ >[danger] ##### 類選填屬性 -- '?' ~~~ 1.被標記的選填屬性如果不填則'undefined' ~~~ ~~~ class Info { public name: string public age?: number constructor(name: string, age?: number, public sex?: string) { this.name = name this.age = age } } const info1 = new Info('lison') console.log(info1) // {sex: undefined, name: "lison", age: undefined} const info3 = new Info('lison', 18) console.log(info3) // {sex: undefined, name: "lison", age: 18} const info4 = new Info('lison', 18, 'man') console.log(info4) // {sex: "man", name: "lison", age: 18} ~~~ >[danger] ##### 也支持es6 --getter /setter ~~~ 1.下面案例來自官網 ~~~ ~~~ let passcode = "secret passcode"; class Employee { private _fullName: string; get fullName(): string { return this._fullName; } set fullName(newName: string) { if (passcode && passcode == "secret passcode") { this._fullName = newName; } else { console.log("Error: Unauthorized update of employee!"); } } } let employee = new Employee(); employee.fullName = "Bob Smith"; if (employee.fullName) { alert(employee.fullName); } ~~~ >[danger] ##### 抽象類abstract ~~~ 1.抽象類是不允許被實例化的 2.繼承抽象類的類必須去實現實例中的抽象類中的'抽象方法'和'抽象屬性' 3.http://www.importnew.com/12399.html ~~~ ~~~ abstract class People { public sex:string public abstract _name: string public constructor(sex){ this.sex = sex } abstract get insideName(): string abstract set insideName(value: string) abstract speak(word:string):string getSex(){ return this.sex } } class P extends People { public _name: string public insideName: string constructor(_name:string,sex:string){ super(sex) this._name =_name this.insideName = this.insideName } speak(word:string):string { return word } } ~~~ >[danger] ##### 接口和類 ~~~ 1.接口可以多繼承，抽象類不行 ~~~ ~~~ interface FoodInterface { type: string } class FoodClass implements FoodInterface { public type: string } class A { protected name: string } interface I extends A {} class B extends A implements I { public name: string } ~~~ >[danger] ##### 接口配合類 ~~~ 1.接口的作用是配合不同類，但是他們具有相同約束，下面為例人和動物是兩個類，但是他們有相同的行為可以通過接口提取出來，下面的例子不太準確表示的，人屬于動物類的動物是可以做人的父類，但是如果是兩個毫無相關且有同樣行為的類就可以嘗試用接口進行約束 ~~~ ~~~ interface Eat { eat (food: string): void } interface Run { run (distance: number): void } class Person implements Eat, Run { eat (food: string): void { console.log(`優雅的進餐: ${food}`) } run (distance: number) { console.log(`直立行走: ${distance}`) } } class Animal implements Eat, Run { eat (food: string): void { console.log(`呼嚕呼嚕的吃: ${food}`) } run (distance: number) { console.log(`爬行: ${distance}`) } } ~~~ >[danger] ##### 定義一個類創建實例為參數 ~~~ 1.使用 new()=> 類，來規定傳入的是一個類作為參數 ~~~ ~~~ const create = <T>(c:new()=>T):T=>{ return new c() } class Infos{ public age:number constructor(){ this.age = 1 } } create(Infos) ~~~