typescrip模块及 模块解析

简述

ES6 引入了模块化概念，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量通过import和export 来实现；自由跟换自主代码；
Typescript 沿用了这个概念

特点

1. 模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，不可用
2. 每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
3. 两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。
4. 模块使用模块加载器去导入其它的模块。 在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖

注意： 1. 在模块中，任何包含顶级import或者export的文件都被当成一个模块。相反地，如果一个文件不带有顶级的import或者export声明，那么它的内容被视为全局可见的（因此对模块也是可见的）
2.模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js,还有有 SystemJs 和 Webpack。

用法

基本用法

模块可以导出、导入 任何声明 比如变量，函数，类，类型别名或接口
导出模块代码通过export 实现
hello.ts

// 变量
let myName = "木子";
// 函数
let hi = function (){
  return `Hi 木子聊前端博主`
}
// 类
class Course {
    name:String;
    constructor(name:string){
      this.name = name;
    }
    talk(){
      return `${this.name}正在开课！`
    } 
}
// 接口
interface studentValidater{
  age:Number
}
export {myName,hi,Course,studentValidater}

导入使用代码
通过 import 实现
modules.ts

import {myName,hi,Course,studentValidater} from './hello';
console.log(myName); //木子
console.log(hi());   //Hi 木子聊前端博主 
let c =new Course('typescript'); 
console.log(c.talk());  //typescript正在开课！
function student(infro:studentValidater){
  console.log(infro.age);
}
student({age:18}); //18

一个例子说明了，任何声明（比如变量，函数，类，接口）导出、导入等使用，如果这个时候
你通过

tsc modules.ts 

去编译，编译成功但是放到浏览运行失败出现
Uncaught ReferenceError: exports is not defined
原用是模块加载器等问题和浏览器对es6语法对兼容问题，推荐用webpack去编译打包，详细
《webpack 之 typescript 打包学习基础 1》

as用法

可以简单理解为别名，就是对原来对名字进行重新命名，但是还是原来对功能
导出时候的as用法
export 使用as

let CourseName = "木子聊前端";
export {CourseName as name}

import 导入使用 就用别名

import {name} from './hello';
console.log(name); //木子聊前端

注意到 as 前面是 原名 as 后面是 别名 ‘原名’ as ‘别名’

导入时候的as用法
export

let CourseName = "木子聊前端";
export {CourseName}

import 的时候使用 as

import {CourseName as name} from './hello';
console.log(name); //木子聊前端

和导出的使用的时候使用as 语法一样

export default

在上面的例子中，可以看到我们在通过export 导出的时候指定了名字，并且在导入的时候需要知道导出的名字，不然就无法加载，在事情情况中，我们很少去阅读文档很多，去知道导出了那些属性和方法，希望快速使用。
这个时候我们就用到了export default, 为模块默认输出，用户就可以直接使用
使用 export default 有几个注意事项：

1. 一个模块只能够有一个default导出
2. 通过 export 方式导出，在导入时要加{ }，export default 则不需要。名字可以随便命名

默认导出可以是一个类，一个变量、函数等等
实现 export default 几种方法
以 导出一个函数为例：
方法一：直接写入

export default function() {
  return `Hi 木子聊前端博主`;
}

方法二：通过变量赋值

let hi = function (){
  return `Hi 木子聊前端博主`
}
export default hi;

方法三：as 实现 default

// 函数
let hi = function (){
  return `Hi 木子聊前端博主`
}
export {hi as default};  // 等于 export default hi;

导入实现都是一样

import h from './hello';
console.log(h()); // Hi 木子聊前端博主

还有 常量，类实现方式和函数是一样的哦

欢迎关注和留言 v ： chinaynlmq