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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/422905.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024全国水科技大会暨减污降碳协同增效创新与实践论坛(八)

召集人:王洪臣 中国人民大学环境学院教授 姚 宏 北京交通大学教授 为大会征集“绿色低碳污水厂案例”,欢迎各相关单位积极报名! 一、会议背景 生态环境部、国家发展和改革委员会等七部门印发《减 污降碳协同增效实施方案》中明确提出推进水…

springboot+vue+mysql项目使用的常用注解

实体类常用注解 Data Data 是一个 Lombok 提供的注解&#xff0c;使用 Data 注解可以简化代码&#xff0c;使代码更加简洁易读。 作用&#xff1a;自动为类生成常用的方法&#xff0c;包括 getter、setter、equals、hashCode 和 toString 等需要加Lombok的依赖 <depende…

php连接hdfs初步探索

一、phdfs拓展 结果&#xff1a;暂时舍弃 安装此拓展时&#xff0c;无法make成功&#xff0c;因为缺少hdfs.n文件。 换了其他版本的拓展包&#xff0c;并编译都没有找到此文件。 后搜到官网的相关资料&#xff0c;此hdfs.h的文件路径的地址是$HADOOP_HDFS_HOME/include/hdfs…

探索数据宇宙:深入解析大数据分析与管理技术

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…

springboot基于保信息学科平台系统设计与实现论文

基于保密信息学科平台系统 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了基于保密信息学科平台系统的开发全过程。通过分析基于保密信息学科平台系统管理的不足&#xff0c;创建了一个计算机管理基于保密信息…

使用 Azure 部署静态网页

Author&#xff1a;AXYZdong 硕士在读 工科男 有一点思考&#xff0c;有一点想法&#xff0c;有一点理性&#xff01; 定个小小目标&#xff0c;努力成为习惯&#xff01;在最美的年华遇见更好的自己&#xff01; CSDNAXYZdong&#xff0c;CSDN首发&#xff0c;AXYZdong原创 唯…

配置MySQL与登录模块

使用技术 MySQL&#xff0c;Mybatis-plus&#xff0c;spring-security&#xff0c;jwt验证&#xff0c;vue 1. 配置Mysql 1.1 下载 MySQL :: Download MySQL Installer 1.2 安装 其他页面全选默认即可 1.3 配置环境变量 将C:\Program Files\MySQL\MySQL Server 8.0\bin…

日志到filebeat-->logstash-->elastic-->kibana

1、日志到filebeat。 cat /etc/filebeat/filebeat.yml filebeat.inputs: - type: syslog format: rfc3164 protocol.udp: host: "0.0.0.0:514" output.logstash: hosts: ["localhost:5044"] 验证方式: tcpdump -i 网卡名称 udp port 514 2、…

three.js 点乘判断平行向量方向异同

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs"></div><div>判断的前提是两个向量平行<el-button click"judge"…

基于zemax的激光合束过程分析

系统里的透镜包括FAC/SAC及球面聚焦镜都是采用市面上标准的透镜&#xff0c;在典型的光纤耦合14针蝶形封装中&#xff0c;最多需要三个独立的透镜才能提供有效且稳定的耦合。大多数高端激光二极管使用两个交叉的柱面方形微透镜来补偿激光二极管快轴和慢轴的发散角之间的差异。第…

顶易海关数据怎么做获客?功能详解看这里!

顶易海关数据怎么做获客呢&#xff1f;详解看这里&#xff01; 海关数据系统登录&#xff1a;hg.smtso.com/?iEF6DCB 如果对开发国外优质客户感兴趣的话&#xff0c;关注Felicia外贸说&#xff0c;一键开发客户不是问题。 海关数据主要功能&#xff1a; 报关单详情查询&#…

【监督学习之支持向量机(SVM)】

曾梦想执剑走天涯&#xff0c;我是程序猿【AK】 目录 简述概要知识图谱基本原理支持向量线性SVM与非线性SVM优化问题软间隔与正则化SVM的应用实现 简述概要 了解监督学习-支持向量机&#xff08;SVM&#xff09; 知识图谱 支持向量机&#xff08;Support Vector Machine&…

【前端素材】推荐优质后台管理系统网页Star admin平台模板(附源码)

一、需求分析 1、系统定义 后台管理系统是一种用于管理和控制网站、应用程序或系统的管理界面。它通常被设计用来让网站或应用程序的管理员或运营人员管理内容、用户、数据以及其他相关功能。后台管理系统是一种用于管理网站、应用程序或系统的工具&#xff0c;通常由管理员使…

灯塔:CSS笔记

CSS&#xff1a;层叠样式表 所谓层叠 即叠加的意思&#xff0c;表示样式可以一层一层的层叠覆盖 css写在style标签中&#xff0c;style标签一般写在head标签里面&#xff0c;title标签下面 <!DOCTYPE html> <html lang"en"> <head><meta cha…

uniapp的h5端在线预览文件

步骤如下&#xff1a; 1、下载需要准备的工具文件包 2、将其解压到/static/pdf文件夹下,如图&#xff1a; 3、创建在线查看文件的页面&#xff1a; <template><view><web-view :src"path"></web-view></view> </template>&l…

程序员是如何看待“祖传代码”的?

目录 ​编辑 程序员是如何看待“祖传代码”的&#xff1f; 一、什么是“祖传代码”&#xff1f; 二、“祖传代码”的利弊 1. 可以节省开发成本 2. 可能引入安全隐患 3. 可能增加系统的维护难度 三、祖传代对程序员的影响 1. 丰富程序员的技能和知识 2. 提高程序员的创…

腾讯云学生云服务器_学生云主机_学生云数据库_云+校园特惠套餐

2024年腾讯云学生服务器优惠活动「云校园」&#xff0c;学生服务器优惠价格&#xff1a;轻量应用服务器2核2G学生价30元3个月、58元6个月、112元一年&#xff0c;轻量应用服务器4核8G配置191.1元3个月、352.8元6个月、646.8元一年&#xff0c;CVM云服务器2核4G配置842.4元一年&…

靶机渗透之My File Server: 1

Name: My File Server: 1Date release: 21 Feb 2020Author: Akanksha Sachin VermaSeries: My File ServerDownload: https://drive.google.com/uc?id1w0grAomPuFaIohBcUwDiI3QIi4fj4kje&exportdownload 对于vulnhub中的靶机&#xff0c;我们都需先下载镜像&#xff0c;然…

java的JDK选择和在win11的安装与配置

一.背景 还是公司安排的师带徒的任务。自己也回头看看。 二.JDK的选择 开发的版本java1.8。所以准备使用JDK8。 1.JDK有谁在给我们提供呢&#xff1f; 我以前知道的是sun、RedHat、Oracle、IBM。 我以前一般都是去sun的网站下载&#xff0c;后来被Oracle收购后去的Oracle…