搭配 TypeScript 使用 Vue​

这篇具有很好参考价值的文章主要介绍了搭配 TypeScript 使用 Vue​。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

IDE 支持

  1. Volar 是官方的 VSCode 扩展,提供了 Vue 单文件组件中的 TypeScript 支持,还伴随着一些其他非常棒的特性
  2. TypeScript Vue Plugin 用于支持在 TS 中 import *.vue 文件。

配置 tsconfig.json

通过 create-vue 搭建的项目包含了预先配置好的 tsconfig.json。

手动配置 tsconfig.json 时,请留意以下选项:

  • compilerOptions.isolatedModules 应当设置为 true,因为 Vite 使用 esbuild 来转译 TypeScript,并受限于单文件转译的限制。
  • 如果你在构建工具中配置了路径解析别名,例如 @/* 这个别名被默认配置在了 create-vue 项目中,你需要通过 compilerOptions.paths 选项为 TypeScript 再配置一遍。

Volar Takeover 模式

在每个项目里我们都运行了两个语言服务实例:一个来自 Volar,一个来自 VSCode 的内置服务。这在大型项目里可能会带来一些性能问题。为了优化性能,Volar 提供了一个叫做“Takeover 模式”的功能。在这个模式下,Volar 能够使用一个 TS 语言服务实例同时为 Vue 和 TS 文件提供支持

  • 在当前项目的工作空间下,用 Ctrl + Shift + P (macOS:Cmd + Shift + P) 唤起命令面板。
  • 输入 built,然后选择“Extensions:Show Built-in Extensions”。
  • 在插件搜索框内输入 typescript (不要删除 @builtin 前缀)。
  • 点击“TypeScript and JavaScript Language Features”右下角的小齿轮,然后选择“Disable (Workspace)”。
  • 重新加载工作空间。Takeover 模式将会在你打开一个 Vue 或者 TS 文件时自动启用。

defineComponent()

为了让 TypeScript 正确地推导出组件选项内的类型,我们需要通过 defineComponent() 这个全局 API 来定义组件

import { defineComponent } from 'vue'

export default defineComponent({
  // 启用了类型推导
  props: {
    message: String
  },
  setup(props) {
    props.message // 类型:string | undefined
  }
})

为组件的 props 标注类型

为了生成正确的运行时代码,传给 defineProps() 的泛型参数必须是以下之一:

  1. defineProps<{ /*… */ }>()
  2. interface Props {/* … */} defineProps()
<script setup lang="ts">
const props = defineProps<{
  foo: string
  bar?: number
}>()
</script>

<script setup lang="ts">
interface Props {
  foo: string
  bar?: number
}

const props = defineProps<Props>()
</script>

withDefaults 编译器

为 props 声明默认值的能力。这可以通过 withDefaults 编译器宏解决:

export interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

复杂的 prop 类型

使用 PropType 工具类型:

import type { PropType } from 'vue'

const props = defineProps({
  book: Object as PropType<Book>
})

//其工作方式与直接指定 props 选项基本相同
import { defineComponent } from 'vue'
import type { PropType } from 'vue'

interface Book {
  title: string
  author: string
  year: number
}

export default defineComponent({
  props: {
    book: Object as PropType<Book>
  }
})

组件的 emits 标注类型

<script setup lang="ts">
// 运行时
const emit = defineEmits(['change', 'update'])

// 基于类型
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

ref() 标注类型

import { ref } from 'vue'
import type { Ref } from 'vue'

const year: Ref<string | number> = ref('2020')

year.value = 2020 // 成功!

或者,在调用 ref() 时传入一个泛型参数

// 得到的类型:Ref<string | number>
const year = ref<string | number>('2020')

year.value = 2020 // 成功!

reactive() 标注类型

要显式地标注一个 reactive 变量的类型,我们可以使用接口:

import { reactive } from 'vue'

interface Book {
  title: string
  year?: number
}

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

computed() 标注类型

通过泛型参数显式指定类型:

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

事件处理函数标注类型

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

<template>
  <input type="text" @change="handleChange" />
</template>


function handleChange(event: Event) {
  console.log((event.target as HTMLInputElement).value)
}

为 provide / inject 标注类型

Vue 提供了一个 InjectionKey 接口,它是一个继承自 Symbol 的泛型类型,可以用来在提供者和消费者之间同步注入值的类型:

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
当提供了一个默认值后,这个 undefined 类型就可以被移除:
const foo = inject<string>('foo', 'bar') // 类型:string
如果你确定该值将始终被提供,则还可以强制转换该值:
const foo = inject('foo') as string

模板引用标注类型

<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 的类型,我们首先需要通过 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>

如果组件的具体类型无法获得,或者你并不关心组件的具体类型,那么可以使用 ComponentPublicInstance。这只会包含所有组件都共享的属性,比如 $el。文章来源地址https://www.toymoban.com/news/detail-437371.html

import { ref } from 'vue'
import type { ComponentPublicInstance } from 'vue'

const child = ref<ComponentPublicInstance | null>(null)

到了这里,关于搭配 TypeScript 使用 Vue​的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vscode vue2 + volar 全局代码提示

    这几天更新vscode vetur的后  项目一直转loading加载不出来了,索性就直接换volar了。 一、基础配置 但是volar的配置在vue3和vue2里是不太一样的   需要一些额外的配置。记录一下踩坑。 首先vscode安装扩展 Vue Language Features (Volar) 、 TypeScript Vue Plugin (Volar)  并且卸载或者禁用掉原

    2024年02月16日
    浏览(43)
  • Vue3 + Vite + Ts自己封装的基础组件库发布npm ,npm安装使用(Volar )支持TS 类型提示功能(vite-plugin-dts 使用)

    在开发Vue3 + Ts项目时:使用自己二次封装的基础组件,没有 Ts类型提示 ,不能像 Element-plus 鼠标停在标签或者属性上就能提示当前组件有哪些属性(即props)及其属性的类型,如下图是 Element-plus 组件的 使用Vs Code Volar的提示: 此插件的作用:为打包的库里加入声明文件(即生

    2024年02月09日
    浏览(68)
  • 【必备】用VSCode开发Vue程序必备插件之一Vue Language Features (Volar)

    通过安装该插件 才能通过赚到编辑器中的符号 Vue Language Features 是为 Vue、Vitepress 和 petite-vue 构建的语言支持扩展。这是基于@vue/reactivity按需计算一切,实现原生 TypeScript 语言服务级别性能。 [温馨提示] 创建 vue 维特斯 娇小的 vue3-eslint-stylelint-demo(Volar + ESLint + stylelint + husk

    2024年02月05日
    浏览(43)
  • Vue3项目中没有配置 TypeScript 支持,使用 TypeScript 语法

    1.安装 TypeScript:首先,需要在项目中安装 TypeScript。在终端中运行以下命令 2.创建 TypeScript 文件:在 Vue 3 项目中,可以创建一个以 .ts 后缀的文件,例如 MyComponent.ts。在这个文件中,可以使用 TypeScript 语法编写代码。 在上面的示例中,我们使用 defineComponent 函数来定义一个

    2024年02月15日
    浏览(37)
  • vscode中 vue3+ts 项目的提示失效,volar插件失效问题解决方案

    说起来很耻辱,从mac环境换到window环境,vscode的配置都是云端更新过来的,应该是一切正常才对,奇怪的是我的项目环境出现问题了,关于组件的ts和追踪都没有效果,再经过一上午的排查和试错后,终于被我解决,问题的原因是volar和ts环境之间的版本不匹配,下面来看下我

    2024年02月03日
    浏览(52)
  • vscode 之 工作区的应用(解决vue2插件vetur、vue3插件volar禁用启用问题)

    工作区???为什么要工作区??? 首先工作区简单理解就是vscode工作时的区域、范围; 延申一下,为什么要工作区???不同的环境需要用到不用的插件啊,设置啊等等,这个时候怎么实现,总不能写前端的时候也把java、c++需要的插件设置的什么打开(虽然应该可能大概

    2024年02月12日
    浏览(59)
  • react项目运行卡在编译:您当前运行的TypeScript版本不受@TypeScript eslint/TypeScript estree的官方支持

    错误信息具体如下: 搜索了一下,是typescript版本的问题,提示我版本需要在3.3.0和4.5.0中间,我查看了package.json,显示版本为4.1.3,然后一直给我提示我的版本是4.9.5,全局搜索一下,发现package-lock.json文件中typescript版本是4.9.5,那么两个文件有什么区别呢,如下: 两个都是依

    2024年01月24日
    浏览(53)
  • TypeScript 中【class类】与 【 接口 Interfaces】的联合搭配使用解读

    导读 : 前面章节,我们讲到过 接口(Interface)可以用于对「对象的形状(Shape)」进行描述。 本章节主要介绍接口的另一个用途,对类的一 部分行为进行抽象。 类配合实现接口 实现( implements )是面向对象中的一个重要概念。 一般来讲,一个类只能继承自另一个类 ,但

    2024年02月14日
    浏览(38)
  • 【python】搭配Miniconda使用VSCode

    现在的spyder总是运行出错,启动不了,尝试使用VSCode。 a. 确保Miniconda环境已经安装并且正确配置。 b. 打开VSCode,安装Python扩展。 打开VSCode,进入扩展市场(Extensions)(视觉上通常用四个平行的正方形表示),搜索“Python”,然后选择由Microsoft发布的那个扩展。点击安装。 c.

    2024年01月17日
    浏览(40)
  • 使用VSCode的 Dev Containers 插件搭配Docker 容器进行开发环境的搭建

    需要安装插件 https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers 安装Docker 这样做的好处 每一个项目可以运行一个容器,在容器内开发,相关之间node环境隔离,彻底解决本地包版本依赖关错乱问题 共用宿主机的git 配置, 如果用的是 alpine 版本的镜像,则没有

    2024年01月21日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包