TypeScript中Getter/Setter用法詳解
一、寫在前面
第一天
寫在前面，先看幾段代碼，用你的大腦編譯運行一下試試？ No errors, no warnings!
const config = new Config() config.version = '1.0.0' console.log(config.version)
乍一看，這代碼會打印 1.0.0，于是跑一下試試？
于是打開 Config 類看看，好家伙
export class Config {
private _version!: string
public get version(): string {
return this._version
}
public set version(value: string) {
this._version = '莫挨勞資'
}
}
原來是 getter/setter ??！這玩意我熟！原來 config.version = '1.0.0' 不是給 Config 的 version 字段賦值，而是調(diào)用了一個 version 的 set 方法。
這點我可是很不喜歡的，這已經(jīng)讓人產(chǎn)生了心智負擔，賦值、方法調(diào)用傻傻分不清楚，還得看了實現(xiàn)才知道。
第二天
你再問我上面的問題，我可不敢拍著胸脯說答案了。
于是第二個問題又來了
const user = new User() user.name = '彭于晏' user.age = 33 user.length = '15cm' console.log(JSON.stringify(user))
憑我三十余年生活經(jīng)驗，這不是在序列化JSON到字符串嗎？分分鐘在腦海里編譯運行，肯定輸出這個?。?/p>
{"name":"彭于晏","age":33,"length":"15cm"}
因為昨天上當了，今天還是驗證跑一下看看結(jié)果：
額，這是什么時候走漏的風聲？
表示不服，再一次打開 User 類看看究竟，不看不知道，一看好家伙～
export class User {
/**
* # 昵稱
*/
private nickname!: string
public get name(): string {
return this.nickname
}
public set name(value: string) {
this.nickname = 'Hamm'
}
/**
* # 年齡
*/
private year!: number
public get age(): number {
return this.year
}
public set age(value: number) {
this.year = 22
}
/**
* # 長度
*/
private len!: string
public get length(): string {
return this.len
}
public set length(value: string) {
this.len = `${parseInt(value.replace('cm', '')) + 3}cm`
}
}
這誰干的！干得漂亮?。。?/strong>
以上劇情純屬事實，如有雷同，你也很棒！
二、我不太喜歡Getter和Setter
1. vscode自動重構(gòu)的屬性名帶下劃線
vscode 提供了屬性一鍵自動生成 getter/setter，為了保持屬性名和方法名不重復，于是會自動生成一個屬性名前面加下劃線的新屬性，然后將原屬性干掉并生成 get set 兩個方法。
生成的最終結(jié)果如下圖
雖然在生成過程中可以新起一個自定義屬性名，但我真的很煩，如果使用默認，我的 eslint 規(guī)則又會認為 屬性名不符合規(guī)范。。。
2. 調(diào)用方的心智負擔
如下面之前貼過的代碼：
const config = new Config() config.version = '1.0.0' console.log(config.version)
在不閱讀 Config 類的情況下，會主觀認為 config.version = "1.0.0" 是在給 屬性賦值，而調(diào)用 let version = config.version 會認為是將剛才賦的值取出來使用。
3. Get/Set方法和普通方法區(qū)別對待
在有 private protected public 等訪問修飾符的情況下，類本身有 屬性、方法、構(gòu)造 就已經(jīng)足夠滿足需求了，這里非得上一個 get set 連寫法都要區(qū)別對待的特殊方法形式，構(gòu)造方法 constructor 表示第一個不服，勞資都沒特殊對待，憑什么它倆要特殊對待？
4. 我理解的屬性
屬性應該是一個類上最基礎(chǔ)的最終數(shù)據(jù)存儲，設(shè)置到屬性上的值是什么，那取出來的值也一定得是什么：
老張，我這瓶水放你這，一會我來拿。
這里我其實是調(diào)用了老張的一個賦值。所以一會回來拿到的水，還是那瓶水：
const store = new Store() store.water = "哇哈哈" // a few moments later console.log(store.water) // 哇哈哈
所以，上面的輸出一定得是 哇哈哈 才合理, 第一天碰到的問題，就不應該存在。
5. 我理解的方法
方法應該是一個類上的 委托事項流程 的整合體，不管是普通方法，還是get/set，甚至是 構(gòu)造方法。
只是構(gòu)造方法比較特殊，也應該是整個類中唯一的特殊。
get / set 方法都應該只是從規(guī)范上形成的一些約定俗成的方法，而且既然是方法，get / set 的調(diào)用都應該加上 括號 ()，才會便于理解。而且方法名和屬性名也沒有一定不重復的限定。
三、Getter/Setter的優(yōu)勢
簡單說一些吧。
1. 數(shù)據(jù)攔截
利用 get set 方法來做數(shù)據(jù)攔截，這個點這篇文章中不過多講，可以參考一些前端框架的雙向數(shù)據(jù)綁定實現(xiàn)來學習。
2. 數(shù)據(jù)轉(zhuǎn)換
在前后端數(shù)據(jù)轉(zhuǎn)換時，除了我們之前使用的 基于裝飾器-我是這么處理TypeScript項目數(shù)據(jù)轉(zhuǎn)換的 之外，使用 get set 來做數(shù)據(jù)轉(zhuǎn)換可能也會是一個很棒的方式（當然，屬性名 和 get/set 不能重復的問題，還可以再思考思考）。
以上就是TypeScript中Getter/Setter用法詳解的詳細內(nèi)容，更多關(guān)于TypeScript Getter/Setter的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細介紹了易被忽視的js事件問題，包括跨平臺事件、冒泡中target和currentTarget的區(qū)別，感興趣的朋友可以參考一下2016-05-05
這篇文章主要為大家詳細介紹了TypeScript的類型注解，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
javascript電商網(wǎng)站搶購倒計時效果實現(xiàn)
這篇文章主要介紹了javascript電商網(wǎng)站搶購倒計時效果實現(xiàn)代碼，掌握日期對象Date，獲取時間的方法，感興趣的小伙伴們可以參考一下2015-11-11
webpack打包后index.html引用文件地址問題小結(jié)
在前端開發(fā)中,src 屬性指定的相對路徑是相對于當前 HTML 文件的路徑,而不是相對于網(wǎng)站的根目錄,這篇文章主要介紹了webpack打包后index.html引用文件地址問題,需要的朋友可以參考下2024-05-05
js unicode 編碼解析關(guān)于數(shù)據(jù)轉(zhuǎn)換為中文的兩種方法
這篇文章主要介紹了js unicode 編碼解析關(guān)于數(shù)據(jù)轉(zhuǎn)換為中文的兩種方法,需要的朋友可以參考下2014-04-04
用jscript啟動sqlserver...2007-06-06
Javascript格式化并高亮xml字符串的方法及注意事項
這篇文章主要介紹了Javascript格式化并高亮xml字符串的方法及注意事項,需要的朋友可以參考下2018-08-08
這篇文章主要給大家介紹了關(guān)于JS創(chuàng)建自定義對象的六種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
My Desktop 桌面式 代碼2008-12-12
BLOB (binary large object)，二進制大對象，是一個可以存儲二進制文件的容器。下面這篇文章主要給大家介紹了關(guān)于利用Blob進行文件上傳的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-08-08