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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
js实现随机点名程序
Sep 17 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 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
smarty实现多级分类的方法
2014/12/05 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
JS判断数组那点事
2017/10/10 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
vuex的使用步骤
2021/01/06 Vue.js
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
奇怪的鱼:Weird Fish
2018/03/18 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
普天C++笔试题
2016/03/20 面试题
物流经理自我评价
2013/09/23 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
关于读书的活动方案
2014/08/14 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
2015年教师节主持词
2015/07/03 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python
python 离散点图画法的实现
2022/04/01 Python
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python