摘要
主要记录所学的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();
结果: