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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Keil新版本安装编译器ARMCompiler 5.06

0x00 缘起 我手头的项目在使用最新版本的编译器后,烧录后无法正常运行,故安装5.06,测试后发现程序运行正常,以下为编译器的安装步骤。 0x01 解决方法 1. 下载编译器安装文件,可以去ARM官网下载,也可以使用我…

蓝桥杯练习系统(算法训练)ALGO-993 RP大冒险

资源限制 内存限制:64.0MB C/C时间限制:200ms Java时间限制:600ms Python时间限制:1.0s 问题描述 请尽情使用各种各样的函数来测试你的RP吧~~~ 输入格式 一个数N表示测点编号。 输出格式 一个0~9的数。 样例输入 0 样…

【airtest】自动化入门教程(三)Poco操作

目录 一、准备工作 1、创建一个pthon脚本 2、光标位置 2、选择Android 3、选择yes 二、定位元素 三、poco基于设备/屏幕 方式 1、poco.click( (x,y))基于屏幕点击相对坐标为x,y的位置 2、poco.get_screen_size() 3、poco.swipe(v1,v2)基于屏幕从v1位置滑到…

02.刚性事务

刚性事务 1.DTP模型 X/Open组织介绍 X/OPEN是一个组织(现在的open group)X/Open国际联盟有限公司是一个欧洲基金会,它的建立是为了向UNIX环境提供标准。它主要的目标是促进对UNIX语言、接口、网络和应用的开放式系统协议的制定。它还促进在…

初识C语言—常见关键字

变量的命名最好有意义 名字必须是字母&#xff0c;数字&#xff0c;下划线组成&#xff0c;不能有特殊字符&#xff0c;同时不能以数字开头 变量名不能是关键字 typedef---类型定义&#xff0c;类型重命名 #include <stdio.h>typedef unsigned int uint; //将unsigne…

ubuntu20.04设置docker容器开机自启动

ubuntu20.04设置docker容器开机自启动 1 docker自动启动2 容器设置自动启动3 容器自启动失败处理 1 docker自动启动 &#xff08;1&#xff09;查看已启动的服务 $ sudo systemctl list-units --typeservice此命令会列出所有当前加载的服务单元。默认情况下&#xff0c;此命令…

Python自动化测试基础必备知识点总结

一、自动化测试的概念 性能系统负载能力稳定性过载操作下的系统瓶颈自动化测试&#xff0c;使用程序代替人工&#xff0c;可以提高测试效率性&#xff0c;自动化测试能自动化使用代码模拟大量用户&#xff0c;让用户请求多页和多用户并发请求收集参数&#xff0c;并对系统负载…

设计模式七:责任链模式

文章目录 1、责任链模式2、spring中的责任链模式Spring InterceptorServlet FilterNetty 1、责任链模式 责任链模式为请求创建了一个接收者对象的链&#xff0c;在这种模式下&#xff0c;通常每个节点都包含对另一个节点者的引用。每个节点针对请求&#xff0c;处理自己感兴趣…

openGauss学习笔记-233 openGauss性能调优-系统调优-资源负载管理-资源管理准备-启动资源负载管理功能

文章目录 openGauss学习笔记-233 openGauss性能调优-系统调优-资源负载管理-资源管理准备-启动资源负载管理功能233.1 背景信息233.2 前提条件233.3 操作步骤 openGauss学习笔记-233 openGauss性能调优-系统调优-资源负载管理-资源管理准备-启动资源负载管理功能 233.1 背景信…

轻松解决电脑卡顿,CleanMyMac X2024让你的Mac电脑重回巅峰性能!

在当今这个信息爆炸的时代&#xff0c;我们的电脑往往会因为安装了过多的软件、积累了太多的垃圾文件以及运行缓慢而变得卡顿、不流畅。然而&#xff0c;CleanMyMac X2024的出现&#xff0c;将为你解决这些问题&#xff0c;让你的电脑重获新生&#xff01; CleanMyMac X2024全新…

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

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

前端导出word文件的多种方式、前端导出excel文件

文章目录 纯前借助word模板端导出word文件 &#xff08;推荐&#xff09;使用模板导出 前端通过模板字符串导出word文件前端导出 excel文件&#xff0c;node-xlsx导出文件&#xff0c;行列合并 纯前借助word模板端导出word文件 &#xff08;推荐&#xff09; 先看效果&#xf…

nginx如何配置命令启动

我安装好nginx后&#xff0c;发现不能使用systemctl start nginx或者systemctl stop nginx来控制启停 解决方法如下 首先要建一个nginx.pid的文件 一般是建在 /var/run/这个路径下面 sudo touch /var/run/nginx.pid 添加权限 sudo chmod 644 /var/run/nginx.pid可以进入到…

数据结构-----反射

文章目录 反射1.定义2 用途(了解)3 反射基本信息4 反射相关的类&#xff08;重要&#xff09;4.1 Class类(反射机制的起源 )4.1.1 Class类中的相关方法(方法的使用方法在后边的示例当中) 4.2 反射示例4.2.1 获得Class对象的三种方式4.2.2 反射的使用 5、反射优点和缺点6 重点总…

双周回顾#005 - 零

一件悲伤的事实&#xff0c;这两周&#xff0c;成长值为零&#xff5e;&#xff5e; 从大数据部门临时抽调到互联网部门&#xff0c;支援重构的“配置下单”项目。 一个变种的低代码架构设计&#xff0c;唯一比较有意思的是它的业务组件的设计与校验设计&#xff0c;算是学习…

怎么把人物从图中抠出?分享几种好用的抠图方法

在日常生活中&#xff0c;我们时常需要将人物从繁杂的背景中优雅地提取出来&#xff0c;无论是为了制作一张精美的证件照&#xff0c;还是为了设计一幅引人注目的海报或宣传画。然而&#xff0c;对于许多非专业人士来说&#xff0c;这仿佛是一场与细节的捉迷藏游戏&#xff0c;…

数据结构从入门到精通——顺序表

顺序表 前言一、线性表二、顺序表2.1概念及结构2.2 接口实现2.3 数组相关面试题2.4 顺序表的问题及思考 三、顺序表具体实现代码顺序表的初始化顺序表的销毁顺序表的打印顺序表的增容顺序表的头部/尾部插入顺序表的头部/尾部删除指定位置之前插入数据和删除指定位置数据顺序表元…

Linux如何查看端口是否占用

在Linux中&#xff0c;有多种方法可以用来检查端口是否被占用。以下是一些常用的命令&#xff1a; netstat&#xff1a;这是一个非常通用的命令&#xff0c;可以用来查看所有端口的使用情况。如果你想查找特定的端口是否被占用&#xff0c;可以使用netstat命令配合grep。例如&…

【MySQL】DQL

DQL&#xff08;数据查询语言&#xff09;用于在MySQL数据库中执行数据查询操作。它主要包括SELECT语句&#xff0c;用于从表中检索数据。 0. 基本语法 SELECT 字段列表 FROM 表名列表 WHERE 条件列表 GROUP BY 分组字段列表 HAVING 分组后条件列表 ORDER BY 排序字段列表 …

【市工信】2024年青岛市绿色工厂、绿色工业园区等绿色制造示范申报

科大睿智小编从青岛市工信局了解到&#xff0c;为深入贯彻绿色发展理念&#xff0c;牢固树立绿色低碳发展导向&#xff0c;进一步完善绿色制造体系&#xff0c;培育绿色制造先进典型&#xff0c;根据《工业和信息化部关于印发<绿色工厂梯度培育及管理暂行办法>的通知》&a…