ts(typescript) 的模块化

ts(typescript) 模块化

模块化标准

ts 中的模块化，尽量统一使用 es6（es2015）的模块化标准
前端领域中的模块化标准：ES6、commonjs、amd、umd、system、esnext

例如：

// a.ts 文件
// 导出一个常量
export const a: number = 1;
// 导出一个函数
export function b(a: number, b: number): number {
  return a + b;
}

function defaultFunc() {
  console.log('this is default function')
}
// 默认导出
export default defaultFunc;

//index.ts 文件
// require('./poker/index.ts')

import defaultFunc, { a, b } from "./a";

console.log(a, b(1, 2),defaultFunc())

结果：

编译结果对比

ts 中可以通过使用 module 设置编译结果中使用的模块化标准,这个可以依照环境的不同来设置，如浏览器设置 es6， node 设置 commonjs等，这个是灵活处理的。

• ts 里面的代码使用的es6的导入和导出，编译的模块化是es6对比如下：
  
  
  结论： 上面的两张图中我们可以看到，ts里面的模块化使用es6,编译的结果也是es6，他们两者是没有区别的，但是要注意一个问题，导入模块的时候千万不能使用后缀名xxx.ts,因为编译后的结果是没有.ts后缀的文件的

• ts 里面的代码使用的es6的导入和导出，编译的模块化是commonjs对比如下
  
  

结论：ts 的配置，编译的对象可以兼容很古老的语法，为了兼容旧版本，但是ts是遵从es标准的。如果编译结果的模块化标准是commonjs：导出的声明会变成exports的属性，默认的导出会变成exports的default属性；

解决默认导入问题

在index.ts中直接导入fs模块， 例如import fs from 'fs',但是结果确实报错的，如下：

编译的结果如下（虽然说报错了， 但是ts默认是可以编译的，这个可以通过配置来进行配置）：

但是如何解决这个问题呢？

• 方法一：按需导入

 import { readFileSync } from 'fs'
  readFileSync('./')

编译的结果如下：这个时可以正常使用的。

• 方法二： 重命名的导入

import * as fs from 'fs'
fs.readFileSync('./')

• 方法三：在ts.config.json中配置启用esModuleInterop 启用es模块化交互非es模块导出

import fs from 'fs'
fs.readFileSync('./')

ts 中书写common js 的代码

在ts 中，我们可以使用commonjs的语法，导出使用 module.export 或者 exports.xxx, 使用 require('xxx')来进行导入，但是这样的话就得不到 ts的类型检查了。

如何既可以使用commonjs的语法，也要能进行类型检查呢？
ts 新增了一个语法：

导出：export = xxx

导入：import xxx = require("xxx")

例如：

// a.ts 文件
// 定义一个变量
const a: number = 1;

// 定义一个函数
function b(a: number, b: number): number {
  return a + b;
}

// 导出变量和函数
export= {
  a: a,
  b: b,
}

// index.ts 文件
import obj = require('./a');
console.log(obj.a, obj.b(1, 2))

运行结果如下：

编译结果如下：

• a.ts 文件
  
• index.ts 文件
  

ts的模块解析策略

TS中，有两种模块解析策略

• classic：经典, 已经成为过去了
• node：node解析策略（唯一的变化，是将js替换为ts）
  • 相对路径require("./xxx")
  • 非相对模块require("xxx")

可以使用配置文件来进行配置：
在ts.config.json 中使用 moduleResolution 来进行模块解析策略的配置。

本博客用到的ts的配置：

详细配置参考