我们可以把一些公共的功能单独抽离成一个文件作为一个模块。

模块里面的变量 函数 类等默认是私有的,如果我们要在外部访问模块里面的数据(变量、函数、类),

我们需要通过export暴露模块里面的数据(变量、函数、类...)。

暴露后我们通过 import 引入模块就可以使用模块里面暴露的数据(变量、函数、类

模块是自声明的;两个模块之间的关系是通过在文件级别上使用importsexports建立的。

导出

导出声明

任何声明(比如变量,函数,类,类型别名或接口)都能够通过添加export关键字来导出。

export interface StringValidator {
isAcceptable(s: string): boolean;
} export const numberRegexp = /^[0-9]+$/; export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}

导出语句

class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
export { ZipCodeValidator };
export { ZipCodeValidator as mainValidator };

导入

模块的导入操作与导出一样简单。 可以使用以下 import形式之一来导入其它模块中的导出内容。

导入一个模块中的某个导出内容

    import { ZipCodeValidator } from "./ZipCodeValidator";

    let myValidator = new ZipCodeValidator();

可以对导入内容重命名

    import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";
let myValidator = new ZCV();

将整个模块导入到一个变量,并通过它来访问模块的导出部分

    import * as validator from "./ZipCodeValidator";
let myValidator = new validator.ZipCodeValidator();

具有副作用的导入模块

尽管不推荐这么做,一些模块会设置一些全局状态供其它模块使用。 这些模块可能没有任何的导出或用户根本就不关注它的导出。 使用下面的方法来导入这类模块:

    import "./my-module.js";

默认导出

每个模块都可以有一个default导出。 默认导出使用 default关键字标记;并且一个模块只能够有一个default导出。 需要使用一种特殊的导入形式来导入 default导出。

default导出十分便利。 比如,像JQuery这样的类库可能有一个默认导出 jQuery$,并且我们基本上也会使用同样的名字jQuery$导出JQuery。

JQuery.d.ts

declare let $: JQuery;
export default $;

App.ts

import $ from "JQuery";

$("button.continue").html( "Next Step..." );

类和函数声明可以直接被标记为默认导出。 标记为默认导出的类和函数的名字是可以省略的。

StaticZipCodeValidator.ts

const numberRegexp = /^[0-9]+$/;

export default function (s: string) {
return s.length === 5 && numberRegexp.test(s);
}

Test.ts

import validate from "./StaticZipCodeValidator";

let strings = ["Hello", "98052", "101"];

// Use function validate
strings.forEach(s => {
console.log(`"${s}" ${validate(s) ? " matches" : " does not match"}`);
});

default导出也可以是一个值

OneTwoThree.ts

export default "123";

Log.ts

import num from "./OneTwoThree";

console.log(num); // "123"

export = 和 import = require()

CommonJS和AMD的环境里都有一个exports变量,这个变量包含了一个模块的所有导出内容。

CommonJS和AMD的exports都可以被赋值为一个对象, 这种情况下其作用就类似于 es6 语法里的默认导出,即 export default语法了。虽然作用相似,但是 export default 语法并不能兼容CommonJS和AMD的exports

为了支持CommonJS和AMD的exports, TypeScript提供了export =语法。

export =语法定义一个模块的导出对象。 这里的对象一词指的是类,接口,命名空间,函数或枚举。

若使用export =导出一个模块,则必须使用TypeScript的特定语法import module = require("module")来导入此模块。

let numberRegexp = /^[0-9]+$/;
class ZipCodeValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
export = ZipCodeValidator;

test.ts

import zip = require("./ZipCodeValidator");

// Some samples to try
let strings = ["Hello", "98052", "101"]; // Validators to use
let validator = new zip(); // Show whether each string passed each validator
strings.forEach(s => {
console.log(`"${ s }" - ${ validator.isAcceptable(s) ? "matches" : "does not match" }`);
});

案例

typescript - 7.模块的更多相关文章

  1. TypeScript Modules(模块)

    本文概述了TypeScript中如何使用模块以各种方式来组织代码.我们将涵括内部和外部的模块,并且讨论他们在适合在何时使用和怎么使用.我们也会学习一些如何使用外部模块的高级技巧,并且解决一些当我们使用 ...

  2. TypeScript 素描 - 模块解析、声明合并

    模块解析 模块解析有两种方式 相对方式  也就是以/或 ./或-/开头的,比如import jq  from "/jq" 非相对方式  比如 import model  from ...

  3. TypeScript 素描 - 模块

    /* 其实前面一些都是废话,因为都和C#类似.从模块开始就需要深入的去理解了 文档反复声明了 内部模块现在称做 命令空间 外部模块称为 模块 模块在其自身的作用域里执行,而不是在全局作用域里,也就是说 ...

  4. TypeScript 素描 - 模块、命名空间

    /* 其实前面一些都是废话,因为都和C#类似.从模块开始就需要深入的去理解了 文档反复声明了 内部模块现在称做 命令空间 外部模块称为 模块 模块在其自身的作用域里执行,而不是在全局作用域里,也就是说 ...

  5. TypeScript 之 模块

    https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Modules.html 外部模块简写 外部模块简写:declare ...

  6. TypeScript入门九:TypeScript的模块

    关于TypeScript模块的基本使用方法 Ts的模块化语法与ES6的语法基本是一致(关于一些细节特性没有测试,请各自自行测试),然后再由tsconfig.json的module字段来描述转码类型,具 ...

  7. Angular2入门:TypeScript的模块

    一.export 二.import 三.模块的默认导出

  8. 转载:《TypeScript 中文入门教程》 5、命名空间和模块

    版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 关于术语的一点说明: 请务必注意一点,TypeScript 1.5里术语名已经发生了变 ...

  9. TypeScript学习笔记(七):模块

    JavaScript中的模块 在学习TypeScript的模块之前我们先看看在JavaScript中的模块是如何实现的. 模块的好处 首先我们要了解使用模块的好处都有什么? 模块化.可重用: 封装变量 ...

随机推荐

  1. Linux 各系统目录作用及内容

  2. CASE WHEN 函数

    --Case函数: --有两种格式: -- 1.简单Case函数. -- 2.Case搜索函数. --1.简单Case函数: -- CASE [COLUMN_NAME] -- WHEN ['条件参数' ...

  3. geopy 在python中的使用

    https://blog.csdn.net/learn_tech/article/details/80756788 2018年06月21日 10:35:52 learn_tech 阅读数:1182   ...

  4. 动手搭建codecombat服务

    # 因为后面需要使用浏览器访问 127.0.0.1:3000去获取管理员控制权,所以需要一个图形化的界面. yum install net-tools -y   yum groupinstall &q ...

  5. LGOJP2051 [AHOI2009]中国象棋

    比较明显的计数dp.不知道为什么被打了状压的tag... 不难发现无论炮放在哪里其实是等价的,需要知道的只有这一列放了一个炮还是两个炮还是还没放,那么可以设\(f[i,j,k]\)表示第\(i\)行, ...

  6. ThinkPHP远程调用模块的操作方法 URL 参数格式

    * 远程调用模块的操作方法 URL 参数格式 [项目://][分组/]模块/操作 * @param string $url 调用地址 * @param string|array $vars 调用参数 ...

  7. JS获取访客IP进行自动跳转

    因业务需要进行地区判断跳转指定站点,下面是我个人实现的办法,分享给大家,仅供参考,切勿做非法用途 第一步,获取IP并判断归属地 直接使用搜狐的IP库查询接口 <script type=" ...

  8. window对象(全局对象)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Postgresql operator does not exist: numeric = character varying

    )),series_name from svcm_t_series_res: 原来series_id是numeric型,现在转换为varchar(64):

  10. BeEF 获取同局域网内用户浏览器信息

    1.将kali网络适配器改为桥接模式 打开网络适配器,获取权限 修改桥接模式,进行应用 重启网卡 /etc/init.d/networking restart 查看IP地址 查看网络通不通 2.开启B ...