【Typescript综合】模块化开发

简介: 【Typescript综合】模块化开发

模块化开发


模块化:每个文件可以是一个独立的模块,支持ES Module,也支持CommonJS


之前搭建过typescript的编译环境,我们现在直接在搭建好的编译环境下使用模块化开发。

搭建方式可以看搭建typescript编译环境


命名空间namespace


命名空间在TypeScript早期时,称之为内部模块,主要目的是将一个模块内部再进行作用域的划分,防止一些命名冲突的问题

命名空间内部的属性或者方法等,都需要export出去,不然外部都是无法使用的。一般开发不习惯的话可以选择不使用。

image.png

类型查找


我们在编写TS代码中,有时候引入第三方库不会报错,有时候又会报错,这个时候就是需要我们有类型声明(declare)

我们之前编写的typescript文件都是 .ts 文件,这些文件最终会输出 .js 文件,也是我们通常编写代码的地方; p 还有另外一种文件 .d.ts 文件,它是用来做类型的声明(declare)。 它仅仅用来做类型检测,告知typescript我们有哪些类型。


typescript会在哪里查找我们的类型声明呢?


  • 内置类型声明;
  • 外部定义类型声明;
  • 自己定义类型声明;


1. 内置声明


内置类型声明通常在我们安装typescript的环境中会带有的;

https://githu.com/microsoft/TypeScript/tree/main/lib

2. 外部定义类型声明


外部类型声明通常是我们使用一些库(比如第三方库)时,需要的一些类型声明下面介绍两种方式声明:

  • 方式一:在自己库中进行类型声明(编写.d.ts文件),比如axios
  • 方式二:通过社区的一个公有库DefinitelyTyped存放类型声明文件

该库的GitHub地址:https://github.com/DefinitelyTyped/DefinitelyTyped/

该库查找声明安装方式的地址:https://www.typescriptlang.org/dt/search?search=


3. 自定义声明


在第三方库是一个纯JavaScript的话,没有对应的声明文件,就需要我们自定义声明,自定义一个.d.ts文件。比如lodash

声明模块

微信图片_20221012165225.png

声明变量-函数-类

微信图片_20221012165233.png

声明文件

微信图片_20221012165257.png

声明命名空间

微信图片_20221012165315.png

相关文章
|
9天前
|
JavaScript 前端开发 IDE
深入理解TypeScript:提升JavaScript开发的利器
【10月更文挑战第8天】 深入理解TypeScript:提升JavaScript开发的利器
20 0
|
9天前
|
JavaScript 前端开发 安全
TypeScript的优势与实践:提升JavaScript开发效率
【10月更文挑战第8天】TypeScript的优势与实践:提升JavaScript开发效率
|
2天前
|
JavaScript 前端开发 测试技术
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
7 1
|
12天前
|
JavaScript 前端开发 IDE
利用TypeScript增强JavaScript开发
【10月更文挑战第5天】TypeScript作为JavaScript的超集,通过添加静态类型系统和对ES6+特性的支持,解决了大型项目中常见的类型错误和代码维护难题。本文介绍TypeScript的核心优势,包括静态类型检查、现代JS特性支持及更好的IDE支持,并探讨如何逐步将其集成到现有项目中,提升开发效率和代码质量。通过使用DefinitelyTyped库和装饰器等功能,开发者可以更轻松地编写可靠且可维护的代码。希望本文能帮助你更好地理解和应用TypeScript。
|
9天前
|
传感器 JavaScript 前端开发
深入理解TypeScript:提升JavaScript开发效率
【10月更文挑战第8天】深入理解TypeScript:提升JavaScript开发效率
14 0
|
5月前
|
JavaScript 前端开发 安全
开发业务需求有必要引入 TypeScript 吗?
随着前端技术的不断更新和发展,TypeScript作为一种静态类型的JavaScript超集语言,逐渐在业界崭露头角,尤其是在当今快速发展的软件开发环境中,选择适合的开发工具和技术变得至关重要。在项目规模和复杂性的增加的同时,保证代码质量、可读性和可维护性成为开发团队的重要任务。这样的背景下,引入TypeScript作为一种开发工具来弥补JavaScript的某些弱点,已经成为许多开发团队的选择。那么TypeScript是否值得在业务中引入?它是否会取代JavaScript?那么本文就来聊聊在业务开发过程中是否有必要引入TypeScript,并讨论一下对于现代前端框架发展的看法和期待。
132 0
开发业务需求有必要引入 TypeScript 吗?
|
4月前
|
JavaScript 安全 IDE
对于大型项目,TypeScript的优势有哪些?
【6月更文挑战第1天】对于大型项目,TypeScript的优势有哪些?
42 6
|
4月前
|
JavaScript 前端开发 安全
TypeScript的主要优势有哪些?
【6月更文挑战第1天】TypeScript的主要优势有哪些?
125 9
|
4月前
|
JavaScript 安全 开发者
Vue3 中更好地利用 TypeScript 的类型系统来提高代码质量
Vue3 中更好地利用 TypeScript 的类型系统来提高代码质量
03-TypeScript核心基础
03-TypeScript核心基础
43 0