TypeScript学习: 十、TypeScript的模块

　　我们可以把一些公共的功能单独抽离成一个文件作为一个模块，模块里面的变量 函数 类 等默认都是私有的，如果我们要在外部访问模块里面的数据（变量、函数、类） 我们需要通过export暴露模块里面的数据（变量、函数、类） 暴露后我们通过 import 引入模块就可以使用模块里面暴露的数据（变量、函数、类）了。

　　简单例子：

 

db.ts 文件

var dbUrl = "xxxxxxx";

//   export 暴露接口

export function getData():any[] {
    console.log("获取数据库的数据");
    return [{"key": "val"},{"key": "val"}];
}

index.ts 文件

import {getData} from './modules/db';  // import 引入db文件的 getData 函数， 注意这里的db.js 文件不需要写后缀

var data:any[] = getData();
console.log(data); 

 

再来看看编译过后生成的js文件

db.ts => db.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getData = void 0;
var dbUrl = "xxxxxxx";
//   export 暴露接口
function getData() {
    console.log("获取数据库的数据");
    return [{ "key": "val" }, { "key": "val" }];
}
exports.getData = getData;

index.ts => index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var db_1 = require("./modules/db"); // import 引入db文件的 getData 函数， 注意这里的db.js 文件不需要写后缀
var data = db_1.getData();
console.log(data);

 编译过来的js文件里面有exports 关键字 浏览器是无法编译的 ，需要通过node.js来执行代码， 或者通过webpack 来处理成浏览器可以执行的代码

如果在db.ts添加方法， 而没有使用export 其他文件是无法使用的

 

export的几种写法

方法一

//   export 暴露接口     db.ts文件
export function getData():any[] {
    console.log("获取数据库的数据");
    return [{"key": "val"},{"key": "val"}];
}


import {getData} from './modules/db';  // index.ts文件 import 引入db文件的 getData 函数

方法二

var dbUrl = "xxxxxxx";

function getData():any[] {
    console.log("获取数据库的数据");
    return [{"key": "val"},{"key": "val"}];
}

function save() {
    console.log("保存方法");
}

export {getData, save, dbUrl};  // export    db.ts文件


import {getData, save, dbUrl} from './modules/db';  //index.ts文件 import 引入db文件

方法三

注意使用default 关键字， 整个文件就只允许使用一个， 不能再有其他的export 或者多个export default

// util.ts 文件

function getHttp(str:string):void {
    console.log("获取网络", str);
}

export default getHttp;







// index.ts 文件
import getHttp from './modules/util';

getHttp("测试");

 

引入的时候也要注意， 因为只是引入一个， 所以不要添加 { xxx } 花括号了 

 

 

更换引入的名称

 引入的时候，可以通过as来重命名引入的变量，函数， 类，  比如把 getData 变成 get