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

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 文件
在这里插入图片描述

相关文章:

Vue3 + Vite 项目引入 Typescript

文章目录 一、TypeScript简介二、TypeScript 开发环境搭建三、编译方式1. 自动编译单个文件2. 自动编译整个项目 四、配置文件1. compilerOptions基本选项严格模式相关选项(启用 strict 后自动包含这些)模块与导入相关选项 2. include 和 excludeinclude…...

微信小程序实战篇-分类页面制作

一、项目背景与目标 在微信小程序开发中,分类页面是一个常见且重要的功能模块。它能够帮助用户快速定位和浏览不同类别的商品或信息,提升用户体验和操作效率。今天,我们将深入探讨如何制作一个实用的微信小程序分类页面,先来看一下…...

第三十七章 如何清理docker 日志

如何清理docker 日志 目标 掌握docker 日志设置掌握docker日志的清理办法背景 在现代软件开发和部署环境中,Docker 容器技术因其轻量级、可移植性和高效资源利用的特点,已成为许多企业和开发团队的首选。Docker 容器在运行过程中会产生大量的日志信息,这些日志对于监控容器…...

二刷代码随想录第七天

454. 四数相加 II 先用map记录前两个数的和num1 num2的值出现了多少次再在后两个数组里找0 - (num1 num2),找到后就累加map中的次数 class Solution { public:int fourSumCount(vector<int>& nums1, vector<int>& nums2, vector<int>& nums3…...

1.tree of thought (使用LangChain解决4x4数独问题)

本教程将介绍如何使用LangChain库和chatglm API来解决一个4x4的数独问题。我们将通过以下步骤实现这一目标&#xff1a; 初始化chatglm 的聊天模型。定义数独问题和解决方案。创建一个自定义的检查器来验证每一步的思考。使用ToTChain来运行整个思考过程。 1. 初始化chatglm4…...

网络基础(4)IP协议

经过之前的学习对传输协议的学习&#xff0c;对于传输协议从系统底层到应用层对于socket套接字的学习已经有了一套完整的理论。 对于网络的层状结构&#xff0c;现在已经学习到了应用层和传输层: 在之前的学习中&#xff0c;通信的双方都只考虑了双方的传输层的东西&#xff0…...

124. 二叉树中的最大路径和【 力扣(LeetCode) 】

文章目录 零、原题链接一、题目描述二、测试用例三、解题思路四、参考代码 零、原题链接 124. 二叉树中的最大路径和 一、题目描述 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径…...

echarts:简单实现默认显示两柱子折线,点击按钮后显示新的柱子

问&#xff1a; 用echarts实现&#xff1a;默认显示两柱子折线&#xff0c;点击“税率”按钮&#xff0c;显示税率柱子&#xff0c;之前的两柱子折线消失 回答&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8…...

视频里的音频怎么提取出来成单独文件?音频提取照着这些方法做

在数字时代&#xff0c;视频与音频的分离与重组已成为日常需求之一。无论是出于制作背景音乐、保存讲座内容&#xff0c;还是编辑播客素材&#xff0c;提取视频中的音频并将其保存为单独文件都显得尤为重要。视频里的音频怎么提取出来成单独文件&#xff1f;本文将详细介绍几种…...

Excel——宏教程(精简版)

一、宏的简介 1、什么是宏&#xff1f; Excel宏是一种自动化工具&#xff0c;它允许用户录制一系列操作并将其转换为VBA(Visual Basic for Applications)代码。这样&#xff0c;用户可以在需要时执行这些操作&#xff0c;以自动化Excel任务。 2、宏的优点 我们可以利用宏来…...

C++中的std::tuple和std::pair

在C标准库中&#xff0c;std::tuple和std::pair是两种极具实用性的数据结构&#xff0c;它们都具备存储多个元素的功能&#xff0c;但各自有其独特的适用环境和特性。本文旨在深入探讨这两者之间的区别&#xff0c;并阐述在不同应用场景下应如何合理选择使用。 一、基本概念 s…...

引力搜索算法

引力搜索算法过程&#xff0c;包括了初始化、适应度评估、质量计算、加速度计算、更新速度和位置的一些步骤。 import numpy as np import random as rd from math import exp, sqrt import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D from matplotli…...

【时间之外】IT人求职和创业应知【35】-RTE三进宫

目录 新闻一&#xff1a;京东工业发布11.11战报&#xff0c;多项倍增数据体现工业经济信心提升 新闻二&#xff1a;阿里云100万核算力支撑天猫双11&#xff0c;弹性计算规模刷新纪录 新闻三&#xff1a;声网CEO赵斌&#xff1a;RTE将成为生成式AI时代AI Infra的关键部分 认知…...

Linux的目录结构

/ ├── bin # Binary - 存放用户可以直接使用的基本二进制可执行文件 ├── sbin # System Binaries - 存放系统管理员专用的二进制可执行文件 ├── usr # Unix System Resources - 存放用户使用的软件和库文件 │ ├── bin # Binary - 用户级应用程序…...

python: generator IDAL and DAL using sql server 2019

其它数据库也是一样的思维方式 create IDAL # encoding: utf-8 # 版权所有 2024 ©涂聚文有限公司 # 许可信息查看&#xff1a;言語成了邀功盡責的功臣&#xff0c;還需要行爲每日來值班嗎 # 描述&#xff1a; # Author : geovindu,Geovin Du 涂聚文. # IDE : P…...

命令执行简单

前言&#xff1a;小迪安全2022第一节反弹shell&#xff0c;小迪用的是两台都是云服务器&#xff0c;没有服务器可以在自己的主机上搭建也是可以的&#xff0c;主机上搭两个网站 思路&#xff1a;生成一个木马文件&#xff0c;下载到本机&#xff0c;然后利用本机上传到目标主机…...

【一句话经验】亚马逊云EC2 ubuntu24.04.1开启ROOT登录Permission denied (publickey)

按照常规的方法SSH登录会一直报错&#xff1a; Permission denied (publickey) 因为亚马逊云的默认配置不是在/etc/ssh/sshd_config&#xff0c;而是在引入的文件里了&#xff0c;所以在instance控制台输入这行命令来解除登录限制&#xff1a; sudo sed -i s/^PasswordAuthe…...

百度智能云千帆大模型平台引领企业创新增长

本文整理自百度世界大会 2024——「智能跃迁 产业加速」论坛的同名演讲。 更多大会演讲内容&#xff0c;请访问&#xff1a; https://baiduworld.baidu.com 首先&#xff0c;跟大家分享一张图&#xff0c;这个是我们目前大模型应用落地的场景分布。可以看到&#xff0c;大模型…...

【Linux】深入理解GCC/G++编译流程及库文件管理

目录 1.背景知识 2.gcc/g如何完成编译 (1) 预处理&#xff08;进行宏替换&#xff09; (2) 编译&#xff08;生成汇编&#xff09; (3) 汇编&#xff08;生成机器可识别代码&#xff09; (4) 链接&#xff08;生成可执行文件或库文件&#xff09; (5) 总结 (6) 函数库 …...

【Unity基础】对比Unity中两种粒子系统

在Unity中&#xff0c;Particle System和Visual Effect Graph (VFX) 都是用于创建粒子效果的工具&#xff0c;但它们的设计目标、使用场景和功能特点有所不同。以下是详细对比&#xff1a; 1. Particle System 特点 传统粒子系统&#xff0c;Unity自带的模块化粒子特效工具。…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

ubuntu22.04有线网络无法连接,图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

Xcode 16 集成 cocoapods 报错

基于 Xcode 16 新建工程项目&#xff0c;集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...