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

Vue 3.0 TypeScript支持

Vue CLI 提供内置的 TypeScript 工具支持。

#NPM 包中的官方声明

随着应用的增长,静态类型系统可以帮助防止许多潜在的运行时错误,这就是为什么 Vue 3 是用 TypeScript 编写的。这意味着在 Vue 中使用 TypeScript 不需要任何其他工具——它具有一流的公民支持。

#推荐配置

 
  1. // tsconfig.json
  2. {
  3. "compilerOptions": {
  4. "target": "esnext",
  5. "module": "esnext",
  6. // 这样就可以对 `this` 上的数据属性进行更严格的推断`
  7. "strict": true,
  8. "jsx": "preserve",
  9. "moduleResolution": "node"
  10. }
  11. }

请注意,必须包含 strict: true (或至少包含 noImplicitThis: true,它是 strict 标志的一部分) 才能在组件方法中利用 this 的类型检查,否则它总是被视为 any 类型。

参见 TypeScript 编译选项文档查看更多细节。

#开发工具

#项目创建

Vue CLI 可以生成使用 TypeScript 的新项目,开始:

 
  1. # 1. Install Vue CLI, 如果尚未安装
  2. npm install --global @vue/cli@next
  3. # 2. 创建一个新项目, 选择 "Manually select features" 选项
  4. vue create my-project-name
  5. # 3. 如果已经有一个不存在TypeScript的 Vue CLI项目,请添加适当的 Vue CLI插件:
  6. vue add typescript

请确保组件的 script 部分已将语言设置为 TypeScript:

 
  1. <script lang="ts">
  2. ...
  3. </script>

#编辑器支持

对于使用 TypeScript 开发 Vue 应用程序,我们强烈建议使用 Visual Studio Code,它为 TypeScript 提供了很好的开箱即用支持。如果你使用的是单文件组件 (SFCs),那么可以使用很棒的 Vetur extension,它在 SFCs 中提供了 TypeScript 推理和许多其他优秀的特性。

WebStorm 还为 TypeScript 和 Vue 提供现成的支持。

#定义 Vue 组件

要让 TypeScript 正确推断 Vue 组件选项中的类型,需要使用 defineComponent 全局方法定义组件:

 
  1. import { defineComponent } from 'vue'
  2. const Component = defineComponent({
  3. // 已启用类型推断
  4. })

#与 Options API 一起使用

TypeScript 应该能够在不显式定义类型的情况下推断大多数类型。例如,如果有一个具有数字 count property 的组件,如果试图对其调用特定于字符串的方法,则会出现错误:

 
  1. const Component = defineComponent({
  2. data() {
  3. return {
  4. count: 0
  5. }
  6. },
  7. mounted() {
  8. const result = this.count.split('') // => Property 'split' does not exist on type 'number'
  9. }
  10. })

如果你有一个复杂的类型或接口,你可以使用 type assertion 对其进行强制转换:

 
  1. interface Book {
  2. title: string
  3. author: string
  4. year: number
  5. }
  6. const Component = defineComponent({
  7. data() {
  8. return {
  9. book: {
  10. title: 'Vue 3 Guide',
  11. author: 'Vue Team',
  12. year: 2020
  13. } as Book
  14. }
  15. }
  16. })

#注释返回类型

由于 Vue 声明文件的循环特性,TypeScript 可能难以推断 computed 的类型。因此,你可能需要注释返回类型的计算属性。

 
  1. import { defineComponent } from 'vue'
  2. const Component = defineComponent({
  3. data() {
  4. return {
  5. message: 'Hello!'
  6. }
  7. },
  8. computed: {
  9. // 需要注释
  10. greeting(): string {
  11. return this.message + '!'
  12. }
  13. // 在使用setter进行计算时,需要对getter进行注释
  14. greetingUppercased: {
  15. get(): string {
  16. return this.greeting.toUpperCase();
  17. },
  18. set(newValue: string) {
  19. this.message = newValue.toUpperCase();
  20. },
  21. },
  22. }
  23. })

#注释 Props

Vue 对定义了 type 的 prop 执行运行时验证。要将这些类型提供给 TypeScript,我们需要使用 PropType 强制转换构造函数:

 
  1. import { defineComponent, PropType } from 'vue'
  2. interface ComplexMessage {
  3. title: string
  4. okMessage: string
  5. cancelMessage: string
  6. }
  7. const Component = defineComponent({
  8. props: {
  9. name: String,
  10. success: { type: String },
  11. callback: {
  12. type: Function as PropType<() => void>
  13. },
  14. message: {
  15. type: Object as PropType<ComplexMessage>,
  16. required: true,
  17. validator(message: ComplexMessage) {
  18. return !!message.title
  19. }
  20. }
  21. }
  22. })

如果你发现验证器没有得到类型推断或者成员完成不起作用,那么用期望的类型注释参数可能有助于解决这些问题。

#与组合式 API 一起使用

在 setup() 函数中,不需要将类型传递给 props 参数,因为它将从 props 组件选项推断类型。

 
  1. import { defineComponent } from 'vue'
  2. const Component = defineComponent({
  3. props: {
  4. message: {
  5. type: String,
  6. required: true
  7. }
  8. },
  9. setup(props) {
  10. const result = props.message.split('') // 正确, 'message' 被声明为字符串
  11. const filtered = props.message.filter(p => p.value) // 将引发错误: Property 'filter' does not exist on type 'string'
  12. }
  13. })

#类型声明 ref

Refs 根据初始值推断类型:

 
  1. import { defineComponent, ref } from 'vue'
  2. const Component = defineComponent({
  3. setup() {
  4. const year = ref(2020)
  5. const result = year.value.split('') // => Property 'split' does not exist on type 'number'
  6. }
  7. })

有时我们可能需要为 ref 的内部值指定复杂类型。我们可以在调用 ref 重写默认推理时简单地传递一个泛型参数:

 
  1. const year = ref<string | number>('2020') // year's type: Ref<string | number>
  2. year.value = 2020 // ok!

TIP

如果泛型的类型未知,建议将 ref 转换为 Ref<T>

#类型声明 reactive

当声明类型 reactive property,我们可以使用接口:

 
  1. import { defineComponent, reactive } from 'vue'
  2. interface Book {
  3. title: string
  4. year?: number
  5. }
  6. export default defineComponent({
  7. name: 'HelloWorld',
  8. setup() {
  9. const book = reactive<Book>({ title: 'Vue 3 Guide' })
  10. // or
  11. const book: Book = reactive({ title: 'Vue 3 Guide' })
  12. // or
  13. const book = reactive({ title: 'Vue 3 Guide' }) as Book
  14. }
  15. })

#类型声明 computed

计算值将根据返回值自动推断类型

 
  1. import { defineComponent, ref, computed } from 'vue'
  2. export default defineComponent({
  3. name: 'CounterButton',
  4. setup() {
  5. let count = ref(0)
  6. // 只读
  7. const doubleCount = computed(() => count.value * 2)
  8. const result = doubleCount.value.split('') // => Property 'split' does not exist on type 'number'
  9. }
  10. })

相关文章:

Vue 3.0 TypeScript支持

Vue CLI 提供内置的 TypeScript 工具支持。 #NPM 包中的官方声明 随着应用的增长&#xff0c;静态类型系统可以帮助防止许多潜在的运行时错误&#xff0c;这就是为什么 Vue 3 是用 TypeScript 编写的。这意味着在 Vue 中使用 TypeScript 不需要任何其他工具——它具有一流的公…...

STM8S系列基于IAR标准外设printf输出demo

STM8S系列基于IAR标准外设printf输出demo&#x1f4cc;STM8S/A标准外设库&#xff08;库版本V2.3.1&#xff09;&#x1f4cd;官网标准外设库&#xff1a;https://www.st.com/zh/embedded-software/stsw-stm8069.html ⛳注意事项 &#x1f6a9;在内存空间比较有限的情况下&am…...

PMP项目管理项目质量管理

目录1 项目质量管理概述2 规划质量管理3 管理质量4 控制质量1 项目质量管理概述 项目质量管理包括把组织的质量政策应用于规则、管理、控制项目和产品质量要求&#xff0c;以满足相关方目标的各个过程。项目质量管理还将以组织的名义支持过程的持续改进活动。 核心概念 质量是…...

前缀和总结

前缀和是一个常用的算法技巧,通常用于求解数组或序列的区间和。 具体来说,假设有一个长度为n的数组a,我们可以预处理出一个长度为n+1的前缀和数组s,其中s[i]表示原数组a前i个元素的和,即: s[i] = a[0] + a[1] + ... + a[i-1] 这样一来,对于任意的区间[l, r],我们可以…...

0109二分图-无向图-数据结构和算法(Java)

文章目录1 概念2 API3 分析和实现4 测试5 总结后记1 概念 二分图是一种能将所有结点分为两部分的图&#xff0c;其中图的每条边所连接的两个顶点都分别属于不同的部分。 2 API public classBipartiteBipartite(Graph G)预处理函数public booleanisBipartitle()是否是二分图pub…...

计算机网络题库---选择题刷题训练(100多道精品)

第一章 概述 1.下列四项内容中&#xff0c;不属于Internet&#xff08;因特网&#xff09;基本功能是___D_____。 A.电子邮件 B.文件传输 C.远程登录 D.实时监测控制 2.Internet是建立在____C_____协议集上的国际互联网络。 A.IPX B.NetBEUI C.TCP/IP …...

16、字符串生成器

目录 &#xff08;1&#xff09;append()方法 &#xff08;2&#xff09;insert(int offset, arg)方法 &#xff08;3&#xff09;delete(int start , int end)方法 创建成功的字符串对象&#xff0c;其长度是固定的&#xff0c;内容不能被改变和编译。虽然使用“”可以达到…...

docker基本命令-容器

容器 基本概念 镜像&#xff08;Image&#xff09;和容器&#xff08;Container&#xff09;的关系&#xff0c;就像是面向对象程序设计中的 类 和 实例 一样&#xff0c;镜像是静态的定义&#xff0c;容器是镜像运行时的实体。容器可以被创建、启动、停止、删除、暂停等。 容…...

QT入门基础(一)

文章目录零.Qt背景1.什么是Qt2.Qt的发展史3.Qt的优势4.Qt应用一.第一个Qt程序0.项目创建1.main函数文件2.类头文件3.pro文件4.qt命名规范二.Qt按钮1.按钮创建和父子关系2.按钮常用api3.Qt窗口坐标体系4.对象树模型零.Qt背景 1.什么是Qt Qt是一个跨平台的C图形用户界面应用程序…...

WattOS:一个稳又快的轻量级 Linux 发行版

导读Linux 领域里的每个人不是听说过就是使用过某个轻量级的 Linux 发行版。大家都知道我们不断追求的是&#xff1a;占用内存少&#xff0c;配置资源要求低&#xff0c;包含一个轻量级的桌面环境&#xff08;或者窗口管理器&#xff09;&#xff0c;并且提供和其他发行版相似的…...

Java调用Python脚本:轻松实现两种语言的互操作性

Java和Python都是非常流行的编程语言&#xff0c;它们都有自己的优点&#xff0c;但也有自己的局限性。在编写应用程序时&#xff0c;我们可能需要使用两种语言来共同完成一项任务。在这种情况下&#xff0c;Java需要调用Python脚本来解决某些问题&#xff0c;同时利用Java和Py…...

未系安全带识别系统 yolo

未系安全带识别系统通过pythonyolo智能视频分析技术&#xff0c;未系安全带识别算法对画面中高空作业人员未系安全带行为进行监测&#xff0c;未系安全带识别算法监测到人员未穿戴安全带时&#xff0c;立即通知后台人员及时处理触发告警。Yolo算法采用一个单独的CNN模型实现end…...

(七十六)大白话MySQL是如何根据成本优化选择执行计划的?(上)

之前已经给大家讲解清楚了 MySQL 在执行单表查询时候的一些执行计划&#xff0c;比如说const、ref、range、index、all之类的&#xff0c;也讲了多表关联的时候是如何执行的&#xff0c;本质其实就是先查一个驱动表&#xff0c;接着根据连接条件去被驱动表里循环查询&#xff0…...

DSRC技术

DSRC(Dedicated Short Range Communication)专用短程通信 定位 是V2X领域存在的两大通信技术之一&#xff08;另一个为LTE-V2X&#xff09;。 所属技术路线 与这两大技术相对应&#xff0c;是V2X无线通信技术的两大技术路线&#xff1a; IEEE 802.11p 本是04年指定的一个通…...

_面经问题_

一、Java编程语言 Java语言有哪些特点? JVM vs JDK vs JRE 什么是字节码? 采用字节码的好处是什么? 为什么不全部使用AOT呢? 为什么说Java语言"编译与解释并存"? Oracle JDK vs OpenJDK Java和C的区别? 注释有哪几种形式? 标识符和关键字的区别是什么? Jav…...

刷题记录(2023.3.6 - 2023.3.11)

我很喜欢这周的感觉&#xff0c;前两道题对着 wp 简略复现了一下&#xff0c;由于以前都是自己学习&#xff0c;对一些稍微多、稍微难的题都会马上避开&#xff0c;笨小孩逃避太久了&#xff0c;有些事逃不掉&#xff0c;总得面对&#xff0c;开始往往很难&#xff0c;多花点时…...

14 Day:同步锁与操作系统输入输出

前言&#xff1a;在上一期的线程章节中&#xff0c;我们的线程输出貌似有大问题&#xff0c;今天我们便要来学习同步锁来解决这个问题&#xff0c;同时再次基础上拿下键盘输入&#xff0c;实现操作系统的输入和输出。从今天开始我们的操作系统不在是一块“看板”了&#xff01;…...

Gradle 的下载安装教程

Gradle 8.0.1 下载安装教程笔者的环境&#xff1a; Java 17.0.1 Gradle 8.0.1 Windows 10 教育版 64位 在继续阅读本教程之前&#xff0c;需要先完成 JDK 的安装。JDK 需要选择 8 及以上的版本。关于 JDK 的安装&#xff0c;可见笔者的另一篇博客&#xff1a; Java 的下载安…...

「Python 基础」常用模块

文章目录1. 内建模块datetimecollectionsnamedtuple()dequedefaultdictOrderedDictChainMapCounterbase64structhashlib摘要算法摘要的应用hmacitertoolscontextlib\_\_enter\_\_ 和 \_\_exit\_\_contextmanagerclosingurllibGETPOSTHandlerXMLDOMSAXHTMLParser2. 第三方模块Pi…...

Java【二叉搜索树和哈希表】详细图解 / 模拟实现 + 【Map和Set】常用方法介绍

文章目录前言一、二叉搜索树1、什么是二叉搜索树2、模拟实现二叉搜索树2.1, 查找2.2, 插入2.3, 删除3、性能分析二、模型三、哈希表1、什么是哈希表1.1, 什么是哈希冲突1.2, 避免, 解决哈希冲突1.2.1, 避免: 调节负载因子1.2.2, 解决1: 闭散列(了解)1.2.3, 解决2: 开散列/哈希桶…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...