Vue 3与TypeScript集成指南:构建类型安全的前端应用

在Vue 3中使用TypeScript,可以让你的组件更加健壮和易于维护。以下是使用TypeScript与Vue 3结合的详细步骤和知识点:

1. 环境搭建

首先,确保你安装了Node.js(推荐使用最新的LTS版本)和npm或Yarn。然后,安装Vue CLI:

npm install -g @vue/cli

使用Vue CLI创建一个新的Vue 3项目,并启用TypeScript支持:

vue create vue3-typescript-demo

在创建项目过程中,选择“Manually select features”并选择Babel, TypeScript, Router, Vuex, Linter/Formatter等选项。

2. 配置TypeScript

项目创建完成后,tsconfig.json文件已经通过Vue CLI自动配置好了。以下是一些关键配置项:

{"compilerOptions": {"target": "esnext","module": "esnext","strict": true,"jsx": "preserve","importHelpers": true,"moduleResolution": "node","skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"forceConsistentCasingInFileNames": true,"sourceMap": true,"baseUrl": ".","paths": {"@/*": ["src/*"]},"lib": ["esnext", "dom"]},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"exclude": ["node_modules"]
}

同时,创建shims-vue.d.ts文件以让TypeScript正确识别.vue文件:

declare module '*.vue' {import { DefineComponent } from 'vue';const component: DefineComponent<{}, {}, any>;export default component;
}

3. 定义Props

在Vue 3中,使用TypeScript定义组件的Props非常简单直观。你可以在props选项中指定类型:

<template><div><h1>{{ title }}</h1></div>
</template><script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({name: 'HelloWorld',props: {title: {type: String,required: true}}
});
</script>

对于更复杂的Props类型,可以使用接口或类型别名:

interface Book {title: string;author: string;year: number;
}const props = defineProps<{book: Book;
}>();

4. 使用Refs

在TypeScript中使用ref进行数据绑定和操作:

<template><div><input v-model="message" placeholder="Enter a message" /><p>{{ message }}</p><button @click="reset">Reset</button></div>
</template><script lang="ts">
import { defineComponent, ref } from 'vue';export default defineComponent({name: 'MessageInput',setup() {const message = ref<string>('');const reset = () => {message.value = '';};return {message,reset};}
});
</script>

5. 组件事件和Emits

处理组件事件和事件类型是TypeScript的另一个重要方面。你可以在emits选项中定义事件,并使用emit函数触发事件:

<template><div><button @click="handleClick">Click Me</button></div>
</template><script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({name: 'ClickButton',emits: ['customClick'],methods: {handleClick(event: MouseEvent) {this.$emit('customClick', event);}}
});
</script>

在组合式API中,你可以使用emit函数来触发事件:

<script setup lang="ts">
import { defineComponent, ref } from 'vue';const emit = defineEmits<{(e: 'change', id: number): void;(e: 'update', value: string): void;
}>();const handleClick = (event: MouseEvent) => {emit('customClick', event);
};
</script>

6. 组合式API与TypeScript

Vue 3的组合式API与TypeScript的结合让代码更具模块化和可读性。你可以使用reactivecomputed来创建响应式数据和计算属性:

<template><div><p>{{ state.count }}</p><button @click="increment">Increment</button></div>
</template><script lang="ts">
import { defineComponent, reactive } from 'vue';export default defineComponent({name: 'Counter',setup() {const state = reactive({count: 0});const increment = () => {state.count++;};return {state,increment};}
});
</script>

这些步骤和知识点为你在Vue 3中使用TypeScript提供了一个全面的指南,帮助你构建类型安全和可维护的前端应用。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React-useRef与DOM操作

#题引&#xff1a;我认为跟着官方文档学习不会走歪路 ref使用 组件重新渲染时&#xff0c;react组件函数里的代码会重新执行&#xff0c;返回新的JSX&#xff0c;当你希望组件“记住”某些信息&#xff0c;但又不想让这些信息触发新的渲染时&#xff0c;你可以使用ref&#x…

# Spring事务

Spring事务 什么是spring的事务&#xff1f; 在Spring框架中&#xff0c;事务管理是一种控制数据库操作执行边界的技术&#xff0c;确保一系列操作要么全部成功&#xff0c;要么全部失败&#xff0c;从而维护数据的一致性和完整性。Spring的事务管理主要关注以下几点&#xf…

Jenkins更换主题颜色+登录页面LOGO图片

默认主题和logo图片展示 默认主题黑色和白色。 默认LOGO图片 安装插件 Login ThemeMaterial Theme 系统管理–>插件管理–>Available plugins 搜不到Login Theme是因为我提前装好了 没有外网的可以参考这篇离线安装插件 验证插件并修改主题颜色 系统管理–>A…

LLM文档对话 —— pdf解析关键问题

一、为什么需要进行pdf解析&#xff1f; 最近在探索ChatPDF和ChatDoc等方案的思路&#xff0c;也就是用LLM实现文档助手。在此记录一些难题和解决方案&#xff0c;首先讲解主要思想&#xff0c;其次以问题回答的形式展开。 二、为什么需要对pdf进行解析&#xff1f; 当利用L…

【虚幻引擎】UE5数字人开发实战教程

本套课程将会交大家如何去开发属于自己的数字人&#xff0c;包含大模型接入&#xff0c;流式输出&#xff0c;语音识别&#xff0c;语音合成&#xff0c;口型驱动&#xff0c;动画蓝图&#xff0c;语音唤醒等功能。 课程介绍视频如下&#xff1a; 【虚幻引擎】UE5 历时一个多月…

上位机编程命名规范

1.大小写规范 文件名全部小写是一种广泛使用的命名约定&#xff0c;特别是在跨平台开发和开源项目中。主要原因涉及技术约束、可读性和一致性等方面。以下是原因和优劣势的详细分析&#xff1a; 1. 避免跨平台问题 不同操作系统对文件名的大小写处理方式不同&#xff1a; Li…

JAVA:探索 PDF 文字提取的技术指南

1、简述 随着信息化的发展&#xff0c;PDF 文档成为了信息传播的重要媒介。在许多应用场景下&#xff0c;如数据迁移、内容分析和信息检索&#xff0c;我们需要从 PDF 文件中提取文字内容。JAVA提供了多种库来处理 PDF 文件&#xff0c;其中 PDFBox 和 iText 是最常用的两个。…

form表单的使用

模板 <template><el-form :model"formData" ref"form1Ref" :rules"rules"><el-form-item label"手机号" prop"tel"><el-input v-model"formData.tel" /></el-form-item><el-f…

【priority_queue的使用及模拟实现】—— 我与C++的不解之缘(十六)

前言 ​ priority_queue&#xff0c;翻译过来就是优先级队列&#xff0c;但是它其实是我们的堆结构&#xff08;如果堆一些遗忘的可以看一下前面的文章复习一下【数据结构】二叉树——顺序结构——堆及其实现_二叉树顺序结构-CSDN博客&#xff09;&#xff0c;本篇文章就来使用…

php 与 thinkphp 13 张 表 关联 查询,a.pry_key=b.pry_key and c.pry_key= b.pry_key 代码示例

在 PHP 中&#xff0c;假设你有 13 张表并且这些表之间通过 pry_key 关联&#xff0c;你可以使用 SQL 的 JOIN 来将这些表连接在一起&#xff0c;然后通过 PHP 执行该查询。以下是一个简化的示例&#xff0c;展示如何通过 JOIN 语句将 13 张表联接&#xff0c;并使用 PHP 代码执…

MacOS下的Opencv3.4.16的编译

前言 MacOS下编译opencv还是有点麻烦的。 1、Opencv3.4.16的下载 注意&#xff0c;我们使用的是Mac&#xff0c;所以ios pack并不能使用。 如何嫌官网上下载比较慢的话&#xff0c;可以考虑在csdn网站上下载&#xff0c;应该也是可以找到的。 2、cmake的下载 官网的链接&…

Kibana 本地安装使用

一 Kibana简介 1.1 Kibana 是一种数据可视化工具&#xff0c;通常需要结合Elasticsearch使用&#xff1a; Elasticsearch 是一个实时分布式搜索和分析引擎。 Logstash 为用户提供数据采集、转换、优化和输出的能力。 Kibana 是一种数据可视化工具&#xff0c;为 Elasticsear…

#Js篇:JSON.stringify 和 JSON.parse用法和传参

JSON.stringify 和 JSON.parse 1. JSON.stringify JSON.stringify 方法将一个 JavaScript 对象或数组转换为 JSON 字符串。 基本用法 const obj { name: "Alice", age: 25 }; const jsonString JSON.stringify(obj); console.log(jsonString); // 输出: {"…

基于大数据爬虫数据挖掘技术+Python的网络用户购物行为分析与可视化平台(源码+论文+PPT+部署文档教程等)

#1024程序员节&#xff5c;征文# 博主介绍&#xff1a;CSDN毕设辅导第一人、全网粉丝50W,csdn特邀作者、博客专家、腾讯云社区合作讲师、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老…

【Android、IOS、Flutter、鸿蒙、ReactNative 】实现 MVP 架构

Android Studio 版本 Android Java MVP 模式 参考 模型层 model public class User {private String email;private String password;public User(String email, String password) {this.email = email;this.password = password;}public String getEmail() {return email;}…

android 使用MediaPlayer实现音乐播放--获取音乐数据

前面已经添加了权限&#xff0c;有权限后可以去数据库读取音乐文件&#xff0c;一般可以获取全部音乐、专辑、歌手、流派等。 1. 获取全部音乐数据 class MusicHelper {companion object {SuppressLint("Range")fun getMusic(context: Context): MutableList<Mu…

Android kotlin之配置kapt编译器插件

配置项目目录下的gradle/libs.versions.toml文件&#xff0c;添加kapt配置项&#xff1a; 在模块目录下build.gradle.kt中增加 plugins {alias(libs.plugins.android.application)alias(libs.plugins.jetbrains.kotlin.android)// 增加该行alias(libs.plugins.jetbrains.kotl…

【FAQ】HarmonyOS SDK 闭源开放能力 —Share Kit

1.问题描述&#xff1a; 使用系统分享组件分享本地文件&#xff0c;点击分享菜单下方的“另存为” 将要分享的文件分享至系统文件管理中&#xff0c;在文件管理中查看分享进来的文件为0B。尝试了3种uri的写法都不行&#xff0c;代码如下&#xff1a; const uri getContext()…

音视频入门基础:MPEG2-TS专题(7)——FFmpeg源码中,读取出一个transport packet数据的实现

一、引言 从《音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;3&#xff09;——TS Header简介》可以知道&#xff0c;TS格式有三种&#xff1a;分别为transport packet长度固定为188、192和204字节。而FFmpeg源码中是通过read_packet函数从一段MPEG2-TS传输流/TS文件中读…

HarmonyOs DevEco Studio小技巧31--卡片的生命周期与卡片的开发

Form Kit简介 Form Kit&#xff08;卡片开发服务&#xff09;提供一种界面展示形式&#xff0c;可以将应用的重要信息或操作前置到服务卡片&#xff08;以下简称“卡片”&#xff09;&#xff0c;以达到服务直达、减少跳转层级的体验效果。卡片常用于嵌入到其他应用&#xff0…