[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-- 公共/私有/受保護的
~~~
1.public 修飾的是在任何地方可見、公有的屬性或方法;
2.private 修飾的是僅在同一類中可見、私有的屬性或方法;
3.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)
~~~
- TypeSprict -- 了解
- TS-- 搭建(一)webpack版本
- TS -- 搭建(二)直接使用
- TS -- 基本類型
- ts -- 類型推導和字面量類型
- ts -- 類型擴展和類型縮小
- ts -- any場景
- ts -- 使用unknown 還是 any
- ts -- any/never/unknown
- ts -- 斷言
- ts -- 類型大小寫疑惑
- ts -- 數組類型 [] 還是泛型疑惑
- TS -- 枚舉
- 外部枚舉
- TS -- 函數
- ts -- 重載作用
- ts -- 05 this is
- 解構
- TS -- 接口
- 繞過接口的多余參數檢查
- Interface 與 Type 的區別
- TS -- 類
- ts -- 類作為類型
- TS -- 交叉和聯合 類型
- ts -- 交叉類型
- ts -- 聯合類型
- ts -- 交叉和聯合優先級
- ts -- 類型縮減
- TS -- 什么是泛型
- ts -- 泛型函數表達式/函數別名/接口
- ts -- 泛型類
- ts -- extends 泛型約束
- ts -- 泛型new
- ts -- Ts的泛型
- TS -- 縮小類型詳解類型守衛
- TS -- 類型兼容性
- TS -- 命名空間與模塊化
- ts -- 模塊化
- ts -- 命名空間
- TS -- 工具方法
- Record -- 一組屬性 K(類型 T)
- Exclude -- 從聯合類型中去除指定的類
- Extract -- 聯合類型交集
- NonNullable -- 從聯合類型中去除 null 或者 undefined
- Partial -- 將所有屬性變為可選
- Required -- 所有屬性變為必填
- Readonly -- 所有屬性只讀
- Pick -- 類型中選取出指定的鍵值
- Omit -- 去除指定的鍵值