1、模塊的概念

內(nèi)部模塊類似于命名空間，外部模塊才簡稱為模塊
模塊在自身作用域內(nèi)起作用，不能在全局作用域中使用（被導出是例外）
模塊內(nèi)的變量，函數(shù)，類在模塊外不可見，可以通過export導出。然后在其他地方使用import導入

因此
可以把公共功能抽離成一個文件作為模塊
模塊內(nèi)的變量，函數(shù)，類等默認是私有的，并通過export向外暴露，暴露后通過import導入。

1、創(chuàng)建模塊文件db.ts

export let dbURL = 'xxxxx'; //獲取數(shù)據(jù)庫數(shù)據(jù) export function getData(): any[] {console.log('獲取數(shù)據(jù)庫的數(shù)據(jù)');return [{ title: 'xxtitlexx' },{ title: 'xxtitlexx' },]; }export function save(): void { console.log('保存數(shù)據(jù)成功');}

2、導入并使用模塊文件db.ts
index.ts

import { getData,save,dbURL } from './modules/db' const myarr = getData() save(); console.log(myarr);

3、在node環(huán)境下運行
在瀏覽器中無法支持，需要在node環(huán)境下執(zhí)行編譯后的index.js

node index.js

2、模塊的導出

• 在暴露過程中可以集中暴露，直接以對象形式進行暴露，上例模塊部分可以寫成

let dbURL = 'xxxxx'; //獲取數(shù)據(jù)庫數(shù)據(jù) function getData(): any[] {console.log('獲取數(shù)據(jù)庫的數(shù)據(jù)');return [{ title: 'xxtitlexx' },{ title: 'xxtitlexx' },]; }function save(): void { console.log('保存數(shù)據(jù)成功');} export { dbURL,getData,save}

• export的時候也可以使用as關鍵字，未某個導出的方法或屬性起別名

export { dbURL,getData as get,save}

在import的時候則只能使用別名，而不能使用原名稱

• 只有一個方法的時候可以使用默認導出export default

export default function myfun(){}

或
在已經(jīng)寫好方法體的情況下

export default myfunimport myfun from 'xxxxx'

注意，export default在單個模塊中只能使用一次

3、使用命名空間

命名空間：內(nèi)部模塊，主要用于組織代碼，避免命名沖突
模塊：ts的外部模塊的簡稱，側重代碼的復用，一個模塊里可能有多個命名空間
大致與java的命名空間一致
命名空間內(nèi)的變量、函數(shù)、類等要使用export導出

namespace A { export class Dog { } } namespace B { export class Dog { } }let d1 = new A.Dog(); let c1 = new B.Dog();

4、導出、導入命名空間

1、創(chuàng)建命名空間文件db.ts

export namespace A { export class Dog { name: string;constructor(name:string) {this.name = name;}sing() { console.log(`${this.name} is singing a song`);}} } export namespace B { export class Dog { } }

2、導入命名空間

import { A,B } from './modules/db'let d1 = new A.Dog('zhagnsan'); let c1 = new B.Dog(); d1.sing()

5、裝飾器

• 裝飾器是一種特殊類型的聲明，能夠被附加到類聲明、方法、屬性或參數(shù)上，可以修改類的行為
• 通俗講裝飾器就是一個方法，可以注入到類、方法、屬性參數(shù)上來擴展類、屬性、方法、參數(shù)的功能。
• 常見的裝飾器有：類裝飾器、屬性裝飾器，方法裝飾器、參數(shù)裝飾器
• 裝飾器的寫法：普通裝飾器（無法傳參），裝飾器工廠（可傳參）
• 裝飾器是過去幾年js最大的成就之一，已是es7的標準特性之類

6、類裝飾器

類裝飾器在類聲明之前被聲明（緊靠著類聲明）。
類裝飾器應用于類構造函數(shù)，可以用來監(jiān)視，修改或替換類定義。傳入一個參數(shù)

//聲明一個裝飾器,和函數(shù)聲明一樣 function logClass(params: any) {console.log(params);//params就是被修飾的類//給被裝飾的類原型進行擴展params.prototype.apiUrl = 'myapiurl';//擴展了原型，增加了apiUrl屬性params.prototype.run = function () { console.log('i am a method of running');}}//使用@表示調(diào)用裝飾器 @logClass class HttpClient { constructor(){ }getData() { } }@logClass class Person{ constructor() { }work() { } }let p1: any = new Person(); let h1:any = new HttpClient(); console.log(p1.apiUrl, h1.apiUrl); p1.run(); h1.run();

7、裝飾器工廠（可傳參）

這里有兩個參數(shù)，一個是裝飾器本身的參數(shù)，接收設計者傳入的參數(shù)，一個是工廠返回的函數(shù)參數(shù)，接收被裝飾類 //聲明一個裝飾器,和函數(shù)聲明一樣 function logClass(params: any) {//返回一個函數(shù),這里的target是從被裝飾類中返回過來的參數(shù),成為一個裝飾器工廠return function (target: any) { console.log(params);console.log(target);target.prototype.apiUrl = params;}}//使用@表示調(diào)用裝飾器 @logClass('http://www.sina.com')//表示把hello賦給了裝飾器的params，把整個類賦值給了target class HttpClient { constructor(){ }getData() { } }let h1:any = new HttpClient(); console.log(h1.apiUrl);

8、裝飾器修改類構造函數(shù)

類裝飾器表達式會在運行時當作函數(shù)被調(diào)用，類的構造函數(shù)作為其唯一的參數(shù)。
如果類裝飾器返回一個值，它會使用提供的構造函數(shù)來替換類的聲明

//聲明一個裝飾器,和函數(shù)聲明一樣 function logClass(target: any) {console.log(target);//返回一個匿名類，并且繼承了target類，注意要重載父類的所有屬性和方法return class extends target { //修改apiUrl，實際是是要apiUrl: any = '我是修改后的數(shù)據(jù)';getData() { console.log(this.apiUrl+'---');}}}//使用@表示調(diào)用裝飾器 @logClass class HttpClient {public apiUrl: string | undefined;constructor(){ this.apiUrl = '我是構造函數(shù)里面的apiurl';}getData() { console.log(this.apiUrl);} }let h1:any = new HttpClient(); h1.getData()

9、屬性裝飾器

屬性裝飾器表達式會在運行時當作函數(shù)被調(diào)用，傳入下列2個參數(shù)
1、對于靜態(tài)成員來說是類的構造函數(shù)，對于實例成員是類的原型對象
2、成員的名字

//聲明一個類裝飾器,和函數(shù)聲明一樣 function logClass(params: any) {//返回一個函數(shù),這里的target是從被裝飾類中返回過來的參數(shù),成為一個裝飾器工廠return function (target: any) { target.prototype.apiUrl = params;}} //聲明一個屬性裝飾器 function logProperty(params: any) { //返回一個函數(shù)，要接收兩個參數(shù)return function (target: any, attr: any) { console.log(target);console.log(attr);target[attr] = params;} } //使用@表示調(diào)用裝飾器 @logClass('http://www.sina.com')//表示把hello賦給了裝飾器的params，把整個類賦值給了target class HttpClient { //使用屬性裝飾器@logProperty('http://sohu.com.cn')public url: any | undefined;constructor(){ }getData() { console.log(this.url);} } let h1 = new HttpClient(); h1.getData()

10、方法裝飾方法器（增加類屬性及類方法）

會被應用到方法的屬性描述符上，可以用來監(jiān)視、修改或替換方法定義

方法裝飾會在運行時傳入下列3個參數(shù)：
1、對于靜態(tài)成員來說是類的構造函數(shù)，對實例成員是類的原型對象
2、成員的名字
3、成員的屬性描述符

//聲明一個裝飾器 function get(params: any) { //返回一個函數(shù)，要接收兩個參數(shù)return function (target: any,methodName:any,desc:any) { console.log(target);console.log(methodName);console.log(desc);//為方法擴展屬性target.apiUrl = 'http://www.baidu.com';target.run = function () { console.log(' my method is run ');}} } class HttpClient { public url: any | undefined;constructor(){ }//為方法添加自定義的get裝飾器@get('http://www.sina.com')getData() { console.log(this.url);} } let h1:any = new HttpClient(); console.log(h1.apiUrl); h1.run();

11、方法裝飾器修改類的方法

//聲明一個裝飾器 function get(params: any) { //返回一個函數(shù)，要接收兩個參數(shù)return function (target: any,methodName:any,desc:any) { console.log(target);console.log(methodName);console.log(desc.value);//修改被裝飾類的方法，把裝飾器方法里面?zhèn)魅氲乃袇?shù)改為string類型//1、保存當前的方法let oMethod = desc.value;desc.value = function (...args:any[]) { args = args.map((value) => {return String(value);})console.log(args);oMethod.apply(this, args);}} } class HttpClient { public url: any | undefined;constructor(){ }//為方法添加自定義的get裝飾器@get('http://www.sina.com')getData(...args:any[]) { console.log(args);console.log('我是getData里面的方法');} } let h1:any = new HttpClient(); h1.getData(123,'xxxx');

12、方法參數(shù)裝飾器

參數(shù)裝飾器表達式會在運行時當作函數(shù)被調(diào)用，可以使用參數(shù)裝飾器為類的原型增加一些元素數(shù)據(jù)，傳入下列3個參數(shù)：
1、對于靜態(tài)成員來說是構造函數(shù)，對于實例成員來說是原型對象
2、參數(shù)的名字
3、參數(shù)在函數(shù)參數(shù)列表中的索引。

//定義一個方法參數(shù)裝飾器 function logParams(params: any) { //返回一個函數(shù)，要接收3個參數(shù)，target是原型對象，methodName是方法名稱，paramsIndex參數(shù)索引return function (target: any,methodName:any,paramsIndex:any) { console.log(target);console.log(methodName);console.log(paramsIndex);//在裝飾器上對原型添加一些數(shù)據(jù)target.apiUrl = params;} } class HttpClient { public url: any | undefined;constructor(){ }//在方法的參數(shù)中調(diào)用裝飾器getData(@logParams('xxxxx') uuid:any) { console.log(uuid);} } let h1:any = new HttpClient(); h1.getData(123456); console.log(h1.apiUrl);

13、裝飾器的執(zhí)行順序

屬性>方法>方法參數(shù)>類裝飾器
如果有同樣的裝飾器，則先執(zhí)行后面的。

總結

以上是生活随笔為你收集整理的it营Typescript学习笔记02（基础完结）模块，命名空间，装饰器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。