TypeScript入門-模塊

econi 發布于2019-08-20 15:35 / 2437人閱讀

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

學習Angular 2 ，《揭秘Angular 2》讀書筆記。Angular2 選擇 TypeScript 作為其官方最主要的構建語音，這意味著掌握 TypeScript 語音將更有利于高效地開發 Angular 應用。

模塊

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

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

模塊使用模塊加載器去導入它的依賴，模塊加載器在代碼運行時會查找并加載模塊間的所有依賴。常用的模塊加載器有 SystemJs 和 Webpack。

模塊導出方式

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

導出聲明

任何模塊都能夠通過 export 關鍵字來導出，示例代碼如下：

export const COMPANY = "EG";    // 導出變量

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

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

導出語句

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

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

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

模塊包裝

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

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

一個模塊可以包裹多個模塊，并把新的內容以一個新的模塊導出，示例代碼如下：

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

模塊導入方式

模塊導入與模塊導出相對應，可以使用 import 關鍵字來導入當前模塊依賴的外部模塊。導入方式有如下幾種：

導入一個模塊

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

別名導入

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

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

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

模塊的默認導出

模塊可以用 default 關鍵字實現默認導出的功能，每個模塊可以有一個默認導出。類和 函數聲明 可以直接省略導出名來實現默認導出。默認導出有利于減少調用方調用模塊的層數，省去一些冗余的模塊前綴書寫，示例代碼如下：

默認導出類

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

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

默認導出函數

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

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

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

默認導出值

// constantService.ts
export default "Angular";

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

模塊設計原則

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

1.盡可能的在頂層導出

2.明確地列出導入的名字

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

3.使用命名空間模式導出

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

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

3.使用模塊包裝進行擴展

我們可能經常需要去擴展一個模塊的功能，推薦的方案是不要去改變原來的對象，而是導出一個新的對象來提供新的功能，示例代碼如下：

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82357.html

TypeScript快速入門

摘要：添加了可選的靜態類型注意并不是強類型和基于類的面向對象編程。類類型接口示例接口更注重功能的設計，抽象類更注重結構內容的體現模塊中引入了模塊的概念，在中也支持模塊的使用。一：Typescript簡介維基百科： TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個嚴格超集，并添加了可選的靜態類型和基于類的面向對象編程。C#的首席架構師以及Delp...

moven_j 2019-08-22 11:11 評論0 收藏0
TypeScript入門-接口

摘要：接口類型檢查不會去檢查屬性順序，但是屬性的必須存在且類型匹配。函數的返回值函數的返回值類型必須與接口定義的返回值保持一致。示例代碼如下張三李四張三輸出張三輸出張三索引簽名支持字符串和數字兩種數據類型。學習Angular 2 ，《揭秘Angular 2》讀書筆記。Angular2 選擇 TypeScript 作為其官方最主要的構建語音，這意味著掌握 TypeScript 語音將更有利...

sewerganger 2019-08-21 15:32 評論0 收藏0
JavaScript => TypeScript 類入門

摘要：靜態屬性靜態方法目前支持靜態方法表示，類屬性及靜態屬性目前作為提案還未正式成為標準。在中，抽象類不能用來實例化對象，主要做為其它派生類的基類使用。不同于接口，抽象類可以包含成員的實現細節。中也是這樣規定的抽象類不允許直接被實例化。嘗試重寫在此之前，通過《JavaScript => TypeScript 入門》已經掌握了類型聲明的寫法。原以為憑著那一條無往不利的規則，就可以開開心心的...

geekidentity 2019-08-21 17:44 評論0 收藏0
TypeScript極速完全入門-3ts結合react進行項目開發

摘要：前面我們已經說了大部分的核心內容，接下來我們就說說如何用開發實際項目。因為和結合很緊密，資料也很多，而且我會找機會專門說下這方面的知識，所以我們將重點放到如何用結合上來。所以前面打牢基礎，現在我們開始實際組建工作流。前面我們已經說了大部分typescript的核心內容，接下來我們就說說如何用typescript開發實際項目。因為angular和typescript結合很緊密，資料也...

arashicage 2019-08-22 16:45 評論0 收藏0
SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...

caspar 2019-08-15 13:33 評論0 收藏0