## 访问器装饰器
### 说明  
紧接着访问器声明，
访问器装饰器应用于访问器的属性描述符并且可以用来监视，修改或替换一个访问器的定义  
访问器装饰器不能用在声明文件中（.d.ts），或者任何外部上下文（比如 declare的类）里  



### 注意  
TS不允许同时装饰一个成员的get和set访问器。取而代之的是，一个成员的所有装饰的必须应用在文档顺序的第一个访问器上。这是因为，在装饰器应用于一个属性描述符时，它联合了get和set访问器，而不是分开声明的  

### 访问器装饰器被调用时
访问器装饰器表达式会在运行时当作函数被调用，传入下列3个参数：
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
- 成员的名字
- 成员的属性描述符

### EG
```ts
function configurable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log(target)
        console.log(target===Point.prototype)// true
        descriptor.configurable = value;
    };
}

class Point {
    private _x: number;
    private _y: number;
    constructor(x: number, y: number) {
        this._x = x;
        this._y = y;
    }

    @configurable(false)
    get x() { return this._x; }

    @configurable(false)
    get y() { return this._y; }
}

let target = new Point(2,3);
console.log(target.x) // 2
console.log(target.y) // 3
```

## 属性装饰器
### 说明  
紧接着属性声明  
属性描述符只能用来监视类中是否声明了某个名字的属性  

属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
- 成员的名字

### EG  
```ts
function EngelCoefficient(foodsMoney:number,allMoney:number){
    return function(target:any,key:string):any {
        target.engel = foodsMoney/allMoney
    }
}

class engel {
    @EngelCoefficient(1200,800)
    engel?:number
    
    constructor(){

    }

    getEngel(){
        return this.engel
    }
}


let p = new engel()
console.log(p.getEngel()) // 1.5
```


## 参数装饰器 
### 说明  
紧接着参数声明  
参数装饰器应用于类构造函数或方法声明   

参数装饰器表达式会在运行时当作函数被调用，传入下列3个参数：
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
- 成员的名字
- 参数在函数参数列表中的索引

### 注意点
- 参数装饰器只能用来监视一个方法的参数是否被传入
- 参数装饰器的返回值会被忽略

### Eg

```ts
import "reflect-metadata";

const response: ParameterDecorator = (
  target: Object,
  propertyKey: string | symbol,
  parameterIndex: number
) => {
  Reflect.defineMetadata("response", parameterIndex, target, propertyKey);
};

const get: (path: string) => MethodDecorator = (path) => {
  return (
    target: Object,
    propertyKey: string | symbol,
    descriptor: PropertyDescriptor
  ) => {
    let originMethod = descriptor.value;
    let index = Reflect.getMetadata("response", target,propertyKey);        
    descriptor.value = function () {
       arguments[index] = {'data':'返回值'}
       let arr = []
       for (const eindex in arguments) {         
         if (Object.prototype.hasOwnProperty.call(arguments, eindex)) {
           const element = arguments[eindex];
           arr.push(element)
         }
       }       
       originMethod(...arr)
    };

  };
};

class HttpReq {
  @get("/getAllData")
  getAllData(request: {}, @response res?:{}) {
    console.log(res);
  }
}

let http =  new  HttpReq()
http.getAllData({'data':'requestBody'})

```

TS-装饰器二

## 配置 
tsconfig.json中开启对应配置从而让ts支持装饰器  



```
"experimentalDecorators": true,
```

## 装饰器定义  
装饰器是一种特殊类型声明， 它能够被附加到类声明、方法、属性或者参数上， 可以修改类的行为，  
通俗的讲装饰器就是一个方法，可以注入到类，方法，属性参数上来扩展类，属性，方法，参数功能  
装饰器求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入  

常见的装饰器：属性装饰器，方法装饰器，参数装饰器

## 语法：
普通修饰器（无法传参）、装饰器工厂（可以传参）

### Eg
- 普通修饰器
```ts
function nameClass(params:any){
    console.log("装饰器",params)
}

@nameClass class people {
    constructor(){

    }
}
```

- 装饰器工厂
其返回值是一个函数
```ts
function nameClass(params:any){
    return (target:any)=>{
        console.log("装饰器",params,target)
    }
}

@nameClass(2) class people {
    constructor(){

    }
}
```

## 规则
### 多个装饰器对同一个类使用  
由上至下依次对装饰器表达式求值  
求值的结果会被当作函数，由下至上依次调用  

- EG  
```ts
function nameClass(params:any){
    console.log("装饰器1")
    return (target:any)=>{
        console.log("装饰器1",params,target)
    }
}

function ageClass(params:any){
    console.log("装饰器2")
    return (target:any)=>{
        console.log("装饰器2",params,target)
    }
}

@nameClass(1) @ageClass(2) class people {
    constructor(){

    }
}
```

- RESULT
```ts
装饰器1
装饰器2
装饰器2 2 class people {
    constructor() {
    }
}
装饰器1 1 class people {
    constructor() {
    }
}
```

### 类中其他顺序  
装饰器求值(即工厂函数)
类中不同声明上的装饰器将按以下顺序应用：
- 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个实例成员
- 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个静态成员
- 参数装饰器应用到构造函数
- 类装饰器应用到类

## 装饰器的类型
### 类装饰器
#### 说明  
应用于类构造函数，其参数是类的构造函数  
#### 用途
- 在类的构造函数的原型上添加属性
```ts
// 类装饰器
function addName(constructor:new() => any){
    constructor.prototype.name = "xm"
}
@addName
class ClassD {}

//使用接口，声明一个的类名相同的接口，声明合并；不然报错ClassD上没有name
interface ClassD{
    name:string
}

const d = new ClassD()
console.log(d.name) //xm
```

- 重写装饰的类的构造函数

```ts
function classDecorator<T extends new(...args:any[])=>{}>(target:T)  {
    return class extends target {
        public newProperety = "new property"
        public hello = "hello"
    }
}

@ classDecorator
class Greeter {
    public property = "property"
    public hello:string
    constructor(m:string) {
        this.hello = m
    }
}

const targets = new Greeter("hello world")

console.log(targets)

// 打印结果
// Greeter {property: 'property', hello: 'hello', newProperety: 'new property'}
// hello: "hello"
// newProperety: "new property"
// property: "property"
//     [[Prototype]]: Greeter
//     ...


// 验证是否重写类的构造函数
function classConstrustor(target:any):any {
    return class target {
        public names = "xm"
        public age = 18
    }
}

@ classConstrustor
class people {
    public hobby = "food"
    public sex = 0
    constructor(m:number) {
        this.sex = m
    }
}

const targets = new people(0)

console.log(targets)

// 打印结果
// 此处装饰器返回的类重写了类prople的构造函数
// 原本的hobby sex都被舍弃
// target {names: 'xm', age: 18}
// age: 18
// names: "xm"
//     [[Prototype]]: Object
//     ...
```


### 方法装饰器
#### 说明  
它会被应用到方法的 属性描述符上，可以用来监视，修改或者替换方法定义  

#### 属性描述符
通过Object.defineProperty方法设置    
最低为ES5版本支持Object.defineProperty方法  
- 语法  
```
Object.defineProperty(target,name,{
    value:"xm",//属性值
    writable:false,//是否可写
    configurable:false,//是否可配置
    enumerable:true,//是否可枚举
})
```
target：要设置的对象
name：对象的属性名
第三个参数：  
  - writable: boolean,是否可写，设置为true后再次赋值无法更改
  - configurable: boolean，是否允许配置，设置为false后，无法再次声明对象
  - enumerable: boolean,是否允许枚举，设置为true后，for循环遍历对象属性名可以取到  

Eg
```ts
// 属性描述符
interface ObjWithAnyKeys {
    [key:string]:any
}
let obj2:ObjWithAnyKeys = {}
//使用属性修饰符
Object.defineProperty(obj2,"name",{
    value:"xm",//属性值
    writable:false,//是否可写
    configurable:false,//是否可配置
    enumerable:true,//是否可枚举
})

// console.log(obj2.name)// xm

//当writeable设置为false时
obj2.name = "ls"//报错，无法分配只读属性name
console.log(obj2.name)

//当writeable设置为true时
obj2.name = "ls"
console.log(obj2.name) // ls

// 当configurable设置为false时，不允许重定义name Cannot redefine property: name
Object.defineProperty(obj2,"name",{
    value:"xm",//属性值
    writable:false,//是否可写
    configurable:true,//是否可配置
    enumerable:true,//是否可枚举
})

// 当enumerable设置为true时
for(let keys in obj2){
    console.log(keys) //name
}

```

#### 使用  
方法装饰器在运行时传入下列3个参数：
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象  
- 成员的名字  
- 成员的属性描述符

1、对于类的实例成员
```ts
// 此处设置属性为不可枚举的
function enumerable(types:boolean) {
    return (target:any,propertName:string,descriptor: PropertyDescriptor) => {
        console.log(target)
        console.log(target===ClassFN.prototype)// true  对于类的实例成员 target为类的实例对象
        descriptor.enumerable = types
    }
}

class ClassFN {
    constructor( public age = 18) {
    }
    @enumerable(false) //改为true后
    public getAge() {
        return this.age
    }
}

const classFn = new ClassFN(22)

for (let keys in classFn){
    console.log(keys) //age ，更改后结果为age getAge
}

// 运行结果
// [LOG]: ClassFN: {} 
// [LOG]: true 
// [LOG]: "age" 
```

2、对于类的私有成员
```ts
// 此处设置属性为不可枚举的
function enumerable(types:boolean) {
    return (target:any,propertName:string,descriptor: PropertyDescriptor) => {
        console.log(target)
        console.log(target===ClassFN)// true  对于类的私有成员，为类本身
        descriptor.enumerable = types
    }
}

class ClassFN {
    public age = 18
    constructor( ) {
    }
    @enumerable(false) //改为true后
    static getAge(){
        return ClassFN.getAge
    }
    
}

const classFn = new ClassFN()

for (let keys in classFn){
    console.log(keys) //age ，更改后结果为age getAge
}
```

TS-装饰器一

# 声明合并
## 概念
指的是编译器会将程序中多个声明合并为一个声明，避免遗漏  



## Eg 
```
interface A {
    x:number
}

interface A {
    y:number
}

let a:A = {
    x:1,
    y:2
}
```

### 注意点 
1、对于非函数成员，必须保持类型相同，否则无法合并

2、 对于函数成员，若参数类型字面量类型，则排在第一位，多个接口则按照后覆盖前  

```ts
interface A {
    X: NUMBER;
    foo (bar:number):number;//5
    foo (bar:"a"):number;//2
}

interface A {
    X: NUMBER;
    foo (bar:string):string;//3
    foo (bar:number):number;//4
    foo (bar:"b"):number;//1
}

//定义接口的实现时，由于两个接口合并后，故此处需要宽泛的类型
let a:A = {
    x:1,
    foo(bar:any){
        return bar
    }
}
```



## 命名空间 
## 说明  
命名空间中函数不允许重复导出
## 注意点 
命名空间和类、函数合并时，只能在其后面声明否则报错
对于和枚举类型合并则没有要求

```ts
function Lib(){}
namespace Lib {
    export let version = "1.0"
}
console.log(Lib.version) // 1.0

class C {}
namespace C {
    export let state = 1
}
console.log(C.state)//1

enum Color {
    red,
    blue,
    green
}
namespace Color {
    export function mix(){}
}

console.log(Color),//相当于为枚举添加mix方法
```

TS-声明合并

## 说明  
使用namespace关键字声明，且在命名空间内声明的变量只内在其内部使用。export导出后才可以在全局中使用  



## 语法  
```ts
namespace 命名空间名字{
    
}
```

## Eg
a.ts中声明命名空间Shape，且将函数cricle导出
```ts
namespace Shape {
    const pi = Math.PI
    export function cricle(r:number){
        return pi*r**2
    }
}
```

b.ts中同样声明命名空间Shape,这里的命名空间和a.ts中为同一个  
```ts
//此处需要三斜杠 如下指定依赖的ts相对路径
/// <reference path="a.ts" />

namespace Shape {
    export function square(x:number) {
        return x*x
    }
}

//调用命名空间 
Shape.cricle(2)
```

最后，编译b.ts文件生成b.js文件并在index.html中引入

```ts
//此处需要三斜线指令 如下指定依赖的ts相对路径
/// <reference path="a.ts" />

namespace Shape {
    export function square(x:number) {
        return x*x
    }
}

//调用命名空间 
Shape.cricle(2)

//别名 此处import不是es6中的引入import
import cricle = Shape.cricle
```

TS-命名空间

# 模块
## ES6中的模块化
### 导出



```ts
// 单独导出
export let a = 1

// 批量导出
let b = 2
let c = 3
export {b,c}

// 导出接口
export interface P {
    x:number,
    y:number
}

// 导出函数
export function myFunction(){}

// 导出时重命名
function g(){}

export { g as G}

// 默认导出，无需函数名
export default function(){
    console.log("defgault export")
}

// 引入外部模块，重新导出
export {str as hello} from "./b"
```

### 导入  
```ts
// 批量导入
import {a,b,c} from "./a";

// 导入接口
import {P} from "./a";

// 导入时起别名
import {c as C} from "./a";

// 导入模块所有成员绑定到ALL上
import * as All from "./a";

// a.ts中默认导出的函数 默认导入
import myFunction from "./a";
```

## CommonJS模块  
### 导出
- 整体导出
```ts
let a = {
    x:1,
    y:1
}

module.exports = a;
```

- 导出多个变量
```
exports.b = 2;
exports.c = 3;
```

### 导入
使用require语句导入
```
let c = require("./a")
```