TypeScript模块整理（一）基础语法

冷不防 2022-06-13 09:14 206阅读 0赞

**一、介绍**

1.从ECMAScript2015开始，JavaScript引入了模块的概念。TypeScript也沿用了这个概念。

2.模块在自身的作用域里执行，而不是在全局作用域里；这意味着在一个模块里的变量，函数，类等等再模块外部是不可见的，除非你明确的使用export形式之一导出他们。

相反，如果你想使用其他模块导出的变量，函数，类，接口等的时候，你必须导入他们，可以使用import方式之一。

3.模块是自声明的；两个模块之间的关系是通过文件级别上使用impouts和exports建立的。

4.模块使用模块加载器区导入其他的模块。在运行时，模块加载器的作用是执行此模块代码去查找执行这个模块的所有依赖。

5.常用的JavaScript模块加载器是服务于Node.Js的CommonJs和服务于Web应用的Require.js

6.TypeScript和ECMAScript2015一样，任何包含顶级import或者export的文件都被当成一个模块。

**二、导出 export**

1.导出声明，使用export关键词

任何声明（比如变量，函数，类，类型别名或接口）都能够导出。一个ts文件中可以有多个导出

export interface StringValidator {
        isAcceptable(s: string): boolean;
    }

2.导出语句

导出语句很便利，因为我们可能需要对导出的部分重命名

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

3.重新导出

我们经常会扩展其他模块，并且只导出那个模块的部分。重新导出功能并不会再当前模块导入那个模块或定义一个新的局部变量。

export class ParseIntBasedZipCodeValidator {
        isAcceptable(s: string) {
            return s.length === 5 && parseInt(s).toString() === s;
        }
    }
    
    // 导出原先的验证器但做了重命名
    export {ZipCodeValidator as RegExpBasedZipCodeValidator} from "./ZipCodeValidator";

或者一个模块可以包裹多个模块，并把他们导出的内容联合在一起语法：export   \*  from 'model'

export * from "./StringValidator"; // exports interface StringValidator
    export * from "./LettersOnlyValidator"; // exports class LettersOnlyValidator
    export * from "./ZipCodeValidator";  // exports class ZipCodeValidator

**三、导入import**

模块的导入操作与导出一样简单。使用import语句，一个文件可以指定多次导入语句。

1.导入声明

import { LetterOnValidator } from "./lettersonly";
    let validator = new LetterOnValidator();
    let result = validator.isAcceptable('abc');
    console.info(result);
    //同一个文件的导出语句可以指定多次
    import { lettersRegexp } from "./lettersonly";
    console.info(lettersRegexp);

//同一个导入语句导入多个模块
    import {  lettersRegexp,LetterOnValidator} from "./lettersonly";
    console.info(lettersRegexp);
    console.info(LetterOnValidator);

2.重命名

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

3.将整个模块导入到一个变量，并通过它来访问

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

**四、默认导出**

每个模块都可以有一个default导出。默认导出使用default关键词标记；

并且一个文件只能够有1个default导出。

默认导出需要使用 imput  xxx  from ‘model/path’ 方式导入，注没有大括号。

default 导出十分便利。

//默认导出可以不指定类名，函数名等
    export default class {
        name: string = '王小明';
        show(): void {
            console.log(this.name);
        }
    }
    //一个文件中只能有一个默认导出，不然编译异常
    //export default '134';

default导出也可以是一个值

export default "123";

import num from "./OneTwoThree";
    
    console.log(num); // "123"

**五、export= 和 import=require('module')**

1.这种使用方式和Node.Js的使用方法相仿

2.CommonJS和AMD都有一个exports对象的概念，它包含了一个模块的所有导出内容。

它们也支持吧exports替换为一个自定义对象的概念。默认导出就好比这样一个功能；然而，它们确不相互兼容。

TypeScript模块支持export=语法以支持传统的CommonJS和AMD的工作流模型。

export=语法定义一个模型的导出对象。它可以是类、接口，命名空间，函数或枚举等。

3.若要导入一个使用了export=的模块，必须使用 TypeScript提供的特定语法 import model=require('model');

使用示例：

导出

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

导入

import zip = require('./module.2');
    export default function () {
        let strings = ['Hello', '98052', '101'];
        let validator = new zip();
        strings.forEach(s => {
            console.log(`${s}-${validator.isAcceptable(s) ? "mathches" : "does not match"}`);
        });
    }

//对于default 导出的模块，导入是不能使用大括号
    import test2 from "./test2";
    test2();

[TypeScript 高级类型整理][TypeScript]

T[ypeScript 类型推论整理][ypeScript]

[TypeScript Symbols和][TypeScript Symbols]迭代器

[TypeScript]: http://blog.csdn.net/u011127019/article/details/73897087
[ypeScript]: http://blog.csdn.net/u011127019/article/details/73866790
[TypeScript Symbols]: http://blog.csdn.net/u011127019/article/details/74059149