Typescript(九)配置文件 tsconfig.json

2023-11-03

TypeScript 使用 tsconfig.json 文件作为其配置文件,当一个目录中存在 tsconfig.json 文件,则认为该目录为 TypeScript 项目的根目录。
通常 tsconfig.json 文件主要包含两部分内容:指定待编译文件和定义编译选项。

1:生成 tsconfig.json 文件

这个文件是通过tsc --init命令生成的,在桌面上新建一个文件夹TsDemo,然后打开VSCode,把文件托到编辑器中,然后打开终端Terminal,输入tsc --init。

输入完成后,就会出现tsconfig.json文件,你可以打开简单的看一下,不过此时你可能看不懂。

其实它就是用来配置如何对ts文件进行编译的,我们都叫它 typescript 的编译配置文件。

如果此时你的tsc执行不了,很有可能是你没有全局安装 TypeScript,可以全局安装一下。

2:让 tsconfig.json 文件生效

你现在可以在文件夹跟目录建立一个demo.ts文件,然后编写一些最简单的代码,代码如下:

const person: string = "guanchao";

这时候我们不在使用ts-node直接执行了,需要用tsc demo.ts进行编译,编译后会得到demo.js文件。 生成的代码如下:

var person = "guanchao";

这时候好像一切都是正常的,但是我要告诉你的真相是tsconfig.json这个编译配置文件并没有生效。

此时我们打开tsconfig.json文件,找到complilerOptions属性下的removeComments:true选项,把注释去掉。

这个配置项的意思是,编译时不显示注释,也就是编译出来的js文件不显示注释内容。

现在你在文件中加入一些注释,比如:

// I love guanchao
const person: string = "guanchao";

这时候再运行编译代码tsc demo.ts,编译后打开demo.js文件,你会发现注释依然存在,说明tsconfig.json文件没有起作用。

如果要想编译配置文件起作用,我们可以直接运行tsc命令,这时候tsconfig.json才起作用,可以看到生成的js文件已经不带注释了。

3:include 、exclude 和 files

那现在又出现问题了,如果我们的跟目录下有多个ts文件,我们却只想编译其中的一个文件时,如何作?

我们在项目根目录,新建一个文件demo2.ts文件,然后也写一段最简单的 ts 代码。

const person2: string = "guanchao.site";

如果这时候我们在终端里运行tsc,虽然tsconfig.json生效了,但是两个文件都被我们编译了。这不是你想要的结果,我们可以用三种办法解决这个问题。

第一种:使用 include 配置

include属性是用来指定要编译的文件的,比如现在我们只编译demo.ts文件,而不编译demo2.ts文件,就可以这样写。

写配置文件时有个坑需要注意,就是配置文件不支持单引号,所以里边都要使用双引号。

{
  "include":["demo.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

这时候再编译,就只编译demo.ts文件了。

第二种:使用 exclude 配置

include是包含的意思,exclude是不包含,除什么文件之外,意思是写再这个属性之外的而文件才进行编译。比如你还是要编译demo.ts文件,这时候的写法就应该是这样了。

{
   "exclude":["demo2.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

这样写依然只有demo.ts被编译成了js文件。

第三种:使用 files 配置

files的配置效果和include几乎一样,我是没找出有什么不同,只要配置到里边的文件都可以编译,如果有小伙伴知道有什么不同的,欢迎在视频下方留言,然后一起学习。

{
  "files":["demo.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

结果是依然只有demo.ts文件被编译。

有好的建议,请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site

欢迎访问小程序:

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Typescript(九)配置文件 tsconfig.json 的相关文章

随机推荐

  • 【日志脱敏】Springboot集成日志框架脱敏实战

    针对日志打印而不能泄露用户隐私需求 需要利用相应日志框架实现脱敏 本文基于log4j logback 重写相应方法 匹配出正则并转换为脱敏后的日志 效果展示如下 name 李 idNumber 110106 226X mobile 130
  • Scala编译器的安装

    1 Scala编译器安装 1 1 安装JDK 因为Scala是运行在JVM平台上的 所以安装Scala之前要安装JDK 1 2 安装Scala 1 2 1 Windows安装Scala编译器 访问Scala官网http www scala
  • 两个有序数组合并成一个有序数组——C++实现

    程序分析 这里做的是升序 C 代码 include
  • 如何监控Android模拟器的HTTP访问情况

    前几个月 在调试某个应用时 需要监控应用与服务器之间的HTTP通讯 从搜索引擎找到的方案几乎全错 要么是人云亦云 要么是只能满足旧的平台版本 要么根本就是臆测 不得其解之际 用比较复杂的方法解决了 昨天想起来 觉得太过窝囊 于是重整旗鼓 终
  • react-节点更新与销毁

    文章目录 更新与销毁 节点更新 对比更新 找到了对比目标 没有找到对比目标 更新与销毁 发生更新的场景 重新调用ReactDOM render 触发根节点更新 在类组件中调用setState 会导致该节点更新 节点更新 分为两种 如果调用的
  • Linux学习命令

    cd ls mkdir rmdir rm touch 创建文件 cat 显示文件内容 不适合查看内容较长的文件 n 显示行号 cat n etc issue tac 和cat类似 但是是倒过来显示 more 分页显示文件内容 空格 或f 翻
  • 【CLYZ集训】马可波罗【按位】【博弈论】

    题目大意 有两个人 n n n堆石子 每个人轮流取 每次可以取1 x x x个 最后没得取的人输 两人都采取最优策略 问对于 x
  • 双目视觉标定MATLAB

    双目标定 双目摄像机需要标定的参数 摄像机内参数矩阵 畸变系数 两相机之间的旋转矩阵 R 和平移矩阵 T 其中摄像机内参数矩阵和畸变系数矩阵可以通过单目标定的方法标定出来 双目摄像机标定和单目摄像机标定最主要的区别就是双目摄像机需要标定出左
  • oracle自定义函数function

    遇到的问题 遇到一个数据统计的需求 要求 统计身份证号码性别位填写错误的个数 首先普及身份证性别位 至今为止身份证有18位和15位两种 18位身份证号性别位是17位 第17位数字奇数为男性 偶数为女性 0也是女性 15位身份证号性别位是最后
  • springboot AOP日志

    引入项目依赖
  • STM32单片机,UART的寄存器配置以及工作原理

    UART是重要的片上资源 主流单片机基本上都有该功能 通过UART可以扩展出很多的通信接口 如RS232 RS485 LIN 甚至WIFI 蓝牙模组等 可以说只要搞通讯就会涉及到UART 下面和大家分享STM32的UART配置 1 UART
  • CF1604C Di-visible Confusion

    CF传送门 早上起来看一下昨天的cf div2 后悔昨天没打了 本题是一道很水的思维题 题目的大意就是说 如果选择序列 a a a的第 i i i位 如果 a
  • C语言计算代码执行时间的办法

    在Linux下 sleep 单位为秒 usleep 里面的单位是微秒 在Windows系统中 sleep 单位为毫秒 有两个和计算执行时间相关的函数 在调试分析性能的时候 我们经常需要检查一段代码执行花了多少时间 下面的例子说明在C语言里面
  • OpenCV各个模块介绍

    对于初学opencv的我来说 最头疼和无法下手的就是 都有什么库 那些库都是干什么的 怎么用 我想很多人应该和我一样 我觉得最重要的就是需要先知道opencv有哪些库 都是干什么的 在我们安装opencv的地址下 可以看到opencv2中包
  • 使用rpm包搭建Glusterfs集群

    使用rpm搭建Glusterfs集群步骤 一 环境准备 1 准备搭建glusterfs所需的rpm包 centos release gluster6 1 0 1 el7 centos noarch rpm centos release st
  • mysql中空值和null值的区别及处理方法总结

    一直对空值和null值的概念理解不清晰 所以结合资料以及自己的理解对他们的区别和处理方式进行总结 首先就是在概念上的不同 1 空值不占空间 2 null值占空间 打个比喻就是空值表示一个杯子是真空状态 什么都没有 而null值是杯子中有空气
  • Java 8 中的抽象类和接口到底有啥区别?

    在我们面试时也会经常遇到面试官问抽象类和接口的区别是什么 大部人肯定会说 接口中的所有方法都是抽象的 抽象类中的方法除了抽象方法还可以写实现方法 如果你还这样回答那你就 OUT 啦 要跟上形式 这个问题我在面试一个 39 岁的程序员时 他居
  • Redis配置文件解读

    转载自 http www cnblogs com daizhj articles 1956681 html 对部分配置选项做了一些说明 把配置项目从上到下看了一遍 有了个大致的了解 暂时还用不到一些高级的配置选项 先放在这 用到的时候再回来
  • Teradata SQL 线性回归函数

    基于budget amounts排队得到前三个部门 显示部门号和预算 SELECT department number salary amount RANK salary amount AS Rank FROM dapartment QUA
  • Typescript(九)配置文件 tsconfig.json

    TypeScript 使用 tsconfig json 文件作为其配置文件 当一个目录中存在 tsconfig json 文件 则认为该目录为 TypeScript 项目的根目录 通常 tsconfig json 文件主要包含两部分内容 指