文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何在TypeScript使用模块化以及注意事项详解

2022-11-13 18:25

关注

前言

随着我们的代码越来越庞大,我们需要拆分模块组合, 便于后续的维护

除了commonJS, es6. ts也是支持模块化的!?️

如何在TS中写es6模块化语句

自从发布ES6(ES2015)之后, ts就采用了es6的模块化标准-导出和导入模块?

导出:

myModule.ts
    export const name: number = 123
    export const getUser = (user: string): void => {
      console.log(user)
    }

导入:

index.ts
    import { name, getUser } from "./myModule";
    getUser(name)

没有引入直接使用变量, 波浪线智能提示从哪里引入

直接书写变量,enter直接带出引入

?虽智能, 但还是要注意几点

注意事项详细
获取智能提示有条件但是要注意的是: 这个提示只适用于export, 不适用于export default。因为export有固定的变量名,而export default导出没有名字和引入时随意起名字, TS不会去猜测
import引入的文件名import引入的文件名不能带上.ts, 因为会参与编译的过程, 编译后的结果为js,找不到ts这个文件

如何在TS中写commonjs模块化语句

按我们之前的写法,是这样子写的

// 导出
module.exports = {
    sum (a: number, b: numnber) {
        return a + b
    }
}

//引入
const mymodule = require('./xxx')

此时会发现mymodule的类型为any,没有类型检查了

// 导出
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('./');

?此时会发现一些问题

编译后的fs没有default属性, 所以报错了

为什么会报错呢

 import fs from "fs";

fs不是标准esmodule标准导出 因为fs默认使用module.exports={}的形式导出, import直接引入, 编译结果会带上default, fs中没有default属性

解决方案

ts文件中:

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

编译结果:

    exports.__esModule = true;
    var fs_1 = require("fs");
    (0, fs_1.readFileSync)('./');

ts文件中:

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

编译结果:

    exports.__esModule = true;
    var fs = require("fs");
    fs.readFileSync('./');
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('./');

补充:TypeScript命名空间

TypeScript有自己的模块格式,称为 命名空间(namespaces) ,这比ES模块标准要早

这种语法对于创建复杂的定义文件有很多有用的功能,并且在DefinitelyTyped中仍然被积极使用。虽然没有被废弃,但命名空间中的大部分功能都存在于ES Modules中,官方建议使用它来与JavaScript的方向保持一致

总结

到此这篇关于如何在TypeScript使用模块化以及注意事项的文章就介绍到这了,更多相关TypeScript使用模块化内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯