模块化开发

介绍

TypeScript支持两种方式来控制我们的作用域

模块化:每个文件可以是一个独立的模块，支持ES Module，也支持CommonJS;

命名空间:通过namespace来声明一个命名空间

模块化 ES Module

ES Module介绍

ES Module是ES6中的一个模块化规范，它是通过export和import来导出和导入模块的 (ES Module是静态的，不能动态导入)

// src/utils/math.ts
export function add(a:number,b:number){
  return a + b;
}
export function add(a:number,b:number){
  return a - b;
}

// src/index.ts
// import {add,sub} from './utils/math'
console.log(add(1,2));
console.log(sub(1,2));

命名空间 namespace

namespace介绍

namespace是TypeScript中的一个命名空间，它可以用来组织代码，避免命名冲突

命名空间在TypeScript早期时，称之为内部模块，主要目的是将一个模块内部再进行作用域的划分，防止一些命名冲突的问题。

// src/utils/format.ts
// 命名空间的使用
namespace utils{
  export function add(a:number,b:number){
    return a + b;
  }
  // 如果定义了export，那么就可以在外部使用 
  // 如果没有定义export，那么就只能在当前的命名空间中使用
  // 包括函数、类、接口、变量等
  function sub(a:number,b:number){
    return a - b;
  }
  export const name = 'utils';
  // 没有定义export，所以只能在当前的命名空间中使用
  function mul(a:number,b:number){
    return a * b;
  }
  // 命名空间可以嵌套  使用的时候链试调用
  namespace utils2{
    export function add(a:number,b:number){
      return a + b;
    }
  }
}

// 命名空间
namespace time{
  // 命名空间里面的作用域是独立的，不会影响外部的作用域
  export function add(a:number,b:number){
    return a + b;
  }
}

// src/index.ts
// import {utils,time} from './utils/format'
// 命名空间的使用
console.log(utils.add(1,2));
console.log(utils.name);
console.log(utils.utils2.add(1,2));  // 命名空间嵌套使用
console.log(time.add(1,2));