当前位置: 首页 > article >正文

TS - tsconfig.json 和 tsconfig.node.json 的关系,如何在TS 中使用 JS 不报错

目录

  • 1,前言
  • 2,二者关系
    • 2.1,使用
  • 3,遇到的问题
    • 3.1,TS 中使用 JS

1,前言

通过 Vite 创建的 Vue3 + TS 项目,根目录下会有 tsconfig.jsontsconfig.node.json 文件,并且存在引用关系:

{
  "compilerOptions": {
  	  // 其他配置项...
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json 文件(配置项比 tsconfig.json 少很多):

{
	"compilerOptions": {
		"composite": true, // 配合 references 配置项使用。
		// 其他配置项...
	},
	"include": ["vite.config.ts"]
}

2,二者关系

1,TS 只能识别 tsconfig.json 为配置文件,不能识别其他的配置文件。

2,随着项目的变的越来越复杂,为了更精细化的控制,需要允许为不同的文件设置不同的配置。

基于上面的2个原因,TS增加一个功能:项目引用(Project References)

2.1,使用

tsconfig.jsontsconfig.node.json 为例,其他的配置文件必须有一个配置项 "composite": true,并且在 tsconfig.json 文件中通过配置项 references 引入,这样 TS 就能识别。

同时,不同的配置文件之间的配置项相互独立,只会影响当前配置文件中的 include 字段。

所以,Vite 创建的 Vue3 + TS 项目中,tsconfig.node.json 只会影响到 vite.config.ts 文件。

3,遇到的问题

3.1,TS 中使用 JS

接手的一个Vue3项目中,在 main.ts 中遇到下面的报错(竟然一直没有解决):

在这里插入图片描述

报错信息:
Could not find a declaration file for module './App.vue'. 'd:/xxx/src/App.vue' implicitly has an 'any' type.ts(7016)

直接搜索错误 implicitly has an 'any' type,得到答案,修改配置项即可:

{
	"compilerOptions": {
		"noImplicitAny": false
	}
}

但后来发现,问题的产生是因为其他同事觉得 ts 麻烦,想直接使用 js,所以做了如下修改:

<script setup lang="ts">
<!-- 改为 -->
<script setup>

此时配置项 "strict": true 就会发挥作用(第5点),

该配置项启用时,包含的一些关键编译选项:

  1. strictBindCallApply: 确保 bind, call, apply 方法的参数类型被正确地类型检查。

  2. strictFunctionTypes: 对函数类型进行严格检查,包括参数和返回值的类型。这意味着函数的参数列表和返回值类型必须完全匹配。

  3. strictNullChecks: 启用严格的空值检查。在这种模式下,TypeScript 编译器会更加严格地检查位置类型和联合类型中可能为 null 或 undefined 的位置。

  4. strictPropertyInitialization: 确保类的非 undefined 属性在构造函数中被初始化。

  5. noImplicitAny: 禁止使用隐式的 any 类型。这有助于避免类型系统的退化,确保类型被明确地声明。

  6. strictTypePredicates: 严格检查类型谓词(如 typeof, instanceof)在类型守卫中的使用。

  7. noImplicitThis: 确保 this 参数被明确地类型化,而不是隐式地推断为 any 类型。

  8. alwaysStrict: 将严格模式应用于所有输入文件,就像它们是以严格模式开始的。


所以更准确的修改,应该是增加下面配置项即可:

{
	"compilerOptions": {
		"allowJs": true
	}
}

以上。

参考


http://www.kler.cn/a/310836.html

相关文章:

  • 游戏引擎学习第五天
  • 力扣 LeetCode 977. 有序数组的平方(Day1:数组)
  • 【ARM Coresight OpenOCD 系列 5 -- arp_examine 使用介绍】
  • 软件工程的基础和核心理论概念
  • 大数据学习12之HBase
  • 计算机毕业设计Python+大模型斗鱼直播可视化 直播预测 直播爬虫 直播数据分析 直播大数据 大数据毕业设计 机器学习 深度学习
  • 产品经理注意!11月NPDP考试预报名已开启
  • Oracle 11gR2打PSU补丁详细教程
  • 监控系列之-Grafana面板展示及制作
  • Flutter 优化技巧分享
  • Linux 内存分析工具 —— heaptrack
  • 代理IP批理检测工具,支持socks5,socks4,http和https代理批量检测是否可用
  • MySQL基础作业五
  • Text2SQL论文笔记 A Survey on Employing Large Language Models for Text-to-SQL Tasks
  • linux-L3-linux 复制文件
  • HBase在大数据实时处理中的角色
  • 【IEEEACM Fellow、CCF组委】第三届人工智能与智能信息处理国际学术会议(AIIIP 2024)
  • Python | Leetcode Python题解之第405题数字转换为十六进制数
  • java泛型的概念与好处
  • 【Git】常见命令(仅笔记)
  • Spark任务读取hive表数据导入es
  • 算法笔试-编程练习-好题-06
  • 【HarmonyOS NEXT】DevEco快速实现真机截屏,并保存到电脑
  • JVM面试真题总结(十一)
  • ORM框架详解:为什么不直接写SQL?
  • 软件渗透测试流程有哪些?专业软件测评公司简析渗透测试的好处