TypeScript学习笔记——三斜杠指令(Triple Slash Directives)

212 阅读2分钟

什么是三斜杆指令?

Triple-slash directives are single-line comments containing a single XML tag. The contents of the comment are used as compiler directives.
三斜杠指令是包含单个 XML 标记的单行注释。 注释的内容用作编译器指令

通俗来说,三斜杠指令其实是相当于js的import,引入外部类型进入开发环境使用的

解析时机

image2022-11-25_0-40-27.png

image2022-11-17_17-56-6.png

就是TypeScript compiler会在编译之前,一些根文件,tsconfig配置的files额外文件会被预先处理,这些文件中的三斜杆指令也会被编译解析,开发环境就会有了这些三斜杆指令的指向的类型

位置

只能是文件的顶部,前面可以有单行或多行注释,否则不生效。 image2022-11-25_14-56-47.png

用法

  1. /// <reference path="XXX" /> 根据路径查找类型文件
  2. /// <refernece types="XXX" /> 用于查找第三方模块类型,查找时优先从typeRoots(默认是@types)找,再从node_modules找;当typeRoots和node_modules有相同的,typeRoots的优先级更高;类似于tsconfig的types;
  3. /// <refernece lib="XXX" /> 与tsconfig的lib作用相同
  4. /// <refernece no-default-lib="true" /> 把一个文件标记成默认库。
    可以在lib.d.ts和它的其他不同的变体的顶端看到这个注释。这个指令告诉编译器在编译过程中不要包含这个默认库,这与在命令上使用-noLib相似;
    还要注意,当传递了-skipDefaultLibCheck,编译器只会忽略检查带有///<reference no-default-list="true" />的文件,通俗一点的意思是不使用当前默认的lib类型,自己配置一份新的
  5. /// <amd-module name="XXX" /> 输出amd时,定义模块标识

注意

  • 如果某个文件使用到的三斜杠导入的类型的话,tsc编译后会输出的.d.ts增加三斜杠类型导入,但是如果是path,路径会保持不变,因为tsc不会处理.d.ts文件,所以output可能会有问题,此时可以通过一些第三方库如tsup@microsoft/api-extractor替代tsc
  • tsconfig 设置 noResolve,三斜杠会失效

可使用的文件

ts、tsx、.d.ts、js

vue的<script lang="ts">中使用也可以,但与eslint会有冲突

test.d.ts
image2022-12-2_2-27-20.png

vue文件
image2022-12-2_2-30-4.png image2022-12-2_2-32-29.png

参考:www.typescriptlang.org/docs/handbo…