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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
js单例模式详解实例
2013/11/21 Javascript
javascript的函数作用域
2014/11/12 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python使用folium excel绘制point
2019/01/03 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
机电专业个人自荐信格式模板
2013/09/23 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
六年级作文之关于梦
2019/10/22 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技