TS装饰器、混入Mixins、TS模块、命名空间

装饰器

定义：

装饰器是一中特殊类型的声明，它能够被附加到类，方法，访问器，属性或参数上，用@添加

装饰器本质上还是一个函数，在别的语言中已广泛使用,如: python,但在TS中依旧为一个测试中的版本，若要启用实验性的装饰器特性，你必须在命令行或tsconfig.json里启用experimenta1Decorators编译器选项:

添加到类上，类装饰器

添加到方法上，方法装饰器

添加到访问器上，访问器装饰器

添加到属性上，属性装饰器

添加到参数上，参数装饰器

下面这个函数，就可以作为装饰器使用：

function setProp(tartget){
//...
}
@setProp

先定义一个函数，然后这个函数有一个参数，就是要装饰的目标，装饰的作用不同，这个target代表的东西也不同。定义了这个函数之后，它就可以作为装饰器，使用@函数名的形式，写在要装饰的内容前面。

fiInction addAge(constructor: Function) {
constructor.prototype.age = 18;
}
@addAge
class Personf{
name: string;
age: number;
constructorO(){
this.name='xixiao';
}
}
let person = new Person();
consol.log(peroson);//18

这段代码实际上基本等同于：

Person = addAge(function Person(){...})

当装饰器作为修饰类的时候，会把构造器传递进去。constructor.prototype.age就是在每一个实例化对象上面添加一个age值，这里addAge就添加了一个age值。

装饰器工厂

装饰器工厂也是一个函数，它的返回值是一个函数，返回的函数作为装饰器的调用函数。如果使用装饰器工厂，那么在使用的时候，就要加上函数调用。如下:

function setProp(){return function(target){//...}
}
@setProp()

1.类的装饰器

类装饰器就在类声明之前被声明
类装饰器被应用于类的构造函数，可以用来观察、修改或替换类定义
类装饰器不能用在声明文件中(.d.ts)，也不能用在任何外部上下文中(比如declare的类)
类装饰器表达式会在运行时当做函数被调用，类的构造函数作为其唯一的参数
如果类装饰器返回一个值，它会使用提供的构造函数类替换类的声明

export default{}
// 定义装饰器
// function testDecorator(constructor:any){
//     constructor.prototype.uname="张杰"
//     constructor.prototype.show=()=>{
//         console.log(`我是${ constructor.prototype.uname}`);//     }
// }
// 工厂函数
// 装饰器工厂也是一个函数，它的返回值是一个函数，返回的函数作为装饰器的调用函数。如果使用装饰器工厂，那么在使用的时候，就要加上函数调用function testDecorator(flag:boolean){if (flag) {return function(constructor:any){constructor.prototype.uname="张杰"constructor.prototype.show=():void=>{console.log(`我是${ constructor.prototype.uname}`);}}} else {return function(constructor:any){constructor.prototype.show=():void=>{console.log("hello world");}}}}
@testDecorator(true)
class  Person{}
let p = new Person();
(p as any).show()

混入Mixins

介绍：除了传统的面向对象继承方式，还流行一种通过可重用组件创建类的方式，就是联合另一个简单类的代码。你可能在Scala等语言里对mixins及其特性已经很熟悉了，但它在JavaScript中也是很流行的。

作用:解决TS中继承一次只能继承一个类的问题

注意点:类的混入不能混入属性名

TS模块

TypeScript 模块的设计理念是可以更换的组织代码。

模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。

两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

模块使用模块加载器去导入其它的模块。在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。

此外还有有 SystemJs 和 Webpack。

import Test = require('./muduleTest');

class Person implements Test.IPerson{name="刘亦菲"age=19sex = "女"show(){console.log(`我是${this.name},年龄${this.age}`);}
}
let p = new Person();
console.log(p);
p.show()

import{obj} from './muduleTest'
console.log(obj);


export interface IPerson{name:stringage:numbersex:stringshow():void
}
export const obj={name:"李师师"}

命名空间

项目开发过程中，我们会发现我们的命名是有严格规范的，我们不能随意的去起名字，但若是都采用尽量标准化的方式去命名，我们又无法避免的会造成污染,Typescript提供了namespace 避免这个问题出现

在TS1.5之前被叫做内部模块，主要用于组织代码。避免命名冲突
本质就是定义一个大对象,把变量/方法/类/接口...的都放里面
通过 export导出
通过namespace定义

// namespace A{
//     export const a=100
// }
// namespace B{
//     export const a=200
// }
// console.log(A.a);
// console.log(B.a);

// 嵌套命名空间
namespace B{export const b=1000export namespace C{export const c=2000}
}

console.log(B.b);
console.log(B.C.c);

// 简化命名空间
import c = B.C.c
console.log(c);


import{ D } from "./namespace"
console.log(D.d);

export namespace D{export const d = 2300
}