TypeScript 在 Vue.js 中的应用指南

news2024/11/15 2:07:30

在这里插入图片描述

在前端开发中,TypeScript 和 Vue.js 的组合越来越受到青睐。TypeScript 的强类型系统和 Vue.js 的组件化架构相得益彰,可以帮助你编写更可靠和易维护的代码。如果你已经掌握了 TypeScript 的基本语法,但不太确定怎么将它与 Vue.js 配合使用,本文将带你一步步理解如何在 Vue.js 项目中应用 TypeScript,提升你的开发效率。

为组件的props标注类型

import type { PropType } from 'vue'
const props = defineProps<{
foo: string
bar?: number
}>()
interface Props {
foo: string
bar?: number
}
//第二种
//const props1 = defineProps<Props>()
//第三种
//const props2 = defineProps({

// book: Object as PropType<Book>

// })

当使用基于类型的声明时,我们失去了为 props 声明默认值的能力。这可以通过 withDefaults 编译器宏解决:

export interface Props {

msg?: string

labels?: string[]

}

const props = withDefaults(defineProps<Props>(), {

msg: 'hello',

labels: () => ['one', 'two']

})

为组件的 emits 标注类型

ref() 标注类型

// 推导得到的类型:Ref<number | string>
const year = ref<string | number>('2020')
const year1: Ref<string | number> = ref('2020')
//如果想没有undefined 必须要给默认值
const n = ref<number>() //Ref<number | undefined>
const n1 = ref<number>(1)//Ref<number>

reactive() 标注类型

import { reactive } from 'vue'

  

interface Book {

title: string

year?: number

}

  

const book: Book = reactive({ title: 'Vue 3 指引' })

computed() 标注类型

const double = computed<number>(() => { // 若返回值不是 number 类型则会报错 })

为事件处理函数标注类型

在处理原生 DOM 事件时,应该为我们传递给事件处理函数的参数正确地标注类型。让我们看一下这个例子

<script setup lang="ts">
function handleChange(event) {
// `event` 隐式地标注为 `any` 类型
console.log(event.target.value)
}

function handleChange(event: Event) {
console.log((event.target as HTMLInputElement).value)
}
</script>
<template>
<input type="text" @change="handleChange" />
</template>

为 provide / inject 标注类型

import { provide, inject } from 'vue'

import type { InjectionKey } from 'vue'

  

const key = Symbol() as InjectionKey<string>

  

provide(key, 'foo') // 若提供的是非字符串值会导致错误

  

const foo = inject(key) // foo 的类型:string | undefined

//或
const foo = inject<string>('foo') // 类型:string | undefined
//提供默认值
const foo = inject<string>('foo', 'bar') // 类型:string

为模板引用标注类型

模板引用需要通过一个显式指定的泛型参数和一个初始值 null 来创建

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const el = ref<HTMLInputElement | null>(null)
onMounted(() => {

el.value?.focus()

})

</script>

<template>

<input ref="el" />

</template>

为组件模板引用标注类型

<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const isContentShown = ref(false)

const open = () => (isContentShown.value = true)
defineExpose({

open

})
</script>

为了获取 MyModal 的类型,我们首先需要通过 typeof 得到其类型,再使用 TypeScript 内置的 InstanceType 工具类型来获取其实例类型:

<!-- App.vue -->

<script setup lang="ts">

import MyModal from './MyModal.vue'

  

const modal = ref<InstanceType<typeof MyModal> | null>(null)

  

const openModal = () => {

modal.value?.open()

}

</script>

如果对你有所帮助就点个关注吧

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

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

相关文章

opencv 实现两个图片的拼接去重功能

基础知识介绍 cv::Mat 是OpenCV库中用来表示图像和矩阵数据的核心类之一。它是一个多维数组&#xff0c;可以存储图像像素数据、矩阵数据以及其他类型的数据。以下是关于 cv::Mat 类的一些详细解释&#xff1a; 构造函数&#xff1a;cv::Mat 类有多个构造函数&#xff0c;可以用…

JavaWeb(后端)

Maven Apache Maven 是一个项目管理和构建工具&#xff0c;它基于项目对象模型(POM)的概念&#xff0c;通过一小段描述信息来管理项目的构建。 Maven的作用 依赖管理&#xff1a;方便快捷的管理项目依赖的资源(jar包)&#xff0c;避免版本冲突问题。 统一项目结构&#xff…

Leetcode22括号生成(java实现)

今天分享的题目是Leetcode22括号生成&#xff0c;具体的题目描述如下&#xff1a; 本道题我们使用的解法是回溯。 解题思路&#xff1a; 我们主要是对括号出现的可能性进行一个收集。 我们以n2举例子&#xff0c;如下图 如果想要合法&#xff0c;那么一定是左括号开始&#…

golang学习笔记05——golang协程池,怎么实现协程池?

推荐学习文档 golang实战大纲golang优秀开发常用开源库汇总golang学习笔记01——基本数据类型golang学习笔记02——gin框架及基本原理golang学习笔记03——gin框架的核心数据结构golang学习笔记04——如何真正写好Golang代码&#xff1f; 协程池是一种用于高效处理任务的机制&…

Claude的小白入门指南

要想快速上手Claude AI&#xff0c;其实并没有那么复杂。作为新一代的AI助手&#xff0c;Claude致力于为用户提供高效、无害、透明的交互体验。这篇入门指南将从Claude AI的特点、主要功能和如何实际操作等几个方面为大家做一个详细的介绍。 Claude AI是什么&#xff1f; Claud…

ssh之登录服务器后,自动进入目录(四十七)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a; 多媒体系统工程师系列【…

0成本实现.NET Web API 8.0项目内网映射

1.背景 最近在学习CICD&#xff0c;里面会有用到内网映射的使用场景。为了加深对内网映射实操的记忆。我实操了下基于.Net 8.0的内网映射&#xff0c;并支持互联网访问。本文主要介绍了在win11下安装路由侠&#xff0c;并将.net 8.0发布到win11&#xff0c;项目运行、路由侠配…

【MiniMax】中国文生视频模型再添一员大将!

千呼万唤始出来&#xff01; 一直以低调示人的 MiniMax 终于举办了他们从成立以来的第一次公开伙伴日活动。 本次伙伴日上&#xff0c;MiniMax发布了 视频模型abab-video-1、音乐模型abab-music-1&#xff0c;更新 语音模型abab-speech-1。此外&#xff0c;MiniMax将在未来数周…

Windows10彻底关闭自带的防病毒功能

第1步:右下角,点开“windows安全中心” 第2步:切换到“病毒和威胁防护”,打开“管理设置” 第3步:将“实时防护”、“云提供的防护”、“自动提交样本”和“篡改防护”四个选项开关关闭。 第4步:按下win键+R键->打开“运行”窗口->输入命令“gpedit.msc”->“确…

2024国赛数学建模-模拟火算法(MATLAB 实现)

模拟退火算法 1.1 算法原理 模拟退火算法的基本思想是从一给定解开始 ,从邻域 中随机产生另一个解 ,接受 Metropolis准则允许目标函数在 有限范围内变坏 ,它由一控制参数 t决定 ,其作用类似于物 理过程中的温度 T,对于控制参数的每一取值 ,算法持续进 行“产生 —判断 —接受…

vue transition组件

可能不生效的几个注意点 选择器的优先级谨慎合并样式 显示三阶段和隐藏三阶段的class名 1、vue2中显示的初始阶段类名是&#xff1a;v-enter&#xff1b;隐藏的初始阶段类名是&#xff1a;v-leave2、v-enter-active、v-leave-active这两个 class 可以被用来定义动画的持续时间…

C# 删除Word文档中的段落

在编辑Word文档时&#xff0c;我们有时需要调整段落的布局、删除不必要的段落以优化文档的结构和阅读体验。本文将通过以下3个简单示例演示如何使用免费.NET库删除Word文档中的段落 。 目录 C# 删除Word中的指定段落 C# 删除Word中的所有段落 C# 删除Word中的空白段落 免费…

【运维监控】influxdb 2.0+telegraf 监控tomcat 8.5运行情况(2)

关于java应用的监控本系列有文章如下&#xff1a; 【运维监控】influxdb 2.0telegraf 监控tomcat 8.5运行情况 【运维监控】influxdb 2.0grafana 监控java 虚拟机以及方法耗时情况 【运维监控】Prometheusgrafana监控tomcat运行情况 【运维监控】Prometheusgrafana监控spring b…

vllm源码解析(三):块管理(BlockManager)

六 块管理器 6.1 块管理方法在调度系统中的应用 在第二篇文章对调度系统的分析中&#xff0c;我们可以看到调度系统中普遍都使用了块管理方法&#xff1a; _schedule_prefills ... # 比较当前seq需要的物理块,gpu可用物理块之间的数量关系. 决定是否能给当前seq_group分配物…

828华为云征文|部署内容管理系统 Joomla

828华为云征文&#xff5c;部署内容管理系统 Joomla 一、Flexus云服务器X实例介绍1.1 云服务器介绍1.2 应用场景1.3 核心竞争力 二、Flexus云服务器X实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 Joomla3.1 Joomla 介绍3.2 Docker 环境搭建3.3 Joomla 部署3.4 J…

阿里中间件——diamond

一、前言 最近工作不忙闲来无事&#xff0c;仔细分析了公司整个项目架构&#xff0c;发现用到了很多阿里巴巴集团开源的框架&#xff0c;今天要介绍的是中间件diamond. 二、diamond学习笔记 1、diamond简介 diamond是一个管理持久配置&#xff08;持久配置是指配置数据会持久化…

倒计时7天!CCS2024大模型安全与产业应用创新研讨活动诚邀你来

当下&#xff0c;“人工智能”已成为催生新质生产力的重要引擎&#xff0c;大模型在加速产业升级和经济增长的同时&#xff0c;也为网络安全带来了全新的机遇与挑战。「大模型安全与产业应用创新研讨活动」由百度安全、成都无糖信息联合承办&#xff0c;特邀云安全联盟CSA大中华…

Windows用户取消共享文件夹密码方法(Method for Windows Users to Cancel Shared Folder Password)

Windows用户取消访问共享文件夹密码方法 &#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您…

IP学习——oneday

1.什么是网络&#xff1f;为什么需要网络&#xff1f; 空间&#xff0c;时间&#xff1b;传统的邮件传输要考虑到距离&#xff0c;网络解决了空间距离&#xff08;太远&#xff09;、解决了时间问题&#xff08;旧音乐等&#xff09; 云:面向客户的虚拟化服务 运营商公司主营…

【运维监控】influxdb 2.0+telegraf 监控tomcat 8.5运行情况(1)

关于java应用的监控本系列有文章如下&#xff1a; 【运维监控】influxdb 2.0telegraf 监控tomcat 8.5运行情况 【运维监控】influxdb 2.0grafana 监控java 虚拟机以及方法耗时情况 【运维监控】Prometheusgrafana监控tomcat运行情况 【运维监控】Prometheusgrafana监控spring b…