回顾类的属性
回顾面向对象，类中的属性分为实例属性和静态属性，实例属性属于实例化后的对象，静态属性属于类本身
// 实例属性
class Phone {
name = "startdusk";
}
const p = new Phone();
console.log(p.name); // startdusk
在类中，如果没有声明成员变量的访问属性，默认是 public ,如果改成 public，运行结果也是一样：
// 实例属性
class Phone {
public name = "startdusk";
}
const p = new Phone();
console.log(p.name); // startdusk
那么静态属性就有点特殊了，声明一个成员变量为静态需要加上关键字 static ，并且静态属性属于类本身，所以只能用类来访问属性而不能用对象访问
// 静态属性
class Phone {
public static name = "startdusk";
}
console.log(Phone.name);
当然上面这段静态属性的代码是有问题的，如果你使用 IDE 的敲上面这段代码，会给你报如下错误：
这是因为 TypeScript 的构造函数有内置的属性 name ，所以我们定义的 name 同名冲突，修改属性名即可解决：
// 静态属性
class Phone {
public static phoneName = "startdusk";
}
console.log(Phone.phoneName); // startdusk
那么细心的同学可能会发现，上面的所有代码中，所有的属性都初始化了，这点不同于 JavaScript ，在 ES6 中，写 JavaScript 中的类，你可以这样定义：
class Phone {
name;
}
可见，JavaScript 中定义类的属性，只需要声明就可以了，而 TypeScript 中不行，必须要声明后初始化：
1.直接定义后初始化
class Phone {
public name = "startdusk";
}
2.构造函数初始化
class Phone {
private price: number;
constructor(price: number) {
this.price = price;
}
}
// 上面的代码可以简写为：
class Phone {
constructor(private price: number) {
this.price = price;
}
}
使用属性装饰器
使用属性装饰器，要注意，属性装饰器它没有 descriptor 参数
// 属性装饰器
function addDecorator(target: any, key: string) {
console.log("target ->", target);
console.log("key ->", key);
}
class Phone {
@addDecorator
name = "startdusk";
}
那么我们按照惯例运行程序
打印出来的结果是，target 是原型对象，key 是被装饰的属性的名字。当然，可能大家可能会疑惑我是怎么知道 target 打印出来的是原型对象，那么，可以使用如下命令，我们TypeScript转换成 JavaScript 代码看看：
tsc ./src/index.ts
此时就会在 src 目录下生成 index.js 文件，我们来看下：
var __decorate =
(this && this.__decorate) ||
function(decorators, target, key, desc) {
var c = arguments.length,
r =
c < 3
? target
: desc === null
? (desc = Object.getOwnPropertyDescriptor(target, key))
: desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if ((d = decorators[i]))
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
function addDecorator(target, key) {
console.log("target ->", target);
console.log("key ->", key);
}
var Phone = /** @class */ (function() {
function Phone() {
this.name = "startdusk";
}
__decorate([addDecorator], Phone.prototype, "name");
return Phone;
})();
生成的 JavaScript 代码比较复杂，但我们重点在 __decorate 函数的使用上，可以看到，它第一个参数就是装饰器列表，我们的装饰器就在这个列表里面，而第二个参数就是 Phone 的原型对象，也就是 target 参数，而 "name" 显然就是装饰的属性名，也就是 key 参数。
如果，我们想实现控制属性是否可被修改(像方法装饰器有 descriptor 参数控制)，那我们就需要手动把 descriptor 引入并返回：
function addDecorator(target: any, key: string) {
const descriptor: PropertyDescriptor = {
writable: false
};
return descriptor;
}
class Phone {
@addDecorator
name = "startdusk";
}
const p = new Phone();
p.name = "github";
console.log(p.name);
但是，上面的代码会报如下错误：
那么根据报错的信息就是，我们必须声明返回的类型，void 或 any，显然我们要把声明的返回类型，写为 any
function addDecorator(target: any, key: string): any {
const descriptor: PropertyDescriptor = {
writable: false
};
return descriptor;
}
class Phone {
@addDecorator
name = "startdusk";
}
const p = new Phone();
p.name = "github";
console.log(p.name);
此时，报错消失，那么运行代码也会报错，这是对了，因为我们在属性装饰器设置了属性不可修改