TypeScript基础入门教程之三重斜线指令详解


Posted in Javascript onOctober 22, 2018

前言

TypeScript是Javascript的超集,实现以面向对象编程的方式使用Javascript。当然最后代码还是编译为Javascript。

三斜杠指令是包含单个XML标记的单行注释。 注释的内容用作编译器指令。

三斜杠指令仅在其包含文件的顶部有效。 三重斜杠指令只能在单行或多行注释之前,包括其他三重斜杠指令。 如果在声明或声明之后遇到它们,则将它们视为常规单行注释,并且没有特殊含义。

/// <reference path ="..."/>

/// <reference path ="..."/>指令是该组中最常见的。 它充当文件之间的依赖声明。

三斜杠引用指示编译器在编译过程中包含其他文件。

它们还可以作为在使用?out或?outFile时对输出进行排序的方法。 在预处理传递之后,文件以与输入相同的顺序发送到输出文件位置。

该过程从一组根文件开始; 这些是在命令行或tsconfig.json文件的”files”列表中指定的文件名。 这些根文件按照指定的顺序进行预处理。 在将文件添加到列表之前,将处理其中的所有三重斜杠引用,并包括其目标。 三重斜杠引用按照它们在文件中看到的顺序以深度优先方式解析。

如果无根则,则相对于包含文件解析三斜杠参考路径。

错误

引用不存在的文件是错误的。 如果文件具有对自身的三斜杠引用,则会出错。

使用?noResolve

如果指定了编译器标志?noResolve,则忽略三次斜杠引用; 它们既不会导致添加新文件,也不会更改所提供文件的顺序。

/// <reference types="..." />

类似于/// <reference path ="..."/>指令,该指令用作依赖声明; 但是, /// <references types ="..."/>指令声明了对包的依赖性。

解析这些包名称的过程类似于在import语句中解析模块名称的过程。 考虑三重斜杠引用类型指令的简单方法是作为声明包的导入。

例如,在声明文件中包含/// <references types ="node"/>声明此文件使用在types/node/index.d.ts中声明的名称; 因此,此包需要与声明文件一起包含在编译中。

只有在手动创建d.ts文件时才使用这些指令。

对于编译期间生成的声明文件,编译器会自动为您添加/// <references types ="..."/>; 当且仅当生成的文件使用引用包中的任何声明时,才会添加生成的声明文件中的/// <reference types ="..."/>

/// <reference lib="..." />

该指令允许文件显式包含现有的内置lib文件。

内置的lib文件以与tsconfig.json中的”lib”编译器选项相同的方式引用(例如,使用lib=”es2015”而不是lib=”lib.es2015.d.ts”等)。

对于在内置类型上进行中继的声明文件作者,例如 建议使用DOM API或内置的JS运行时构造函数(如Symbol或Iterable,三斜杠引用lib指令)。 以前这些.d.ts文件必须添加此类型的前向/重复声明。

例如,将/// <reference lib="es2017.string"/>添加到编译中的一个文件等效于使用?lib es2017.string进行编译。

/// <reference lib="es2017.string" />

"foo".padStart(4);

/// <reference no-default-lib="true"/>

该指令将文件标记为默认库。 您将在lib.d.ts及其不同变体的顶部看到此注释。

该指令指示编译器不在编译中包含默认库(即lib.d.ts)。 这里的影响类似于在命令行上传递?noLib。

另请注意,在传递?skipDefaultLibCheck时,编译器将仅跳过使用/// <reference no-default-lib ="true"/>检查文件。

/// <amd-module />

默认情况下,AMD模块是匿名生成的。 当使用其他工具处理结果模块(例如捆绑器(例如r.js))时,这会导致问题。

amd-module指令允许将可选模块名称传递给编译器:

amdModule.ts

///<amd-module name="NamedModule"/>
export class C {
}

将导致将名称NamedModule分配给模块作为调用AMD定义的一部分:

amdModule.js

define("NamedModule", ["require", "exports"], function (require, exports) {
 var C = (function () {
 function C() {
 }
 return C;
 })();
 exports.C = C;
});

/// <amd-dependency />

注意:此指令已被弃用。使用import”moduleName”;而是声明。

/// <amd-dependency path ="x"/>通知编译器需要在结果模块的require调用中注入的非TS模块依赖项。

amd-dependency指令也可以有一个可选的name属性; 这允许传递amd依赖的可选名称:

/// <amd-dependency path="legacy/moduleA" name="moduleA"/>
declare var moduleA:MyType
moduleA.callStuff()

生成的JS代码:

define(["require", "exports", "legacy/moduleA"], function (require, exports, moduleA) {
 moduleA.callStuff()
});

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 隔行换色函数代码
Oct 24 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 #Javascript
vue-cli项目中使用echarts图表实例
Oct 22 #Javascript
vue使用echarts图表的详细方法
Oct 22 #Javascript
在vue中使用echarts图表实例代码详解
Oct 22 #Javascript
Koa 使用小技巧(小结)
Oct 22 #Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 #Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 #Javascript
You might like
php 什么是PEAR?(第三篇)
2009/03/19 PHP
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
Python获取系统默认字符编码的方法
2015/06/04 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
生物科学系大学生的自我评价
2013/12/20 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
纠风工作实施方案
2014/03/15 职场文书
中班下学期个人总结
2015/02/12 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
会议通知范文
2015/04/15 职场文书
高三英语教学反思
2016/03/03 职场文书
python 镜像环境搭建总结
2022/09/23 Python