TypeScript入门-模块

2024年5月31日 175次阅读 来源: wuweisen

进修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();
    原文作者：wuweisen
    原文地址: https://segmentfault.com/a/1190000008955023
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞