政安晨【TypeScript高级用法】(四):模块与声明文件

TypeScript是一种静态类型的JavaScript超集语言,它支持模块化开发和声明文件。

模块化开发是一种将代码分割为独立的模块,每个模块只关注自己的功能,然后通过导入和导出来实现模块之间的交互和复用。在TypeScript中,可以使用import和export关键字来导入和导出模块。

导入模块的方式有两种命名空间导入和默认导入。

命名空间导入使用import * as语法,可以将整个模块作为一个命名空间引入,然后通过命名空间来访问导出的成员。默认导入使用import语法,可以将模块中的默认导出引入,然后通过自定义的名称来访问导出的成员。

导出模块的方式也有两种命名导出和默认导出。命名导出使用export关键字,可以将指定的成员导出,其他模块可以通过import语法来导入这些成员。默认导出使用export default关键字,可以将模块中的默认成员导出,其他模块可以通过import语法来导入默认成员。

声明文件是一种补充TypeScript编译器的类型信息的文件,用于描述JavaScript模块、类、方法等的类型。在TypeScript中,通常使用.d.ts文件扩展名的文件来编写声明文件。声明文件中可以定义变量、函数、类、模块等的类型,使其在使用时能够获得正确的类型推导和代码补全。

声明文件可以通过三种方式之一进行使用:全局声明、局部声明和模块声明。

全局声明是将声明文件直接引入到项目中,可以在整个项目中使用声明文件中的类型定义。

局部声明是将声明文件与具体的代码文件进行关联,只在该代码文件中使用声明文件中的类型定义。

模块声明是将声明文件与某个模块进行关联,只在该模块中使用声明文件中的类型定义。

总之,TypeScript的模块化开发和声明文件是提高开发效率和代码可维护性的重要工具。模块化开发可以帮助我们将复杂的代码分割为独立的模块,提升代码的可复用性和可测试性;声明文件可以提供类型信息,使得编码过程更加快速和安全。


TypeScript 模块

TypeScript 模块的设计理念是可以更换的组织代码。

模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。

两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

模块使用模块加载器去导入其它的模块。 在运行时,模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。此外还有有 SystemJs 和 Webpack。

模块导出使用关键字 export 关键字,语法格式如下:

// 文件名 : SomeInterface.ts 
export interface SomeInterface 
{ // 代码部分
}

要在另外一个文件使用该模块就需要使用 import 关键字来导入:

import someInterfaceRef = require("./SomeInterface");

实例

/// <reference path = "IShape.ts" /> 
export interface IShape { draw(); 
}
import shape = require("./IShape"); 
export class Circle implements shape.IShape { public draw() { console.log("Cirlce is drawn (external module)"); } 
}
import shape = require("./IShape"); 
export class Triangle implements shape.IShape { public draw() { console.log("Triangle is drawn (external module)"); } 
}
import shape = require("./IShape"); 
import circle = require("./Circle"); 
import triangle = require("./Triangle");  function drawAllShapes(shapeToDraw: shape.IShape) {shapeToDraw.draw(); 
} drawAllShapes(new circle.Circle()); 
drawAllShapes(new triangle.Triangle());

TypeScript 声明文件

TypeScript 作为 JavaScript 的超集,在开发过程中不可避免要引用其他第三方的 JavaScript 的库。

虽然通过直接引用可以调用库的类和方法,但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题,需要将这些库里的函数和方法体去掉后只保留导出类型声明,而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件,就可以借用 TypeScript 的各种特性来使用库文件了。

假如我们想使用第三方库,比如 jQuery,我们通常这样获取一个 id 是 foo 的元素:

$('#foo');
// 或
jQuery('#foo');

但是在 TypeScript 中,我们并不知道 $ 或 jQuery 是什么东西:

jQuery('#foo');// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.

declare 定义的类型只会用于编译时的检查,编译结果中会被删除。

上例的编译结果是:

jQuery('#foo');

声明文件

声明文件以 .d.ts 为后缀,例如:

zachen.d.ts

声明文件或模块的语法格式如下:

declare module Module_Name {
}

TypeScript 引入声明文件语法格式:

/// <reference path = " zachen.d.ts" />

当然,很多流行的第三方库的声明文件不需要我们定义了,比如 jQuery 已经有人帮我们定义好了:jQuery in DefinitelyTypedicon-default.png?t=N7T8https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jquery/index.d.ts

实例

以下定义一个第三方库来演示:

var Zachen;  
(function(Zachen) {var Calc = (function () { function Calc() { } })Calc.prototype.doSum = function (limit) {var sum = 0; for (var i = 0; i <= limit; i++) { sum = sum + i; }return sum; }Zachen.Calc = Calc; return Calc; 
})(Zachen|| (Zachen= {})); 
var test = new Zachen.Calc();

如果我们想在 TypeScript 中引用上面的代码,则需要设置声明文件 Calc.d.ts,代码如下:

declare module Zachen { export class Calc { doSum(limit:number) : number; }
}

声明文件不包含实现,它只是类型声明,把声明文件加入到 TypeScript 中:

/// <reference path = "Calc.d.ts" /> 
var obj = new Zachen.Calc(); 
// obj.doSum("Hello"); // 编译错误
console.log(obj.doSum(10));

下面这行导致编译错误,因为我们需要传入数字参数:

obj.doSum("Hello");

使用 tsc 命令来编译以上代码文件:

tsc CalcTest.ts

生成的 JavaScript 代码如下:

/// <reference path = "Calc.d.ts" /> 
var obj = new Zachen.Calc();
//obj.doSum("Hello"); // 编译错误
console.log(obj.doSum(10));

最后我们编写一个 zachen.html 文件,引入 CalcTest.js 文件及第三方库 CalcThirdPartyJsLib.js:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zachen(zachen)</title>
<script src = "CalcThirdPartyJsLib.js"></script> 
<script src = "CalcTest.js"></script> 
</head>
<body><h1>声明文件测试</h1><p>测试一下。</p>
</body>
</html>

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

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

相关文章

短视频矩阵系统--抖去推---年后技术还能迭代更新开发运营吗?

短视频矩阵系统#短视频矩阵系统已经开发3年&#xff0c;年后这个市场还能继续搞吗&#xff1f;目前市面上开发短视频账号矩阵系统的源头公司已经不多了吧&#xff0c;或者说都已经被市场被官方平台的政策影响的不做了吧&#xff0c;做了3年多的矩阵系统开发到现在真的是心里没有…

Android 14后台服务永久保活的技术方法

Android 14后台服务永久保活的技术方法 在本篇博客中&#xff0c;我们将探讨如何创建一个在Android系统中不会被杀死的后台服务。 第一步&#xff1a;创建一个后台服务。 在这一步中&#xff0c;我们需要创建一个后台服务的代码。 第二步&#xff1a;在AndroidManifest.xml中…

【从Python基础到深度学习】10. Python深层拷贝 和 浅层拷贝

对于浅层拷贝而言 不会发生拷贝的数据类型有&#xff1a;number、str、tuple 会发生拷贝的数据类型有&#xff1a;list、dict、set 对于不可变的数据类型&#xff0c;浅层拷贝时&#xff0c;不会发生拷贝&#xff0c;只是引用关系 对于可变数据类型&#…

CSS极速入门

CSS介绍 什么是CSS? CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式. CSS能够对网页中元素位置的排版进行像素级的精确控制,实现美化页面的效果.能够做到页面的样式和结构分离. CSS可以理解为"东方四大邪术"的化妆术. 对页面展示进行化妆. 基本语法规…

[BUG]vscode插件live server无法自动打开浏览器

问题描述&#xff1a; 点了open with live server但是浏览器没有自动跳出来 http://127.0.0.1:5500/里面是有东西的 解决方法&#xff1a; 配置环境变量&#xff0c;在path中添加program files

SAR ADC学习笔记(3)

一、SAR ADC采样电路 1.采样网络的时域响应&#xff1a;采保信号 2.采样网络的KT/C噪声 3.采样抖动 采样开关的种类 1.单MOS管开关 2.传输门开关 3.栅极自举&#xff08;Bootstrap&#xff09;开关 结论&#xff1a;M4的衬底需要和B点短接&#xff0c;保证B点能够到达高压&…

Doris——纵腾集团流批一体数仓架构

目录 前言 一、早期架构 二、架构选型 三、新数据架构 3.1 数据中台 3.2 数仓建模 3.3 数据导入 四、实践经验 4.1 准备阶段 4.2 验证阶段 4.3 压测阶段 4.4 上线阶段 4.5 宣导阶段 4.6 运行阶段 4.6.1 Tablet规范问题 4.6.2 集群读写优化 五、总结收益 六…

【Vue】VueX仓库

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Vue ⛺️稳中求进&#xff0c;晒太阳 目录 Vue概述 是什么 场景&#xff1a; 优势 构建多组件共享环境 创建一个空仓库 核心概念 - state 状态 1. 提供数据 2.使用数据 ​编辑 …

结合大象机器人六轴协作机械臂myCobot 280 ,解决特定的自动化任务和挑战!(上)

项目简介 本项目致力于探索和实现一种高度集成的机器人系统&#xff0c;旨在通过结合现代机器人操作系统&#xff08;ROS&#xff09;和先进的硬件组件&#xff0c;解决特定的自动化任务和挑战。一部分是基于Jetson Orin主板的LIMO PPRO SLAM雷达小车&#xff0c;它具备自主导航…

ELF 1技术贴|在NXP源码基础上适配开发板的按键功能

本次源代码适配是在NXP i.MX6ULL EVK评估板的Linux内核源代码&#xff08;特定版本号为Linux-imx_4.1.15&#xff09;的基础中展开的。 首要任务集中在对功能接口引脚配置的精细调整&#xff0c;确保其能无缝匹配至ELF 1开发板。接下来&#xff0c;我们将详细阐述适配过程中关…

MapReduce内存参数自动推断

MapReduce内存参数自动推断。在Hadoop 2.0中&#xff0c;为MapReduce作业设置内存参数非常繁琐&#xff0c;涉及到两个参数&#xff1a;mapreduce.{map,reduce}.memory.mb和mapreduce.{map,reduce}.java.opts&#xff0c;一旦设置不合理&#xff0c;则会使得内存资源浪费严重&a…

KingbaseES-V8R3下载安装及基础配置以及创建用户数据库

KingbaseES-V8-R3安装 1 下载准备安装包 下载地址&#xff1a;https://gitlab.cn/renfei/KingbaseES-V8-R3 准备好安装包及license.dat文件上传至服务器 2 挂载安装包 安装包为iso文件&#xff0c;需要挂载到目录 mount KingbaseES_V008R003C002B0340_Lin64_install.iso /…

Day 6.有名信号量(信号灯)、网络的相关概念和发端

有名信号量 1.创建&#xff1a; semget int semget(key_t key, int nsems, int semflg); 功能&#xff1a;创建一组信号量 参数&#xff1a;key&#xff1a;IPC对像的名字 nsems&#xff1a;信号量的数量 semflg&#xff1a;IPC_CREAT 返回值&#xff1a;成功返回信号量ID…

5G智能制造热力工厂数字孪生可视化平台,推进热力行业数字化转型

5G智能制造热力工厂数字孪生可视化平台&#xff0c;推进热力行业数字化转型。在当今这个信息化、数字化的时代&#xff0c;热力生产行业也迎来了转型的关键时刻。为了提升生产效率、降低成本、提高产品质量&#xff0c;越来越多的热力生产企业开始探索数字化转型之路。而5G智能…

SAP 工单CO02删除标记设置增强

需求&#xff1a;工单打上删除标记时检查&#xff0c;满足才能打上删除标记 位置&#xff1a;PPCO0002 -> EXIT_SAPLCORO_001 -》INCLUDE ZXCO1U02.中 如果没有&#xff0c;就新建 然后写下代码测试&#xff1a; MESSAGE test TYPE I. 然后就可以写下自己要的检查了&…

three.js如何实现简易3D机房?(一)基础准备-下

接上一篇&#xff1a; three.js如何实现简易3D机房&#xff1f;&#xff08;一&#xff09;基础准备-上&#xff1a;http://t.csdnimg.cn/MCrFZ 目录 四、按需引入 五、导入模型 四、按需引入 index.vue文件中 <template><div class"three-area">&l…

基于springboot+vue实现会议室预约系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现会议室预约系统演示 摘要 一个企业的发展离不开相关的规定流程。信息化到来的今天在我们的生活当中。离不开各种信息化的支持。比如钉钉会议预约、美团买菜、扫码签到等各种信息化软件。他们涉及我们生活中的方方面面给我们的生活提供了更大的便利性。大到政…

css网格布局简单介绍

前端网格布局是一种用于在网页上创建复杂网格系统的布局技术。它允许开发者通过简单的语法来定义和控制元素的排列方式&#xff0c;使得页面布局更加灵活和可预测。在CSS中&#xff0c;网格布局可以通过display: grid属性来实现。 特点 1. **灵活性**&#xff1a;网格布…

微信小程序开发系列(十一)·小程序页面的跳转设置以及参数传递

目录 1. 跳转到商品列表 1.1 url: 当前小程序内的跳转链接 1.2 navigate&#xff1a;保留当前页面&#xff0c;跳转到应用内的某个页面。但是不能跳到 tabbar 页面 1.3 redirect&#xff1a; 关闭当前页面&#xff0c;跳转到应用内的某个页面。但不能跳转到 tabbar 页面…

在 Flutter 中使用 flutter_gen 简化图像资产管理

你是否厌倦了在 Flutter 项目中手动管理图像资产的繁琐任务&#xff1f; 告别手工输入资源路径的痛苦&#xff0c;欢迎使用“Flutter Gen”高效资源管理的时代。在本文中&#xff0c;我将带您从手动处理图像资源的挫折到动态生成它们的便利。 选择1&#xff1a;痛苦手动添加–…