TypeScript配置文件之compilerOptions配置过程

更新时间：2025年05月06日 14:37:57 作者：聒噪，

这篇文章主要介绍了TypeScript配置文件之compilerOptions配置过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

rootDir和outDir

现在你的js文件直接编译到了根目录下，和ts文件混在了一起。我们当然是不喜欢这种方法的，工作中我们希望打包的js都生成在特定的一个文件夹里,比如build。

这时候你就可以通过配置outDir来配置，当然你也可以通过rootDir来指定ts文件的位置，比如我们把所有的 ts 文件都放到 src 下。

那配置文件就应该这样写：

{
    "outDir": "./build" ,
    "rootDir": "./src" ,
}

这时候你再在Terminal中输入tsc,就会有不同的效果了。

编译ES6到ES5语法allowjs

现在你在src目录下用ES6的语法写了一个demo.ts文件，代码如下。

export const name = "Riven";

如果你不做任何配置，这时候试用tsc是没有效果的。你需要到tsconfig.js文件里进行修改，修改的地方有两个。

"target":'es5' ,  // 这一项默认是开启的，你必须要保证它的开启，才能转换成功
"allowJs":true,   // 这个配置项的意思是联通

这两项都开启后，在使用tsc编译时，就会编译js文件了。

sourceMap属性

如果把sourceMap的注释去掉，在打包的过程中就会给我们生成sourceMap文件.

sourceMap 简单说，Source map 就是一个信息文件，里面储存着位置信息。
也就是说，转换后的代码的每一个位置，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。
这无疑给开发者带来了很大方便。

这里我不对 Source map 文件详细讲解，如果你感兴趣，可以自行百度一下吧。

noUnusedLocals和noUnusedParameters

比如现在我们修改demo.ts文件的代码，改为下面的样子。

const riven: string = null;
export const name = "riven";

这时候你会发现riven这个变量没有任何地方使用，但是我们编译的话，它依然会被编译出来，这就是一种资源的浪费。

//编译后的文件
"use strict";
exports.__esModule = true;
exports.name = void 0;
var jspang = null;
exports.name = "riven";

这时候我们可以开启noUnusedLocals：true，开启后我们的程序会直接给我们提示不能这样编写代码，有没有使用的变量。

noUnusedParameters是针对于名优使用的函数的，方法和noUnusedLocals：true一样，小伙伴们自己尝试吧。

https://www.tslang.cn/docs/handbook/compiler-options.html (编译选项详解)

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

前端构建 Less入门(CSS预处理器)
众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅
2017-03-03
layui中的layer弹出层自定义样式更改背景
layui中的layer弹出层有很多提示框，但是我们使用最多的应该就几种，layer.msg、layer.alert、layer.open、layer.load等。layer 有内置的skin：layui-layer-lan，layui-layer-molv，可以直接使用。skin不仅允许你传入layer内置的样式class名，可以自定义class名。
2023-06-06
TypeScript快速上手—html中使用ts的两种方法
TypeScript使用命令行编译器tsc或其他工具手动执行编译,在html使用s时编译为JavaScript,那么有没有办法简化过程,不编译直接使用,本文介绍html中使用TypeScript的两种方法
2024-07-07
requireJS使用指南
如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目，都用到了RequireJS，或者是我向它们推荐了增加RequireJS。在这篇文章中，我将描述RequireJS是什么，以及它的一些基础场景。 
2016-04-04
TypeScript 基础数据结构哈希表 HashTable教程
这篇文章主要为大家介绍了TypeScript 基础数据结构哈希表 HashTable教程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
typescript类型体操及关键字使用示例详解
这篇文章主要为大家介绍了typescript类型体操及关键字使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
前端轻量级MVC框架CanJS详解
你可能听说了这个新MVC框架： CanJS。还有什么比用它来创建一个联系人Web App更能深入了解它的办法呢？当看完这篇教程，你将全面了解用它的什么工具来创建你自己的Web App。
2014-09-09
less简单入门(CSS 预处理语言)
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充
2017-03-03
TypeScript函数参数和返回类型的注解方式
这篇文章主要介绍了TypeScript函数参数和返回类型的注解方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-05-05
如何解决tsconfig.json配置不生效的问题
这篇文章主要介绍了如何解决tsconfig.json配置不生效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-05-05