TypeScript学习日记（五）

摘要

        主要记录所学的typescript的模块化，命名空间，和装饰器三个知识点。

1、Ts的模块化

        Ts的模块化总的来说其实和es6的模块化是一样的。都是使用export暴露出去，然后通过import {} from '  '来进行导入。

下面举个简单的例子来展示三种暴露方式：

const url:string = "xxxxxx";

// 第一种暴露出去，直接通过export
export function getData():string{
    return "getDatagetDatagetData";
}
function getData1():string{
    return "getDatagetDatagetData11111111";
}
// 第二种:将要暴露出去的属性和方法放在一个{}里
export {getData1,url}

// 第三种：使用export default，由于是默认的--所以只能有一个
export default function aa():void{
    console.log("aaaaaaaa");
}

下面是引入：

//前两种暴露方法的引入方式
import {getData,getData1} from './until'
//第三种默认的引入方式
import aaa from './until'

console.log(getData());
console.log(getData1());
aaa();

2、命名空间

        主要用于团队开发时代码命名重复，es5的匿名函数自调用一个道理，不过可以通过export使外部可以进行访问。

写法：

// 主要用于团队开发时代码命名重复
// 和Java的命名空间还有---------es5的匿名函数自调用一个道理
namespace A{
    export class a{
        get():void{
            console.log(123);
        }
    }
}

namespace B{
    export class a{
        get():void{
            console.log(456);
        }
    }
}

// 命名空间里面的都是默认私有的，所以要暴露出来

const a = new A.a();
const b = new B.a();
a.get();
b.get();

3、装饰器

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

装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。（装饰器实际上就是一个函数）

定义总是让人理解不清楚，我们直接上代码：

// 1、类装饰器

function a1(params:any){
    console.log("装饰器a1");
    console.log(params);//这个就是类Bb（这里拿到Bb这个类，就可以给Bb进行一些操作，如增加方法）
}

@a1
class Bb{

}

const b = new Bb();

结果：

//2、装饰器工厂（能传参数的类装饰器）
// console.log(222222222222);

function a2(params:any){

    
    return function(tat:any){
        console.log(tat);//这个就是类Bb2（这里拿到Bb2这个类，就可以给Bb2进行一些操作）
        console.log(params);//这个是@a2（）的参数a2
    }
}

@a2("a2")
class Bb2{

}

const b2 = new Bb2();

结果：

// //3、使用装饰器重载类
// console.log(3333333333);
function a3(tat:any){
    return class extends tat{
        // 将B3里的数据和方法全部重载，这里如果不全部重载的话，会报错
        str = "a3里的str";
        get():void{
            console.log(this.str);
        }
    }
}

@a3
class B3{
    public str:string | undefined;
    constructor(){
        this.str = "B3里的str";
    }
    get():void{
        console.log(this.str);
    }
}

const b3 = new B3();
b3.get();

结果：

// 4、属性装饰器
/**
 * 属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：
 * 1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
 * 2.成员的名字。
 */
// console.log(44444444444);
function a4(par:any){
    return function(tat:any,nam:string){
        console.log(tat);
        console.log(nam);
        tat.str = "a4 string";//修改B4的str
    }
}

class B4{
    @a4("a4...")
    public str:string | undefined;
    get():void{
        console.log(this.str);
    }
}
const b4 = new B4();
b4.get();

结果：