Typescript的模块

Typescript的模块

Typescript中的“内部模块”现在称作“命名空间”，“外部模块”称作“模块”。

模块在其自身的作用域里执行，而不是在全局作用域里。这意味着定义在一个模块里的变量、函数、类等在模块外部是不可见的，除非你明确地使用export形式之一导出它们。相反，如果想使用其他模块导出的变量、函数、类、接口等等的时候，你必须要导入它们，可以使用import形式之一。

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

编写模块并导出

编写模块 modules/db.ts：

// 使用export暴露dbURL变量
export var dbURL = 'XXXXX';
// 使用export将getData方法声明出去
export function getData():any[] {
    console.log('获取数据库的数据');
    return [
        {
            title:'123'
        },
        {
            title:'234'
        }
    ]
}
// 使用export暴露save函数
export function save():void {
    console.log('保存数据库数据');
}

模块的第二种写法：

var dbURL = 'XXXXX';
function getData():any[] {
    console.log('获取数据库的数据');
    return [
        {
            title:'123'
        },
        {
            title:'234'
        }
    ]
}
function save():void {
    console.log('保存数据库数据');
}
// 使用export统一暴露变量、函数
// export可以使用多次，即
// export {dbURL}
// export {getData}
// 导出时重命名
// export { getData as data }
// 导出扩展的其他模块
// export {ZipCodeValidator as RegExpBasedZipCodeValidator} from "./ZipCodeValidator";
// 导出扩展的其他模块的所有导出的内容
// export * from "./ZipCodeValidator"; 
export {dbURL,getData,save}

导入模块

编写ts程序，引入db.ts模块

// 使用import引入模块中需要用到的函数、变量名,模块路径不写.ts
// 使用 as 为某个变量或函数名重新命名一个别名
import {getData,dbURL,save as sa} from './modules/db'
// 将整个模块导入到一个变量
// import * as validator from "./ZipCodeValidator";
// 正常调用db.ts中的getData、save方法
getData();
sa();

编写好的ts模块，经过编译后，生成的js中含有export、require关键字，在浏览器中不能直接运行。需要再经过编译或者使用nodejs运行。

使用nodejs运行生成的js:

cd js
node index.js

默认引入：

// 默认引入时，使用export default声明
var dbURL = 'XXXXX';
function getData():any[] {
    console.log('获取数据库的数据');
    return [
        {
            title:'123'
        },
        {
            title:'234'
        }
    ]
}
function save():void {
    console.log('保存数据库数据');
}
// 使用export default暴露一个函数或变量
// export default在一个模块中只能使用一次
export default getData;

引入export default:

// export default声明的模块函数,引入时不加大括号
import getData from './modules/db'
getData;

require导入模块

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

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

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

外部模块

要想描述非TypeScript编写的类库的类型，我们需要声明类库所暴露出的API。

我们叫它声明因为它不是“外部程序”的具体实现。它们通常是在 .d.ts文件里定义的。如果你熟悉C/C++，你可以把它们当做 .h文件。类似Java的Interface。

例如：node.d.ts

declare module "url" {
    export interface Url {
        protocol?: string;
        hostname?: string;
        pathname?: string;
    }
    export function parse(urlStr: string, parseQueryString?, slashesDenoteHost?): Url;
}
declare module "path" {
    export function normalize(p: string): string;
    export function join(...paths: any[]): string;
    export let sep: string;
}

现在我们可以/// node.d.ts并且使用import url = require("url");或import * as URL from "url"加载模块。

/// <reference path="node.d.ts"/>
import * as URL from "url";
let myUrl = URL.parse("http://www.typescriptlang.org");

前端笔记

07-模块

Typescript的模块

编写模块并导出

导入模块

require导入模块

外部模块