政安晨【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>

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

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

相关文章

Day18:信息打点-小程序应用解包反编译动态调试抓包静态分析源码架构

目录 小程序获取-各大平台&关键字搜索 小程序体验-凡科建站&模版测试上线 小程序抓包-Proxifier&BurpSuite联动 小程序逆向-解包反编译&动态调试&架构 思维导图 章节知识点 Web&#xff1a;语言/CMS/中间件/数据库/系统/WAF等 系统&#xff1a;操作系…

第十五届蓝桥杯青少组STEMA测评SPIKE初级真题试卷 2024年1月

第十五届蓝桥杯青少组STEMA测评SPIKE初级真题试卷 2024年1月 ​​​​​​​ 来自&#xff1a;6547网 http://www.6547.cn/doc/vywur8eics

hive实战项目:旅游集市数仓建设

旅游集市数仓建设 文章目录 旅游集市数仓建设为什么要设计数据分层&#xff1f;分层设计ODS&#xff08;Operational Data Store&#xff09;&#xff1a;数据运营层DW&#xff08;Data Warehouse&#xff09;&#xff1a;数据仓库层DWD&#xff08;Data Warehouse Detail&…

Neo4j 新手教程 环境安装 基础增删改查 python链接 常用操作 纯新手向

Neo4j安装教程&#x1f680; 目前在学习知识图谱的相关内容&#xff0c;在图数据库中最有名的就是Neo4j,为了降低入门难度&#xff0c;不被网上很多华丽呼哨的Cypher命令吓退&#xff0c;故分享出该文档&#xff0c;为自己手动总结&#xff0c;包括安装环境&#xff0c;增删改查…

PRewrite: Prompt Rewriting with Reinforcement Learning

PRewrite: Prompt Rewriting with Reinforcement Learning 基本信息 2024-01谷歌团队提交到arXiv 博客贡献人 徐宁 作者 Weize Kong&#xff0c;Spurthi Amba Hombaiah&#xff0c;Mingyang Zhang 摘要 工程化的启发式编写对于LLM&#xff08;大型语言模型&#xff09;应…

LeNet5实战——衣服分类

搭建模型训练代码&#xff08;数据处理、模型训练、性能指标&#xff09;——> 产生权重w ——>模型结构c、w测试 配置环境 Pycharm刚配置的环境找不到了-CSDN博客 model.py 导入库 import torch from torch import nn from torchsummary import summary 模型搭…

三步骤找到用户真正痛点 提高需求分析质量

用户痛点对于需求分析具有至关重要的作用&#xff0c;这直接关系着需求分析结果是否真正满足用户需求&#xff0c;关系着最终研发的产品是否能够满足市场的需求&#xff0c;是否能够在竞争激烈的市场中脱颖而出。因此找到用户真正痛点至关重要。 1、什么是痛点 痛点是消费者心理…

Unity2013.1.19_DOTS_Burst compiler

Unity2013.1.19_DOTS_Burst compiler DOTS是一种新产品&#xff0c;现在尚在起步阶段。由于它处于持续发展中&#xff0c;随着我们努力使其达到最佳状态&#xff0c;您将看到API会不断演变和日趋成熟。 DOTS包含以下元素&#xff1a; 实体组件系统(ECS) - 提供使用面向数据的…

Linux下下载安装JDK配置Java环境变量

Linux下下载安装JDK配置Java环境变量 1. 下载JDK 下载链接&#xff1a;(https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html) 2. 上传至服务器并解压 可通过shell工具进行上传&#xff0c;我这里是上传安装在/opt目录 解压jdk-17.0.10_linux-x64_b…

【DevOps云实践】不同Azure Function的类型

【DevOps云实践】不同Azure Function的类型 Azure函数是由Microsoft Azure提供的无服务器计算服务,允许开发人员构建和部署应用程序而不必担心底层基础设施。使用Azure函数,您可以根据不同的触发器执行代码,并支持多种类型的函数以满足不同的用例。在本博客文章中,我们将探…

html实体字符,已拿offer入职

面试知识点 主要内容包括html&#xff0c;css&#xff0c;前端基础&#xff0c;前端核心&#xff0c;前端进阶&#xff0c;移动端开发&#xff0c;计算机基础&#xff0c;算法与数据结构&#xff0c;设计模式&#xff0c;项目等等。 html 1.浏览器页面有哪三层构成&#xff0c…

CSS的行内样式与内联样式,web前端服务端开发

面试题&#xff1a; Html 1&#xff0c;html语义化 2&#xff0c;meta viewport相关 3&#xff0c;canvas 相关 CSS 1&#xff0c;盒模 戳这里领取完整开源项目&#xff1a;【一线大厂前端面试题解析核心总结学习笔记Web真实项目实战最新讲解视频】 型 1.1&#xff0c;ie…

主备DNS服务器搭建并验证

目录 1. 配置静态网络 2. 配置主备DNS 2.1 DNS备服务器&#xff08;第二个虚拟机&#xff09; 2.2 两个虚拟机操作 2.3 备用服务器&#xff08;第二个虚拟机&#xff09;执行 2.4 两个虚拟机都添加DNS: 3. 验证 3.1 主DNS服务验证: 3.2 备用DNS服务器验证&am…

005-CSS-兼容适配

兼容&适配 简介媒体查询px、rpx、em、rem、vw、vh、vm 像素单位概念IOS 对 fixed 布局兼容问题刘海屏、全面屏兼容适配 简介 前端兼容问题主要包含&#xff1a;不同浏览器兼容、Web端不同分辨率适配、H5移动端适配&#xff1a; 不同浏览器兼容主要针对的是 IE 浏览器&…

阿里云服务器2核4G多少钱?支持多少在线?并发数性能测试

阿里云2核4G服务器多少钱一年&#xff1f;2核4G配置1个月多少钱&#xff1f;2核4G服务器30元3个月、轻量应用服务器2核4G4M带宽165元一年、企业用户2核4G5M带宽199元一年。可以在阿里云CLUB中心查看 aliyun.club 当前最新2核4G服务器精准报价、优惠券和活动信息。 阿里云官方2…

为什么被蜜蜂蛰了会肿得像馒头

有的人却只是一点点小鼓包。 病情分析&#xff1a;蜜蜂体内存在一种有毒物质&#xff0c;其主要成分是蚁酸&#xff0c;这种成分进入人体后&#xff0c;会和血液发生反应&#xff0c;导致皮肤表现出红肿和瘙痒的症状。一些人群还会对蜜蜂表现出过敏反应&#xff0c;此类人群在…

Linux Ubuntu 部署SVN

最近需要在ubuntu server上部署一个svn&#xff0c;记录 不需要特定版本 如果不需要特定版本&#xff0c;这样安装就是最简单的 sudo apt update然后开始安装 sudo apt install subversion等到安装完成之后执行查看版本命令&#xff0c;如果正常输出那就没问题了 svnadmin …

环境配置、如何安装OpenHarmony HAR

OpenHarmony HAR OpenHarmony js/ts三方库使用的是OpenHarmony静态共享包&#xff0c;即HAR(Harmony Archive)&#xff0c;可以包含js/ts代码、c库、资源和配置文件。通过HAR&#xff0c;可以实现多个模块或者多个工程共享ArkUI组件、资源等相关代码。HAR不同于HAP&#xff0c…

07-prometheus的自定义监控-pushgateway工具组件

一、概述 pushgateway用于自定义监控节点、节点中服务的工具&#xff0c;用户可以通过自定义的命令获取数据&#xff0c;并将数据推送给pushgateway中&#xff1b; prometheus服务&#xff0c;从pushgateway中获取监控数据&#xff1b; 二、部署pushgateway 我们可以“随便”找…

十四 超级数据查看器 讲解稿 背景和颜色

十四 超级数据查看器 讲解稿 背景和颜色 点击打开新页面播放视频教程 点击访问应用宝下载 讲解稿全文: 大家好&#xff0c;我们讲解一下 超级数据查看器 背景和颜色设置。 首先&#xff0c;我们打开超级数据查看器。 这节课设置的是 列表和详情界面的背景 和顶栏颜色。 …