Vue3 + Vite 项目引入 Typescript

文章目录

    • 一、TypeScript简介
    • 二、TypeScript 开发环境搭建
    • 三、编译方式
      • 1. 自动编译单个文件
      • 2. 自动编译整个项目
    • 四、配置文件
      • 1. compilerOptions
        • 基本选项
        • 严格模式相关选项(启用 strict 后自动包含这些)
        • 模块与导入相关选项
      • 2. include 和 exclude
        • include
        • exclude
      • 3. files
      • 4. extends
      • 5. 总结
    • 五、Vue3 + Vite 项目中引入 Typescript
      • 1. 初始化 TypeScript
        • 安装 TypeScript
        • 生成 tsconfig.json
      • 2. 替换文件扩展名
      • 3. 添加类型定义文件
      • 4. 配置构建工具支持 TypeScript
      • 5. 在项目中使用 TypeScript
      • 6. 构建和运行项目
        • 编译 TypeScript
        • 运行项目
    • 六、报错处理
      • 1. .ts 文件中引入 .vue 文件报错
        • 问题
        • 解决方法

一、TypeScript简介

  1. TypeScript 是 JavaScript 的超集。
  2. 它对 JS 进行了扩展,向 JS 中引入了类型的概念,并添加了许多新的特性。
  3. TS 代码需要通过编译器编译为 JS,然后再交由 JS 解析器执行。
  4. TS 完全兼容 JS,换言之,任何的 JS 代码都可以直接当成 TS 使用。
  5. 相较于 JS 而言,TS 拥有了静态类型,更加严格的语法,更强大的功能;TS 可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS 代码可以编译为任意版本的 JS 代码,可有效解决不同 JS 运行环境的兼容问题;同样的功能,TS 的代码量要大于 JS,但由于 TS 的代码结构更加清晰,变量类型更加明确,在后期代码的维护中 TS 却远远胜于 JS。

二、TypeScript 开发环境搭建

  1. 下载Node.js
    • 64位:https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
    • 32位:https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi
  2. 安装 Node.js
  3. 使用 npm 全局安装 typescript
    • 进入命令行
    • 输入:npm i -g typescript
  4. 创建一个 ts 文件
  5. 使用 tsc 对 ts 文件进行编译
    • 进入命令行
    • 进入 ts 文件所在目录
    • 执行命令:tsc xxx.ts

三、编译方式

1. 自动编译单个文件

编译文件时,使用 -w 指令后,TS 编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。

tsc xxx.ts -w

2. 自动编译整个项目

如果直接使用 tsc 指令,则可以自动将当前项目下的所有 ts 文件编译为 js 文件。但是能直接使用 tsc 命令的前提是,要先在项目根目录下创建一个 ts 的配置文件 tsconfig.json。
tsconfig.json 是一个 JSON 文件,添加配置文件后,只需 tsc 命令即可完成对整个项目的编译

四、配置文件

tsconfig.json 是 TypeScript 的核心配置文件,用于指定编译器选项、文件范围以及类型检查的规则。下面是 tsconfig.json 中常用配置项及其含义的详细解释:
主要配置项

1. compilerOptions

compilerOptions 是 TypeScript 编译器选项的核心部分,控制编译行为。

基本选项
配置项含义常见值
target指定编译后的 JavaScript 目标语言标准ES5ES6ES2017ESNext
module指定模块系统CommonJSESNextAMDUMD
moduleResolution模块解析策略nodeclassic
lib指定要包含的库文件DOMES2015ESNext
allowJs是否允许编译 .js 文件truefalse
checkJs是否对 .js 文件进行类型检查truefalse
outDir指定编译后输出文件的目录例如 ./dist
rootDir指定输入文件的根目录例如 ./src
strict启用所有严格类型检查选项(开启后相当于开启多种子选项)truefalse
sourceMap是否生成 .map 文件,方便调试truefalse
declaration是否生成 .d.ts 类型声明文件truefalse
严格模式相关选项(启用 strict 后自动包含这些)
配置项含义默认值
strictNullChecks严格检查空值(null 和 undefined)true
noImplicitAny禁止隐式的 any 类型true
noImplicitThis禁止隐式的 this 类型true
alwaysStrict在每个文件中添加 “use strict”;true
模块与导入相关选项
配置项含义默认值
esModuleInterop允许 CommonJS 和 ESModule 之间的兼容导入truefalse
resolveJsonModule是否允许导入 .json 文件truefalse
isolatedModules启用模块的隔离编译模式(适用于工具链如 Babel)truefalse
baseUrl设置模块解析的根目录,结合 paths 配置别名路径例如 ./src
paths设置模块路径别名例如 { "@/*": ["src/*"] }

2. include 和 exclude

include

定义希望被编译文件所在的目录。默认值:[“**/*”]。** 表示任意目录,* 表示表示任意文件

// 所有src目录和tests目录下的文件都会被编译  
"include":["src/**/*", "tests/**/*"] 
exclude

定义需要排除在外的目录。默认值:[“node_modules”, “bower_components”, “jspm_packages”]

  // src下hello目录下的文件都不会被编译"exclude": ["./src/hello/**/*"]

❗❗❗注意:如果 include 和 exclude 都未设置,默认包含所有非 node_modules 的文件。

3. files

指定被编译文件的列表,只有需要编译的文件少时才会用到。列表中的文件都会被 TS 编译器所编译。

  "files": ["core.ts","sys.ts","types.ts","scanner.ts","parser.ts","utilities.ts","binder.ts","checker.ts","tsc.ts"]

4. extends

定义继承另一个配置文件的选项,便于共享和复用配置。可覆盖部分选项。

// 当前配置文件中会自动包含config目录下base.json中的所有配置信息
"extends": "./configs/base"

5. 总结

  • compilerOptions:控制编译器行为,是核心配置。
  • include 和 exclude:决定编译器处理哪些文件。
  • extends 和 references:支持配置复用和多项目架构。
  • 根据项目需求调整配置,既可以提升开发效率,也能保证代码质量!

五、Vue3 + Vite 项目中引入 Typescript

1. 初始化 TypeScript

安装 TypeScript

在项目目录下安装 TypeScript:

npm install typescript --save-dev
生成 tsconfig.json

运行以下命令生成 TypeScript 配置文件:

npx tsc --init

这会生成一个默认的 tsconfig.json 文件。可以根据需要修改配置,比如:

{"compilerOptions": {// 基本选项"target": "ESNext", // 编译的 js 版本"useDefineForClassFields": true, // 此标志用于迁移到即将推出的类字段标准版本,target is ES2022 or higher"lib": ["ESNext", "DOM"], // 编译过程中需要引入的库文件的列表"skipLibCheck": true, // 跳过默认库声明文件的类型检查"module": "ESNext", // 指定生成哪个模块系统代码"moduleResolution": "Node", // 决定如何处理模块"noEmit": true, // 不生成输出文件"jsx": "preserve", // 在 .tsx文件里支持JSX// "types": ["vitest/globals", "element-plus/global"], // 要包含的类型声明文件名列表// 严格模式相关"strict": true, // 启用所有严格类型检查选项"strictPropertyInitialization": false, // 确保类的非 undefined 属性已经在构造函数里初始化// 模块导入相关"isolatedModules": false, // 将每个文件作为单独的模块"esModuleInterop": true, // 允许 CommonJS 和 ESModule 之间的兼容导入"resolveJsonModule": true, // 是否允许导入 .json 文件"baseUrl": ".", // 解析非相对模块名的基准目录"paths": {"@": ["src"],"@/*": ["src/*"],"@tests/*": ["tests/*"]} // 设置基于 baseUrl 的模块别名},"include": ["src/**/*.ts","**/*.d.ts","src/**/*.vue","src/types","types/*.ts","auto-imports.d.ts",], // 包含目录 "references": [{ "path": "./tsconfig.node.json" }]
}

2. 替换文件扩展名

将项目中的文件扩展名从 .js 改为 .ts(或者 .tsx,如果是 React 项目)。

3. 添加类型定义文件

为了确保第三方库在 TypeScript 中工作正常,需要安装类型定义包:

npm install @types/node --save-dev
npm install @types/react @types/react-dom --save-dev # 如果是 React 项目

对于使用的其他库,也可以安装对应的类型定义包(通常以 @types/库名 的形式存在):

npm install @types/lodash --save-dev # Lodash 的类型定义

4. 配置构建工具支持 TypeScript

  • Vite 项目
    Vite 原生支持 TypeScript,无需额外配置,只需确保文件扩展名为 .ts 或 .tsx。

5. 在项目中使用 TypeScript

6. 构建和运行项目

编译 TypeScript

运行以下命令,使用 TypeScript 编译器进行构建:

npx tsc
运行项目

如果你的项目包含打包工具(如 Webpack 或 Vite),运行相关命令即可:

npm run build
npm run dev

六、报错处理

1. .ts 文件中引入 .vue 文件报错

问题

在这里插入图片描述

解决方法

创建一个 env.d.ts 文件对 .vue 文件进行类型声明
在这里插入图片描述
在全局 tsconfig.json 中包含该 env.d.ts 文件
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/20397.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

苹果MacOS 调用自编译opencv的Dylib显示一个图片程序的步骤

前言 为了测试自编译的opencv库是否能在苹果MacOS系统下使用,需要写一个简单的测试程序。这个测试程序写起来不难,麻烦的是一些配置。网上的办法很多,里面因为版本的问题有一些坑。特此写了一个建立步骤,供大家参考。 1、新建一个…

AI赋能:高职院校实验实训教学如何拥抱人工智能浪潮?

随着信息技术的迅猛发展,人工智能技术已成为推动社会各行业转型升级的核心力量。它不仅在提升生产效率、优化管理流程、提高服务质量方面发挥着关键作用,也深刻影响着高职教育的专业发展和课程教学内容的改革。作为培养专业技术技能人才的摇篮&#xff0…

消费者行为学领域的顶级期刊

一、期刊 1.Journal of Consumer Research 2.Journal of Consumer Psychology 3.Journal of Research in Interactive Marketing 4.Journal of the Academy of Marketing Science 5.Tourism Management 下面是我整理的一个excel,大家按需丝我获取。 二、期刊&z…

STM32单片机CAN总线汽车线路通断检测-分享

目录 目录 前言 一、本设计主要实现哪些很“开门”功能? 二、电路设计原理图 1.电路图采用Altium Designer进行设计: 2.实物展示图片 三、程序源代码设计 四、获取资料内容 前言 随着汽车电子技术的不断发展,车辆通信接口在汽车电子控…

Zmap+python脚本+burp实现自动化Fuzzing测试

声明 学习视频来自 B 站UP主泷羽sec,如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负。 ✍🏻作者简介:致…

3.tree of thought 源码 (Thought 和ToTDFSMemory 类)

本教程将介绍 tree of thought 源码 中的Thought 和ToTDFSMemory 类 定义思维有效性 使用Enum模块来定义思维的有效性。 from enum import Enumclass ThoughtValidity(Enum):"""Enum for the validity of a thought."""VALID_INTERMEDIATE 0…

从ES的JVM配置起步思考JVM常见参数优化

目录 一、真实查看参数 (一)-XX:PrintCommandLineFlags (二)-XX:PrintFlagsFinal 二、堆空间的配置 (一)默认配置 (二)配置Elasticsearch堆内存时,将初始大小设置为…

【C++】list使用详解

本篇介绍一下list链表的使用,后续也是会对list进行模拟实现的。list是链表里面的双向链表。 1.文档介绍 list - C Referencehttps://legacy.cplusplus.com/reference/list/list/ list中的接口比较多,此处类似,只需要掌握如何正确的使用&am…

分布式事务

参考 Seata 详解Mysql分布式事务XA CAP 这个定理的内容是指:在一个分布式系统中、Consistency(一致性)、Availability(可用性)、Partitiontolerance(分区容错性),三者不可得兼。 一致性(C) 在分布式系统中的所有数据备份&…

记录elasticsearch-analysis-dynamic-synonym从8.15.0升级到8.16.0所遇到的问题

记录elasticsearch-analysis-dynamic-synonym从8.15.0升级到8.16.0所遇到的问题 一、打包步骤 步骤一、linux系统下执行elasticsearch-module中的build.sh脚本 步骤二、maven环境下elasticsearch-cluster-runner执行maven install命令安装到本地maven仓库。 步骤三、修改版…

【大模型推理加速】KV cache

目录 1. kv cache 原理1.1 Flops 计算公式推导 2. 缺点3. kv cache 优化3.1 L: Layer-Condensed KV Cache , 粒度大,效率高3.1.1 MiniCache3.1.2 PyramidInfer3.1.3 CLA 3.2 H: Retrieval Head,3.2.1 Razor Attention, DuoAttention3.2.2 GQA多个head共享一份KV 3.3…

esp32c3开发板通过micropython的ubluetooth库连蓝牙设备

ESP32-C3开发板是一款高性能、低功耗的微控制器,搭载了Espressif自家的RISC-V处理器。通过MicroPython,一种面向微控制器的精简版Python编程语言,开发者可以轻松地为ESP32-C3编写代码。MicroPython的ubluetooth库使得ESP32-C3能够通过蓝牙与各…

CTF攻防世界小白刷题自学笔记16

1.Broadcast,难度:1,方向:Crypto(密码学) 题目来源:2019_Redhat 题目描述:粗心的Alice在制作密码的时候,把明文留下来,聪明的你能快速找出来吗? 给一下题目链接&#…

企业供配电及用电一体化微电网能源管理系统

企业能源管理痛点 信息孤岛 1.保护类、监测类、控制类、治理类、重要负荷等子系统多、分散、独立 2.数据异构、融合困难、数据分析困难 3.用户无法通过一套系统完整的了解整个企业的供电、配电、用电情况; 资源浪费 1.服务器资源浪费 2.应用软件浪费 3.数据…

windows实现VNC连接ubuntu22.04服务器

最近弄了一个700块钱的mini主机,刷了ubuntu22.04系统,然后想要在笔记本上通过VNC连接,这样就有了一个linux的开发环境。最后实现的过程为: 安装vnc服务器 安装 VNC 服务器软件: sudo apt update sudo apt install t…

强化学习数学原理学习(四)

前言 今天是时序差分学习 正文 首先,明确一点,时序差分也是无模型的情况下的强化学习方法,TD学习是蒙特卡洛思想和动态编程(DP)思想的结合。最基础的时序差分学习估计状态值,而后续提出的Sarsa和Q-learning方法则直接对动作值进行估计。 …

【Redis 探秘】Redis 性能优化技巧

👉博主介绍: 博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家,WEB架构师,阿里云专家博主,华为云云享专家,51CTO 专家博主 ⛪️ 个人社区&#x…

RTSP播放器EasyPlayer.js播放器在webview环境下,PC和安卓能够正常播放,IOS环境下播放器会黑屏无法播放

流媒体技术分为顺序流式传输和实时流式传输两种。顺序流式传输允许用户在下载的同时观看,而实时流式传输则允许用户实时观看内容。 流媒体播放器负责解码和呈现内容,常见的播放器包括VLC和HTML5播放器等。流媒体技术的应用场景广泛,包括娱乐…

C语言零基础入门

一、输入输出 &#xff08;1&#xff09;scanf scanf 是C语言中的一个标准库函数&#xff0c;用于从标准输入&#xff08;通常是键盘&#xff09;读取数据。scanf 函数定义在 <stdio.h> 头文件中。 #include <stdio.h>int main(void) {//读取整数 int num;print…

经典的网络安全技术

以我的理解&#xff0c;“黑客”大体上应该分为“正”、“邪”两类&#xff0c;正派黑客依靠自己掌握的知识帮助系统管理员找出系统中的漏洞并加以完善&#xff0c;而邪派黑客则是通过各种黑客技能对系统进行攻击、入侵或者做其他一些有害于网络的事情&#xff0c;因为邪派黑客…