8、TypeScript模块

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

模块

1、模块概念

2、模块导出的几种方法

1、export 导出声明

2、export 导出语句

3、export default

4、import导出模块

模块的概念（官方）:

关于属于的一点声明，请务必注意一点，TypeScript1.5里面已经发生变化。“内部模块”现在成为“命名空间”。

“外部模块”现在简称为模块，模块在自身的作用与里执行，而不是在全局作用域里。

这意味着定义在一个模块里的变量、函数、类、接口等等在外部模块是不可见的，除非你明确使用export形式之一导出他们。

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

模块化概念（自己）：

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

模块里面的变量函数类等默认是私有的，如果我们要在外部访问模块里面的（类函数变量）

我们需要通过export暴露模块里面的数据。

暴露后我们可通过import引入模块就可以使用模块里面暴露的数据。

将公共方法定义到一个db.ts模块中

/*

export var dbUrl = '10.168.1.202:8080';//export 导出声明
export function getData():any[]{//export 导出语句
  console.log('获取数据库的数据');
  return [
    {
      title:'title001',
      desc:'desc001',
    },
    {
      title:'title002',
      desc:'desc002',
    }
  ]
}
export function save(){//export 导出语句
  console.log('保存数据成功');
}

*/

/*
var dbUrl = '10.168.1.202:8080';
function getData():any[]{
  console.log('获取数据库的数据');
  return [
    {
      title:'title001',
      desc:'desc001',
    },
    {
      title:'title002',
      desc:'desc002',
    }
  ]
}
function save(){
  console.log('保存数据成功');
}
export {dbUrl,getData,save}//导出
*/

var dbUrl = '10.168.1.202:8080';
function getData():any[]{
  console.log('获取数据库的数据');
  return [
    {
      title:'title001',
      desc:'desc001',
    },
    {
      title:'title002',
      desc:'desc002',
    }
  ]
}
function save(){
  console.log('保存数据成功');
}

export default getData;

引用

// import {getData,save,dbUrl} from './modules/db';//import导出模块
// getData();

// import {getData as get} from './modules/db';//import导出模块
// get();

import getData from './modules/db';//import导出模块
getData();

export default 默认导出

每个模块都可以有一个default导出。默认导出使用 default关键字标记。并且每一个模块只有一个default导出。