TypeScript入門-模塊

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

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

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

模塊

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

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

模塊使用模塊加載器去導(dǎo)入它的依賴，模塊加載器在代碼運行時會查找并加載模塊間的所有依賴。常用的模塊加載器有 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)出語句

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

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

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

模塊包裝

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

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

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

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

模塊導(dǎo)入方式

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

導(dǎo)入一個模塊

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

別名導(dǎo)入

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

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

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

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

模塊可以用 default 關(guān)鍵字實現(xiàn)默認(rèn)導(dǎo)出的功能，每個模塊可以有一個默認(rèn)導(dǎo)出。類和 函數(shù)聲明 可以直接省略導(dǎo)出名來實現(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è)計原則

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

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īng)常需要去擴展一個模塊的功能，推薦的方案是不要去改變原來的對象，而是導(dǎo)出一個新的對象來提供新的功能，示例代碼如下：

// 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();

GPU云服務(wù)器云服務(wù)器 TypeScript typescript javascript typescript-ionic2 模塊機房

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/82357.html

發(fā)表評論

登陸后可評論

0條評論

econi

男|高級講師

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

TA的文章

tensorflow

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

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

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

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

閱讀 887·2019-08-29 12:37
Vue+Express+Mysql 全棧初體驗

閱讀 2796·2019-08-26 13:55
前端簡單面部識別

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

TypeScript入門-模塊

相關(guān)文章

TypeScript快速入門

TypeScript入門-接口

**JavaScript => TypeScript 類入門**

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

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

發(fā)表評論

0條評論

econi

男|高級講師

TA的文章

tensorflow

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

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

git常用命令速查表

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

Vue+Express+Mysql 全棧初體驗

前端簡單面部識別

JavaScript之“use strict”

最新活動

資訊專欄INFORMATION COLUMN

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

TypeScript入門-模塊

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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