当前位置: 首页 > 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: 开散列/哈希桶…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

深入浅出Diffusion模型:从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...