初學者這樣玩 TypeScript，遲早進大廠系列（第九期）

極客江南： 一個對開發技術特別執著的程序員，對移動開發有著獨到的見解和深入的研究，有著多年的iOS、Android、HTML5開發經驗，對NativeApp、HybridApp、WebApp開發有著獨到的見解和深入的研究, 除此之外還精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多種Web前端技術及Java、PHP等服務端技術。

初學者玩轉 TypeScript系列，總計 10 期，本文為第 9 期，點贊、收藏、評論、關注、三連支持！

一期知識點擊這裏

二期知識點擊這裏

三期知識點擊這裏

四期知識點擊這裏

五期知識點擊這裏

六期知識點擊這裏

七期知識點擊這裏

八期知識點擊這裏

對於初學者來說，學習編程最害怕的就是，難。

那麼，Typescript 是不是很難？

首先，我可以肯定地告訴你，你的焦慮是多餘的。新手對學習新技術有很强的排斥心理，主要是因為基礎不够紮實，然後自信心不够强。

1.訪問器裝飾器

/* 1.訪問器裝飾器 - 訪問器裝飾器聲明在一個訪問器的聲明之前（緊靠著訪問器聲明）。 訪問器裝飾器應用於訪問器的 屬性描述符並且可以用來監視，修改或替換一個訪問器的定義 - 訪問器裝飾器錶達式會在運行時當作函數被調用，傳入下列3個參數： + 對於靜態成員來說是類的構造函數，對於實例成員是類的原型對象。 + 成員的名字。 + 成員的屬性描述符。 - 注意: TypeScript不允許同時裝飾一個成員的get和set訪問器。 取而代之的是，一個成員的所有裝飾的必須應用在文檔順序的第一個訪問器上 * */
function test(target: any, propertyKey: string, descriptor: PropertyDescriptor) {

// console.log(target);
// console.log(propertyKey);
// console.log(descriptor);
descriptor.set = (value:string)=>{

target.myName = value;
}
descriptor.get = ():string=>{

return target.myName;
}
}
class Person {

private _name:string; // lnj
constructor(name:string){

this._name = name;
}
@test
get name():string{

return this._name;
}
set name(value:string){

this._name = value;
}
}
let p = new Person('lnj');
p.name = 'zs';
console.log(p.name);
console.log(p);

2. 屬性裝飾器

/* 1.屬性裝飾器 - 屬性裝飾器寫在一個屬性聲明之前（緊靠著屬性聲明） - 屬性裝飾器錶達式會在運行時當作函數被調用，傳入下列2個參數： + 對於靜態屬性來說就是當前的類, 對於實例屬性來說就是當前實例 + 成員的名字。 * */
function test(target:any, proptyName:string) {

console.log(target);
console.log(proptyName);
target[proptyName] = 'lnj';
}
class Person {

// @test
static age:number;
@test
name?:string;
}
let p = new Person();
console.log(p);

3. 參數裝飾器

/* 1.參數裝飾器 - 參數裝飾器寫在一個參數聲明之前（緊靠著參數聲明）。 - 參數裝飾器錶達式會在運行時當作函數被調用，傳入下列3個參數： + 對於靜態成員來說是當前的類，對於實例成員是當前實例。 + 參數所在的方法名稱。 + 參數在參數列錶中的索引。 * */
/* 其它 屬性裝飾器,參數裝飾器最常見的應用場景就是配合元數據(reflect-metadata), 在不改變原有結構的同時添加一些額外的信息 但是元數據目前也是在提案中, 也還沒有納入正式的標准 所以對於裝飾器而言, 我們只需要了解即可, 因為提案中的所有內容將來都是有可能被修改的 因為提案中的所有內容目前都有兼容性問題 * */
function test(target:any, proptyName:string, index:number) {

console.log(target);
console.log(proptyName);
console.log(index);
}
class Person {

say(age:number,@test name:string):void{

}
}

碼字不易，在線求個三連支持。

點擊下方卡片，關注 回複 書籍 獲取保姆級編程電子書