当前位置: 首页 > news >正文

TypeScript08:在TS中使用模块化

前言:tsconfig.json中的配置

一、前端领域中的模块化标准

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

二、 TS中如何书写模块化语句

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

myModule.ts :

export const name = "kevin";export function sum(a: number, b: number) { return a + b;
}

index.ts :

import { sum, name } from "./myModule";console.log(sum(1, 2)); // 3
console.log(name); // kevin

注意:在导入模块时不要加后缀名。因为后缀名会编译到结果中,编译结果找不到 .ts 文件会报错。

三、编译结果中的模块化

1.在 tsconfig.json 中配置 module 参数为 es6 时:

结果:没有区别。 

2.在 tsconfig.json 中配置 module 参数为 commonjs 时: 

结果:导出的声明会变成 exports 的属性,默认的导出会变成 exports default 属性。导入时,会将整个对象拿到取属性值。

 "ues strict" js 中的严格模式,由于 ts 已经足够严格,因此可以通过配置 "noImplicitUseStrict": true 移除编译结果中的严格模式 "ues strict"

由于选项 "noImplicitUseStrict" 已弃用,将停止在 TypeScript 5.5 中运行。因此需要配置 "ignoreDeprecations": "5.0" 来忽略警告,5.0表示忽略5.0版本的警告。

四、解决默认导入的错误

当导入 nodejs 的模块时,由于模块不是基于 ts 开发的,导出使用的是 module.export = {} ,所以会报错模块没有默认导出。

解决方法1:不使用默认导入,改为具名导入。

解决方法2:导入所有声明

解决方法3: tsconfig.json 中配置 "esModuleInterop": true ,启用 es 的模块化标准交互非 es 模块导出。

编译结果中生成一个辅助函数,导入默认模块。判断模块导出方式是否为 es 导出,如果不是,为模块增加一个 default 属性。

 tsconfig.json 中的其他配置: "noEmitOnError": true, // 配置编译失败是否生成编译结果

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

不建议使用。 

 1.方法一:使用这种方式获取不到类型检查

 2.方法二:这里可以获取到类型检查

3. 方法三:方法二中使用 require 

六、模块解析

模块解析:应该从什么位置寻找模块。 

 TS 中,有两种模块解析策略:

  1. classic:经典
  2. node node 解析策略(唯一的变化是将 js 替换为 ts

 node 解析策略:

  • 相对路径:require("./xxx")
  • 非相对路径:require("xxx") 

 在 tsconfig.json 中配置 "moduleResolution": "node" 来配置模块化标准的解析方式为 node

相关文章:

  • AGI概念与实现
  • 【接口测试】常见HTTP面试题
  • esp32 C3和S3 开发板电流对比
  • Docker基础教程 - 1 Docker简介
  • C++_运算符_逻辑运算符
  • Java面试——Redis
  • 基于51单片机的超声波测距及温度补偿技术研究
  • 【PyTorch笔记 04】F.cross_entropy的使用
  • ubuntu2204部署hbase2.3.7
  • C语言内存优化实用指南
  • java 基础(核心知识搭配代码)
  • TikTok矩阵系统的功能展示:深入解析与源代码分享!
  • “智农”-高标准农田
  • 手撸AI-2: 设置脚本参数与设置随机种子
  • Java实战:Spring Boot实现无感刷新Token机制
  • 2017 年终总结 —— 在路上
  • 30秒的PHP代码片段(1)数组 - Array
  • golang中接口赋值与方法集
  • Mithril.js 入门介绍
  • MQ框架的比较
  • node 版本过低
  • Python3爬取英雄联盟英雄皮肤大图
  • python大佬养成计划----difflib模块
  • Spring技术内幕笔记(2):Spring MVC 与 Web
  • Storybook 5.0正式发布:有史以来变化最大的版本\n
  • vue2.0项目引入element-ui
  • Vue学习第二天
  • Zepto.js源码学习之二
  • 百度小程序遇到的问题
  • 基于Dubbo+ZooKeeper的分布式服务的实现
  • 让你的分享飞起来——极光推出社会化分享组件
  • 如何编写一个可升级的智能合约
  • 一个项目push到多个远程Git仓库
  • HanLP分词命名实体提取详解
  • ​LeetCode解法汇总2808. 使循环数组所有元素相等的最少秒数
  • ### Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLTr
  • #define MODIFY_REG(REG, CLEARMASK, SETMASK)
  • ${ }的特别功能
  • (02)vite环境变量配置
  • (11)工业界推荐系统-小红书推荐场景及内部实践【粗排三塔模型】
  • (3)选择元素——(14)接触DOM元素(Accessing DOM elements)
  • (C++17) std算法之执行策略 execution
  • (MonoGame从入门到放弃-1) MonoGame环境搭建
  • (vue)el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)
  • (六)Hibernate的二级缓存
  • **登录+JWT+异常处理+拦截器+ThreadLocal-开发思想与代码实现**
  • .Net 4.0并行库实用性演练
  • .NET 5种线程安全集合
  • .NET Core IdentityServer4实战-开篇介绍与规划
  • .Net Core和.Net Standard直观理解
  • .NET Standard 支持的 .NET Framework 和 .NET Core
  • .Net转Java自学之路—SpringMVC框架篇六(异常处理)
  • /usr/lib/mysql/plugin权限_给数据库增加密码策略遇到的权限问题
  • @JSONField或@JsonProperty注解使用
  • @Service注解让spring找到你的Service bean