前言
筆者最近有在學習 TypeScript 的 Class ，雖然現在實務上寫 Class 的機會變得很少，至從 React 出 Hooks 後就沒再使用了，重要性好像沒有以前來得麽重，但不可否認的是 Class 還是在開發上扮演一個很重要的角色，所以就跟著筆者進入 TypeScript X Class 的世界吧!
在開始之前，建議各位讀者可以跟著一起寫程式碼，這樣印象會更深刻，並在這裡推薦 TS的練習場 可以線上書寫 TypeScript 非常好用，推薦給各位!
今天筆記的內容會是: Public & Private, inheritance, super, Getters & Setters, Static, Protected，有興趣的讀者歡迎繼續往下看
進入正題
Public & Private 公開和私有
TypeScript 預設是
public，所以public我們就不多做介紹了
private 代表屬性是 class 私有的，不能從外界直接對屬性做操作，外界包含: Instance(實例), 子類別
(不知道 Instance(實例) 的讀者可以參考這篇文章)
class mySecret {
private password: string = '';
email: string = '';
}這邊可以看到 password 是 private的
那 Private 有什麼用?
Private 只能在自己的 Class(類別) 中使用，那如果想使用 Private 的值有辦法嗎？其實是有的，這部分我們後面會說到
Property ‘password’ is private and only accessible within class ‘mySecret’.
從上面的程式碼，我們可以看到 TypeScript 認為 password 是 private 的，所以只允許 mySecret 調用
JavaScript 如果也想做到類似的操作，可以在變數前面加上 # 即可，例如: #secret
inheritance 繼承
要講到 繼承 必須要講到 extends
class Parent {
// 略
}
class Children extends Parent{
// 略
}上方程式碼就是使用 extends 使 Children 繼承 Parent
可以看到 Point2 使用 extends 繼承了 Point ，連同繼承了 Point 裡面的 x 跟 y
function 一樣可以繼承
super
如果子類別 (sub-class) 有定義自己的 constructor，必須在 constructor 方法中顯示地調用 super()，來調用父類別的 constructor，否則會出現錯誤
Getters & Setters 存取子(Accessors)
之前我們有提到 Public & Private，且我們都知道 Private 只能在自己的類別中做使用，不過有沒有可能會有那麼一個 moment 想要使用 Private 的資料？
這時候有兩種做法:
- 把 Private 的資料改成 Public，但這樣會導致我們的資料公開，顯然不是我們想要的
- 使用 Getters & Setters
class VALIDATION_PASSWORD {
private mySecret: string = "secret password";
// 定義getter存取子 讀取 屬性值
get getMySecret(): string {
return this.mySecret
}
// 定義setter存取子 修改 屬性值
set getMySecret(password: string){
if(password && password === this.mySecret){
console.log('密碼正確，是本人')
}else {
console.error('密碼錯誤')
}
}
}
const Janlin002 = new VALIDATION_PASSWORD()
Janlin002.getMySecret = 'secret password'以下是幾點在使用 Getter & Setter 上需要特別注意的事情:
- Getter & Setter 一定要一起使用，如果只寫
get或是只寫set都會報錯
2. Getter 不能有任何參數，而且一定要有回傳值
3. Setter只能有一個參數
4. 要使用 Getter & Setter，編譯器輸出的 JS 一定要 ES5以上，不支援 ES3 版本以下。
(Accessors are only available when targeting ECMAScript 5 and higher.)
如果遇到以下這種問題，可以使用下方程式碼解決(es5 跟 app.ts 可針對專案結構去做客製化)
tsc -t es5 app.tsStatic 靜態
正常來說，Class 都要被創建為 實例(Instance) 後，才有辦法使用在 Class 內所描述的方法，但只要使用 static，就能直接在 Class 上呼叫此方法
class Person {
static coding(){
console.log('我在寫程式')
}
}
Person.coding()正常來說我們必須要 new 一個 Person，才能去使用 coding 這個 function 不過因為 coding 前面加上了 static ，所以他可以省去創建為實例的步驟
Protected 保護
Protected 和 Private其實很類似都是私有的，外界無法直接取得，唯一的差別就是 Protected 可以被自己的 子類別 所使用，Private 不行
這邊我建立一個 Login 類別，並且使用 User 去繼承他，再用 Jan 去實例化，可以發現 console.log 出來 123456 ，不過改成 private 就會報錯
class Login {
protected password: string = '123456';
}
class User extends Login {
userLogin() :void{
console.log(this.password) // 123456
}
}
const Jan = new User()
Jan.userLogin()class Login {
private password: string = '123456';
}
class User extends Login {
userLogin() :void{
console.log(this.password) // Property 'password' is private and only accessible within class 'Login'.
}
}
const Jan = new User()
Jan.userLogin()如果有任何錯誤都很歡迎留言給我，大家一起學好 TypeScript !!!
參考資料:
