TypeScript入門-模塊

econi 發(fā)布于2019-08-20 15:35 / 2444人閱讀

摘要：模塊模塊是自聲明的，兩個(gè)模塊之間的關(guān)系是通過在文件級(jí)別上使用和來建立的。類似地，我們必須通過導(dǎo)入其他模塊導(dǎo)出的變量函數(shù)類等。模塊使用模塊加載器去導(dǎo)入它的依賴，模塊加載器在代碼運(yùn)行時(shí)會(huì)查找并加載模塊間的所有依賴。

學(xué)習(xí)Angular 2 ，《揭秘Angular 2》讀書筆記。Angular2 選擇 TypeScript 作為其官方最主要的構(gòu)建語音，這意味著掌握 TypeScript 語音將更有利于高效地開發(fā) Angular 應(yīng)用。

模塊

模塊是自聲明的，兩個(gè)模塊之間的關(guān)系是通過在文件級(jí)別上使用 import 和 export 來建立的。TypeScript 和 ES6 一樣，任何包含頂級(jí) import 或者 export 的文件都會(huì)被當(dāng)成一個(gè)模塊。

模塊是在其自身的作用域里執(zhí)行，并不是在全局作用域，這意味著定義在模塊里面的變量、函數(shù)和類等在模塊外部是不可見的，除非明確地使用 export 導(dǎo)出它們。類似地，我們必須通過 import 導(dǎo)入其他模塊導(dǎo)出的變量、函數(shù)、類等。

模塊使用模塊加載器去導(dǎo)入它的依賴，模塊加載器在代碼運(yùn)行時(shí)會(huì)查找并加載模塊間的所有依賴。常用的模塊加載器有 SystemJs 和 Webpack。

模塊導(dǎo)出方式

模塊可以通過導(dǎo)出方式來提供變量、函數(shù)、類、類型別名、接口等給外部模塊調(diào)用，導(dǎo)出的方式分為以下三種：

導(dǎo)出聲明

任何模塊都能夠通過 export 關(guān)鍵字來導(dǎo)出，示例代碼如下：

export const COMPANY = "EG";    // 導(dǎo)出變量

export interface IdentiryValidate {    // 導(dǎo)出接口
    isValidate(s: string): boolean;    
}

export class ErpIdentityValidate implements IdentiryValidate {    // 導(dǎo)出類
     isValidate(s: string) {
         return true;
     }
}

導(dǎo)出語句

有時(shí)我們需要對(duì)導(dǎo)出的模塊進(jìn)行重命名，這個(gè)時(shí)候就用到了導(dǎo)出語句，示例代碼如下：

export class ErpIdentityValidate implements IdentiryValidate {    // 導(dǎo)出類
     isValidate(s: string) {
         return true;
     }
}

export { ErpIdentityValidate }
export { ErpIdentityValidate as EGIdentityValidate };    // 重命名

模塊包裝

有時(shí)候我們需要修改和擴(kuò)展已有的模塊，并導(dǎo)出供其他模塊調(diào)用，這時(shí)，可以時(shí)候模塊包裝來再次導(dǎo)出，我看到別的文章將其稱為 “重新導(dǎo)出” 。示例代碼如下：

export { ErpIdentityValidate as EGIdentityValidate } from "./ErpIdentityValidate";

一個(gè)模塊可以包裹多個(gè)模塊，并把新的內(nèi)容以一個(gè)新的模塊導(dǎo)出，示例代碼如下：

export * from "./IdentiryValidate";
export * from "./ErpIdentityValidate";

模塊導(dǎo)入方式

模塊導(dǎo)入與模塊導(dǎo)出相對(duì)應(yīng)，可以使用 import 關(guān)鍵字來導(dǎo)入當(dāng)前模塊依賴的外部模塊。導(dǎo)入方式有如下幾種：

導(dǎo)入一個(gè)模塊

import { ErpIdentityValidate } from "./ErpIdentityValidate";
let erpValide = new ErpIdentityValidate();

別名導(dǎo)入

import { ErpIdentityValidate as ER} from "./ErpIdentityValidate";
let erpValide = new ERP ();

另外，我們也可以對(duì)整個(gè)模塊進(jìn)行別名導(dǎo)入，將整個(gè)模塊導(dǎo)入到一個(gè)變量，并通過這個(gè)變量來訪問模塊的導(dǎo)出部分，實(shí)例代碼如下：

import * as validator from "./ErpIdentityValidate";
let myValidate = new validator.ErpIdentityValidate();

模塊的默認(rèn)導(dǎo)出

模塊可以用 default 關(guān)鍵字實(shí)現(xiàn)默認(rèn)導(dǎo)出的功能，每個(gè)模塊可以有一個(gè)默認(rèn)導(dǎo)出。類和 函數(shù)聲明 可以直接省略導(dǎo)出名來實(shí)現(xiàn)默認(rèn)導(dǎo)出。默認(rèn)導(dǎo)出有利于減少調(diào)用方調(diào)用模塊的層數(shù)，省去一些冗余的模塊前綴書寫，示例代碼如下：

默認(rèn)導(dǎo)出類

// ErpIdentityValidate.ts
export default class ErpIdentityValidate implements IdentiryValidate {
     isValidate(s: string) {
         return true;
     }
}

// test.ts
import validator from "./ErpIdentityValidate";
let erp = new validator();

默認(rèn)導(dǎo)出函數(shù)

// nameServiceValidate.ts
export default function(s: string){
    return true;    // 具體代碼略
}

// test.ts
import validate from "./nameServiceValidate";
let name = "Angular";

// 使用導(dǎo)出函數(shù)
console.log(`"${name}" ${validate(name)? " matches": " does not matches"}`);

默認(rèn)導(dǎo)出值

// constantService.ts
export default "Angular";

// test.ts
import name form "./constantService";
console.log(name);

模塊設(shè)計(jì)原則

在模塊設(shè)計(jì)中，公共遵循一些原則有利于更好地編寫和維護(hù)項(xiàng)目代碼，下面列出幾點(diǎn)模塊設(shè)計(jì)的原則

1.盡可能的在頂層導(dǎo)出

2.明確地列出導(dǎo)入的名字

import {ClassTest, FuncTest} from "./ModuleTest";

3.使用命名空間模式導(dǎo)出

// MyLargeModule.ts
export class Dog {}
export class Cat {}
export class Tree {}

// test.ts
import * as myLargeModule from "./MyLargeModule";
let x = new myLargeModule.Dog();

3.使用模塊包裝進(jìn)行擴(kuò)展

我們可能經(jīng)常需要去擴(kuò)展一個(gè)模塊的功能，推薦的方案是不要去改變?cè)瓉淼膶?duì)象，而是導(dǎo)出一個(gè)新的對(duì)象來提供新的功能，示例代碼如下：

// ModuleA.ts
export class ModuleA {
    constructor(){/*... */}
    sayHello() {/*... */}
}

// ModuleB.ts
import { ModuleA } from "./ModuleA";
class ModuleB extends ModuleA {
    constructor(){super(); /*... */}
    // 添加新方法
    sayHi() {/*... */}
}
export { ModuleB as ModuleA }

// Test.ts
import { ModuleA } from "./ModuleB";
let C = new ModuleA();

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82357.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

econi

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 1695·2023-04-25 20:16
LinuxMirrors一鍵腳本徹底解決linux換源問題 – 讓linux寶塔

閱讀 3882·2021-10-09 09:54
勒索軟件攻擊致杜佩奇醫(yī)療集團(tuán)超65.5萬人數(shù)據(jù)泄露

閱讀 2713·2021-09-04 16:40
git常用命令速查表

閱讀 2527·2019-08-30 15:55
搜索結(jié)果頁優(yōu)化

閱讀 843·2019-08-29 12:37
Vue+Express+Mysql 全棧初體驗(yàn)

閱讀 2749·2019-08-26 13:55
前端簡(jiǎn)單面部識(shí)別

閱讀 2918·2019-08-26 11:42
JavaScript之“use strict”

閱讀 3164·2019-08-23 18:26

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

TypeScript入門-模塊

相關(guān)文章

TypeScript快速入門

TypeScript入門-接口

**JavaScript => TypeScript 類入門**

TypeScript極速完全入門-3ts結(jié)合react進(jìn)行項(xiàng)目開發(fā)

SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學(xué)習(xí)一門新的編程語言吧！

發(fā)表評(píng)論

0條評(píng)論

econi

男|高級(jí)講師

TA的文章

tensorflow

LinuxMirrors一鍵腳本徹底解決linux換源問題 – 讓linux寶塔

勒索軟件攻擊致杜佩奇醫(yī)療集團(tuán)超65.5萬人數(shù)據(jù)泄露

git常用命令速查表

搜索結(jié)果頁優(yōu)化

Vue+Express+Mysql 全棧初體驗(yàn)

前端簡(jiǎn)單面部識(shí)別

JavaScript之“use strict”

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

TypeScript入門-模塊

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！