04-TypeScript学习之模块化

• 模块化
  • 研究问题
  • TS中如何书写模块化语句
  • 编译结果中的模块化
  • 特殊情况（类似于fs）
    • 解决方法
  • 如何在TS中书写commonjs模块化代码
  • 模块解析

模块化

• 前端领域中的模块化标准: ES6 commonjs amd umd system

研究问题

TS中如何书写模块化语句

编译结果使用的是什么模块化标准

TS中如何书写模块化语句

TS中 导入和导出模块 统一使用ES6的模块化标准

编译结果中的模块化

• 可配置 tsConfig.json module属性

node 环境 - commonjs 转换成require引入 导出的声明会变成一个一个的属性

浏览器环境 - es2017 没有区别

• 编译时使用commonjs export default会被编译成exports上的一个属性default

/*ts代码*/
/*导出*/
export default function sayHello(){
    console.log("hello my Module");
}
/*导入*/
import sayHello from "./myModule"
sayHello();

/*commonjs编译结果*/
/*导出*/
function default_1() {
    console.log("hello my Module");
}
exports.default = default_1;
/*导入*/
myModule_1.default();

特殊情况（类似于fs）

import fs from "fs"
fs.readFileSync("./");

const fs_1 = require("fs");
fs_1.default.readFIleSync("./");

• fs是node中的一个模块 使用module.exports = {}形式导出
• 引入时使用的是默认引入 编译时 所有的函数调用前都会加上default 导致无法识别该函数

解决方法

• 单个引入函数

import {readFileSync} from "fs"
readFileSync("./");

• 全部引入 定义别名

import * as fs from "fs"
fs.readFileSync("./");

• 添加配置 esModuleInterop

const fs = require("fs");
fs.readFileSync("./");

如何在TS中书写commonjs模块化代码

• 原始的module.exports和require写法

/*导出*/
module.exports = {
    sex:'男',
    eat:function(food){
        console.log("I'm eating " + food)
    }
}
/*导入*/
let obj = require("./myModule");

此种写法可以正常运行 但是TS无法检测到类型 不推荐

• 使用 export 和 import

/*导出*/
export = {
    sex:'男',
    eat:function(food){
        console.log("I'm eating " + food)
    }
}
/*导入*/
import obj = require("./myModule")

模块解析

• 模块解析：应该从什么位置寻找模块

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

classic: 经典

node: node 解析策略（唯一的变化是将js替换成ts）
https://www.cnblogs.com/winfred/p/8179815.html