随着我们的代码越来越庞大,我们需要拆分模块组合, 便于后续的维护
除了commonJS
, es6
. ts也是支持模块化的!
️
自从发布ES6(ES2015)之后, ts就采用了es6的模块化标准-导出和导入模块
导出:
myModule.tsexport const name: number = 123export const getUser = (user: string): void => {console.log(user)}
导入:
index.tsimport { name, getUser } from "./myModule";getUser(name)
虽智能, 但还是要注意几点
注意事项 | 详细 |
---|---|
获取智能提示有条件 | 但是要注意的是: 这个提示只适用于export , 不适用于export default 。因为export 有固定的变量名,而export default 导出没有名字和引入时随意起名字, TS 不会去猜测 |
import 引入的文件名 |
import 引入的文件名不能带上.ts , 因为会参与编译的过程, 编译后的结果为js,找不到ts这个文件 |
按我们之前的写法,是这样子写的
// 导出
module.exports = {sum (a: number, b: numnber) {return a + b}
}
//引入
const mymodule = require('./xxx')
此时会发现mymodule
的类型为any
,没有类型检查了
ts
中这样才能有完整的类型检查
, 并且和上述写法的编译结果一样
// 导出
exports = {sum (a: number, b: numnber) {return a + b}
}
//引入
import mymodule = require('./xxx')
会发现写法还是有差异的,
所以建议还是使用es6的标准会比较好,因为ta是后面的标准
先看一个例子,我们在代码里引入node中的fs模块
ts文件中:
import fs from "fs";fs.readFileSync('./')
编译结果:
// tsconfig.json中设置module: CommonJs, 结果如下exports.__esModule = true;var fs_1 = require("fs");fs_1["default"].readFileSync('./');
此时会发现一些问题
.readFileSync
编译后的fs没有default属性, 所以报错了
import fs from "fs";
fs不是标准esmodule标准导出 因为fs默认使用module.exports={}的形式导出, import直接引入, 编译结果会带上default, fs中没有default属性
default属性
ts文件中:
import { readFileSync } from "fs";readFileSync('./')
编译结果:
exports.__esModule = true;var fs_1 = require("fs");(0, fs_1.readFileSync)('./');
* as fs
全部导入, 将module.exports
内全部导入ts文件中:
import * as fs from "fs";fs.readFileSync('./')
编译结果:
exports.__esModule = true;var fs = require("fs");fs.readFileSync('./');
esModuleInterop
为true
, 让TS识别出是否导出esmudole标准形式,并作出相应的处理tsconfig.json
{"compilerOptions": { // 启用es模块化交互而非es模块导出"esModuleInterop": true}
}
ts文件中:
import fs from "fs";fs.readFileSync('./')
编译结果:
// 生成辅助函数__importDefault
// 此时如果不是属于esmodule形式导出, ts会默认添加default属性,值设置为本身var __importDefault = (this && this.__importDefault) || function (mod) {return (mod && mod.__esModule) ? mod : { "default": mod };};exports.__esModule = true;var fs_1 = __importDefault(require("fs"));fs_1["default"].readFileSync('./');
整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。
有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享
部分文档展示:
文章篇幅有限,后面的内容就不一一展示了
有需要的小伙伴,可以点下方卡片免费领取