Young Kbt blog Young Kbt blog
首页
  • java基础

    • Java基础
    • Java集合
    • Java反射
    • JavaJUC
    • JavaJVM
  • Java容器

    • JavaWeb
  • Java版本新特性

    • Java新特性
  • SQL 数据库

    • MySQL
    • Oracle
  • NoSQL 数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • ActiveMQ
    • RabbitMQ
    • RocketMQ
    • Kafka
  • 进阶服务

    • Nginx
  • Spring
  • Spring Boot
  • Spring Security
  • 设计模式
  • 算法
  • 知识
  • 管理

    • Maven
    • Git
  • 部署

    • Linux
    • Docker
    • Jenkins
    • Kubernetes
  • 进阶

    • TypeScript
  • 框架

    • React
    • Vue2
    • Vue3
  • 轮子工具
  • 项目工程
  • 友情链接
  • 本站

    • 分类
    • 标签
    • 归档
  • 我的

    • 收藏
    • 关于
    • Vue2-Admin (opens new window)
    • Vue3-Admin(完善) (opens new window)
GitHub (opens new window)

Shp Liu

朝圣的使徒,正在走向编程的至高殿堂!
首页
  • java基础

    • Java基础
    • Java集合
    • Java反射
    • JavaJUC
    • JavaJVM
  • Java容器

    • JavaWeb
  • Java版本新特性

    • Java新特性
  • SQL 数据库

    • MySQL
    • Oracle
  • NoSQL 数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • ActiveMQ
    • RabbitMQ
    • RocketMQ
    • Kafka
  • 进阶服务

    • Nginx
  • Spring
  • Spring Boot
  • Spring Security
  • 设计模式
  • 算法
  • 知识
  • 管理

    • Maven
    • Git
  • 部署

    • Linux
    • Docker
    • Jenkins
    • Kubernetes
  • 进阶

    • TypeScript
  • 框架

    • React
    • Vue2
    • Vue3
  • 轮子工具
  • 项目工程
  • 友情链接
  • 本站

    • 分类
    • 标签
    • 归档
  • 我的

    • 收藏
    • 关于
    • Vue2-Admin (opens new window)
    • Vue3-Admin(完善) (opens new window)
GitHub (opens new window)
  • 超文本标记语言 - Html

  • 解释编程语言 - JavaScript

  • JS 超集语言 - TypeScript

    • TypeScript - 介绍
    • TypeScript - 安装和使用
    • TypeScript - 基本类型
    • TypeScript - 编译和配置
    • TypeScript - 文件打包
    • TypeScript - 接口
    • TypeScript - 函数
    • TypeScript - 类
    • TypeScript - 泛型
    • TypeScript - 类型推断
    • TypeScript - 高级类型
    • TypeScript Office - 入门
    • TypeScript Office - 常用类型
    • TypeScript Office - 类型缩小
    • TypeScript Office - 更多函数
    • TypeScript Office - 对象类型
    • TypeScript Office - 类型操纵
    • TypeScript Office - 类
    • TypeScript Office - 模块
    • TypeScript Office - 变量声明
    • TypeScript Office - 类型推断
    • TypeScript Office - 枚举
    • TypeScript Office - 公共类型
    • TypeScript Office - Symbols
    • TypeScript Office - 类型兼容性
    • TypeScript Office - 迭代器和生成器
    • TypeScript Office - 装饰器
    • TypeScript Office - JSX
    • TypeScript Office - 混入
    • TypeScript Office - 三斜线指令
    • TypeScript Office - 模块进阶
    • TypeScript Office - 模块解析
    • TypeScript Office - 命名空间
    • TypeScript Office - 命名空间与模块
    • TypeScript Office - 声明合并
  • 界面构建框架 - React

  • 渐进式框架 - Vue2

  • 渐进式框架 - Vue3

  • 前端
  • JS 超集语言 - TypeScript
Young Kbt
2022-09-17

TypeScript Office - 三斜线指令

    三斜线指令是包含单个 XML 标签的单行注释。注释的内容被作为编译器指令使用。三斜线指令只在其包含文件的顶部有效。三斜线指令的前面只能有单行或多行注释,包括其他三斜线指令。如果它们出现在语句或声明之后,则被视为普通的单行注释,没有任何特殊意义。

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

    • 预处理输入文件

    编译器对输入文件进行预处理,以解决所有三斜线参考指令。在这个过程中,额外的文件被添加到编译中。

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

    如果使用的是相对路径,那么三斜线引用的路径是相对于包含的文件进行解析的。

    • 错误

    引用一个不存在的文件是一个错误。一个文件对自己有三重斜线引用是一个错误。

    • 使用 --noResolve

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

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

    与作为依赖关系声明的 /// <reference path="..." />指令类似,/// <reference types="..." /> 指令声明对包的依赖关系。

    解析这些包名的过程与解析 import 语句中的模块名的过程类似。一个简单的方法是将三重斜线引用类型指令看作是声明包的 import。

    例如,在一个声明文件中包括 /// <reference types="node" /> 声明这个文件使用 @types/node/index.d.ts 中声明的名字;因此,这个包需要和声明文件一起包含在编译中。

    只有在你手工编写 .d.ts 文件的时候才使用这些指令。

    对于在编译过程中生成的声明文件,编译器会自动为你添加 /// <reference types="..." />,在生成的声明文件中,当且仅当生成的文件使用了被引用包的任何声明时,会添加 /// <reference types="..." />

    对于在 .ts 文件中声明对 @types s 包的依赖,在命令行或你的 tsconfig.json 中使用 types 来代替。

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

    这个指令允许一个文件明确地包含一个现有的内置 lib 文件。

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

    对于依赖内置类型的声明文件作者,例如 DOM APIs 或内置的 JS 运行时构造器,如 Symbol 或 Iterable,建议使用三重斜线引用的 lib 指令。以前这些 .d.ts 文件不得不添加此类类型的前向 / 重复声明。

    例如,在编译中的一个文件中添加 /// <reference lib="es2017.string" />,相当于用 --lib es2017.string 进行编译。

    /// <reference lib="es2017.string" />
    "foo".padStart(4);
    
    1
    2

    /// <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 {}
    
    1
    2

    将导致在调用 AMD define 的过程中,将 NamedModule 这个名字分配给模块。

    • amdModule.js
    define("NamedModule", ["require", "exports"], function (require, exports) {
        var C = (function () {
            function C() {}
            return C;
        })();
        exports.C = C;
    });
    
    1
    2
    3
    4
    5
    6
    7

    /// <amd-dependency />

    注意:这个指令已被废弃。使用 import "moduleName"; 语句代替。

    /// <amd-dependency path="x" /> 通知编译器一个需要在生成的模块的 require 调用中注入的非 TS 模块的依赖关系。

    amd-dependency 指令也可以有一个可选的 name 属性;这允许为 amd-dependency 传递一个可选的名字。

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

    生成的 JS 代码:

    define(["require", "exports", "legacy/moduleA"], function (
           require,
            exports,
            moduleA
           ) {
        moduleA.callStuff();
    });
    
    1
    2
    3
    4
    5
    6
    7
    编辑此页 (opens new window)
    #TypeScript
    更新时间: 2023/09/18, 16:34:13
    TypeScript Office - 混入
    TypeScript Office - 模块进阶

    ← TypeScript Office - 混入 TypeScript Office - 模块进阶→

    最近更新
    01
    技术随笔 - Element Plus 修改包名 原创
    11-02
    02
    Reactor - 扩展性
    11-02
    03
    Reactor - 最佳实践
    11-02
    更多文章>
    Theme by Vdoing | Copyright © 2021-2024 Young Kbt | blog
    桂ICP备2021009994号
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式