TypeScript 注解(下)
引言
继上周的文章《TypeScript 注解(上)》，补充在最后未实现的属性注解。
本文可能需要扎实的JavaScript功底，我尽量给大家通俗地讲解。
实现
建立新项目
上周的项目建立的太不正规了，直接建个文件夹，然后写的TS代码，太过不规范。
这次我们使用npm init初始化一个新的前台项目。
创建成功后，项目中就出现了我们熟知的package.json文件。
安装依赖
本次，我们需要使用反射实现一些高级的功能。
反射是指计算机程序在运行时可以访问、检测和修改它本身状态或行为的一种能力。
根据官方文档的环境要求，使用TypeScript反射，我们需要先安装reflect-metadata包。
npm i reflect-metadata --save
属性注解
属性注解在属性上声明，属性注解的表达式在运行期间像函数一样被调用，并带着以下两个参数：
- 如果是在静态成员上，则是类的构造函数；如是在实例成员上，则是类的原型。
- 成员的名称。
所以，一个标准的属性注解如下所示：返回一个带有两个参数的闭包。
function annotation(target: string) {
return function(target, propertyKey) {
}
}看下面的实例代码：这里直接返回Reflect.metadata代替原闭包，因为metadata方法的返回值，就符合该规范。
import "reflect-metadata";
// 声明唯一的元数据key
const formatMetaDataKey = Symbol("format");
// 前缀注解
function prefix(target: string) {
// 根据key将前缀存至元数据中
return Reflect.metadata(formatMetaDataKey, target);
}
class Person {
constructor(message: string) {
this.message = message;
}
@prefix("hello, ")
message: string;
speak(): void {
// 获取元数据前缀，key，当前对象，message属性
const prefix = Reflect.getMetadata(formatMetaDataKey, this, "message");
console.log(prefix + this.message);
}
}
const person = new Person("world");
person.speak();通过在字符串属性上声明的prefix注解，来添加该字符串应该显示的前缀。
功能很简单，也就不再赘述了。以后想写类似功能时照葫芦画瓢就是了，这里主要是对一些比较繁琐的代码加以研究。
Symbol
大家想必注意到了这里的Symbol了，这是个什么东西呢？
// 声明唯一的元数据key
const formatMetaDataKey = Symbol("format");Symbol是一种新的基本数据类型。
去Google搜索JavaScript数据类型，发现谷歌的第一条已然过时，面试也常考，这里纠正一下。
JavaScript共有7种数据类型，重点！！！
6种基本数据类型：
BooleanNullUndefinedNumberStringSymbol(ECMAScript 6新定义)
和Object。
例子
说来说去，Symbol到底是个啥玩意？一个例子带你看明白。
let obj = {
id: 1
};
obj['id'] = 2;
// 覆盖了原id
console.log(obj);
const id = Symbol('id');
obj[id] = 3;
// 添加Symbol key的属性
console.log(obj);
const id2 = Symbol('id');
obj[id2] = 6;
// 不覆盖原Symbol key
console.log(obj);
对象中允许字符串或Symbol作为key，从这个例子我们可以看出，字符串的key不具有唯一性，而Symbol的key能保证唯一，不进行覆盖。
Token
这个唯一性覆盖问题就像之前在网上送检项目中遇到的问题，因为项目已停工，也就没有和大家提。这里和大家简单说一下。
使用的全局配置是使用字符串注入的，因为是一个容器，假设我们的框架中也用到了'CONFIG'的字符串注入，那我们加入的配置就会覆盖原框架配置，给框架注入了错误的对象，然后就出现了错误但是就是找不着原因的一系列问题。
providers: [
{ provide: 'CONFIG', useValue: YUNZHI_GLOBAL_CONFIG }
]
class TestComponent {
constructor(@Inject('CONFIG') private config) {
}
}其实Angular已经解决，以后不要再通过字符串注入，推荐通过InjectionToken注入。
const CONFIG_TOKEN = new InjectionToken<VALUE_TYPE>('CONFIG');总结
初级程序员的业余生活，学习，学习，学习。
