政安晨【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.hqwc.cn/news/513853.html

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

相关文章

设置video的进度条常显

根据网上的方法&#xff0c;把隐藏的元素显示 在chrome中F12或者通过其他方式打开开发者工具&#xff08;相信应该知道从哪里打开&#xff09;&#xff0c;然后点击右上的齿轮&#xff0c;进入设置&#xff0c;勾选Show user agent shadow DOM 就能在elements里面查看视频的播…

【Leetcode】1588.所有奇数长度子数组的和

题目描述 思路 题目要求我们求解所有奇数长度数组的和。若暴力循环求解&#xff0c;时间复杂度过高。所以&#xff0c;我们可以采用前缀和优化。 如上图输入arr数组&#xff0c;sum[i]用于计算arr数组中前i个数的和。(在程序中&#xff0c;先给sum[0]赋值&#xff0c;等于arr[0…

libigl 极小曲面(全局优化)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 二、实现代码 #include <igl/colon.h> #include <igl/harmonic.h>

第三百八十三回

文章目录 1. 概念介绍2 使用方法3 示例代码 我们在上一章回中介绍了ModalBarrier组件相关的内容&#xff0c;本章回中将介绍Visibility组件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回中介绍的Visibility组件是一种容器类组件&#xff0c;主要…

使用 llama.cpp 在本地部署 AI 大模型的一次尝试

对于刚刚落下帷幕的2023年,人们曾经给予其高度评价——AIGC元年。随着 ChatGPT 的火爆出圈,大语言模型、AI 生成内容、多模态、提示词、量化…等等名词开始相继频频出现在人们的视野当中,而在这场足以引发第四次工业革命的技术浪潮里,人们对于人工智能的态度,正从一开始的…

【Flutter 】get-cli init报错处理

报错内容 get init 命令跳出,报错内如下 Select which type of project you want to creat Synchronous waiting using dart:cli waitFor Unhandled exceotion . Dart WaitforEvent is deprecated and disabled by default. This feature will be fully removed in Dart 3.4 …

seata服务器集群搭建

搭建seata-server-1.3服务器对应SpringBoot2.3.12&#xff0c;springcloud2.2.3 <spring-cloud-alibaba.version>2.2.3.RELEASE</spring-cloud-alibaba.version> 首先你安装了nacos 1解压文件 2修改cong/file.conf 让seata集群信息可以共享&#xff0c;我们应该…

Vue.js+SpringBoot开发高校学院网站

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 学院院系模块2.2 竞赛报名模块2.3 教育教学模块2.4 招生就业模块2.5 实时信息模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 学院院系表3.2.2 竞赛报名表3.2.3 教育教学表3.2.4 招生就业表3.2.5 实时信息表 四、系…

JAVA中YML:几个用法

项目有一些配置文件&#xff0c;ini、prop类型的配置文件都考虑过后&#xff0c;还是选择yml文件&#xff0c;如上图&#xff1a;xxconfig.yml。 要求&#xff1a; 1、允许实施人员手动配置 2、配置文件要能轻便的转化为一个JAVA对象 3、程序启动后&#xff0c;打印这些配置项&…

teknoparrot命令行启动游戏

官方github cd 到teknoparrot解压目录 cd /d E:\mn\TeknoParrot2_cp1\GameProfiles启动游戏 TeknoParrotUi.exe --profile游戏配置文件游戏配置文件位置/UserProfiles,如果UserProfiles文件夹里没有那就在/GameProfiles,在配置文件里将游戏路径加入之间,或者打开模拟器设置 …

空间直角坐标系、大地坐标系、平面坐标系介绍

空间直角坐标系、大地坐标系、平面坐标系 2017-04-11 13:53 ( 一)空间直角坐标系 空间直角坐标系的坐标原点位于参考椭球的中心,Z轴指向参考椭球的北极,X轴指向起始子午面与赤道的交点,Y轴位于赤道面上切按右手系于X轴呈90度夹角,某点中的坐标可用该点在此坐标系的各…

redis02 安装

官网下载 传送门https://redis.io/download/#redis-downloads 安装Redis mac m1安装 下载你需要版本的软件包放到指定的目录下进行解压 cd 到解压好的redis目录 运行下面的命令进行编译测试 sudo make test 中途可能会提示你安装make工具&#xff0c;按提示安装即可&…