码迷,mamicode.com
首页 > 其他好文 > 详细

TypeScript 模块

时间:2020-09-18 03:12:49      阅读:35      评论:0      收藏:0      [点我收藏+]

标签:use   sem   regex   作用   ida   com   cep   date   def   

1. 模块的概念与特点

  a. TypeScript 模块的设计理念是可以更换的组织代码;

  b. 模块是在其自身的作用域里执行,模块里面的变量、函数和类等在模块外部是不可见的,除非明确 地使用 export 导出它们;

  c. 必须通过 import 导入其他模块导出的变量、函数、类,才能使用; 两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的;

  d. 在运行时,模块加载器的作用是在执行前去查找并执行这个模块的所有依赖。

2. 模块的导出与导入

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

// 导出接口
export interface StringValidator {
    isAcceptable(s: string): boolean;
}

// 导出变量
export const numberRegexp = /^[0-9]+$/;

// 导出函数
export const isEmpty = (str: string) => str.length > 0;

// 导出类
export class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}

可以使用以下 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";

使用 export default 默认导出,可简化使用。

// 默认导出类
// ZipCodeValidator.ts
export default class ZipCodeValidator {
    static numberRegexp = /^[0-9]+$/;
    isAcceptable(s: string) {
        return s.length === 5 && ZipCodeValidator.numberRegexp.test(s);
    }
}
// Test.ts
import validator from "./ZipCodeValidator";
let myValidator = new validator();
// 默认导出函数
// 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"}`);
});
// 默认导出值
// OneTwoThree.ts
export default "123";

// Log.ts
import num from "./OneTwoThree";
console.log(num); // => "123"

3. 模块导出与导入的特殊语法

为了支持 CommonJS 和 AMD 的 exports, TypeScript 提供了export = 语法。 export = 和 import = require() 要对应使用。

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

// Test.ts
import zip = require("./ZipCodeValidator");
let validator = new zip();

4. 创建模块结构指导

  a. 尽可能地在顶层导出

    (1)如果仅导出单个 class 或 function,使用 export default

    (2)如果要导出多个对象,把它们放在顶层里导出

    (3)明确地列出导出的名字

  b. 当你要导出大量内容的时候使用命名空间导入模式

  c. 使用重新导出进行扩展

  d. 模块里不要使用命名空间

当要导出大量内容时,使用命名空间导入模式:

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

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

当要对某个对象进行扩展时,推荐的方案是不要去改变原来的对象,而是导出一个新的实体来提供新的 功能。

// 使用重新导出进行扩展
import { Calculator } from "./Calculator";
class ProgrammerCalculator extends Calculator {... }
// 导出新实体
export { ProgrammerCalculator as Calculator };
export { test } from "./Calculator";

// 导入使用
import { Calculator, test } from "./ProgrammerCalculator";
let c = new Calculator(2);
test(c, "001+010=");

 

TypeScript 模块

标签:use   sem   regex   作用   ida   com   cep   date   def   

原文地址:https://www.cnblogs.com/JosephWong/p/13679643.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!