typeScript在vue项目中常见用法

关注

转载最新推荐文章于 2026-06-17 16:39:54 发布 242 阅读 AI 写同款· GEO 优化 ›

WebStorm + Vite + TypeScript + Vue3 项目别名配置全攻略：告别 ‘Cannot find module @/*‘ 错误本文详细解析了在WebStorm + Vite + TypeScript + Vue3项目中配置路径别名的完整方案，帮助开发者彻底解决'Cannot find module @/*'错误。通过五步配置流程，包括Vite、TypeScript和WebStorm的协同设置，确保开发和生产环境都能正确识别别名路径，提升开发效率。阅读详情

一，模板中的 TypeScript

在使用了 <script lang="ts"> 或 <script setup lang="ts"> 后，<template> 在绑定表达式中也支持 TypeScript。

<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  <!-- 出错，因为 x 可能是字符串 -->
  {{ x.toFixed(2) }}
</template>

可以使用联合类型强制转换解决此问题：

<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  {{ (x as number).toFixed(2) }}
</template>

二，为组件的`prop`标注类型

2.1当使用 `<script setup>` 时，这个 `defineProps()` 宏函数支持从它的参数中推导类型

<script setup lang="ts">
const props = defineProps({
  foo: { type: String, required: true },
  bar: Number
})

props.foo // string
props.bar // number | undefined
</script>

这被称之为运行时声明，因为传递给 defineProps() 的参数会作为运行时的 props 选项使用。

2.2 然而，通过泛型参数来定义 `prop` 的类型通常更直接

<script setup lang="ts">
const props = defineProps<{
  foo: string
  bar?: number
}>()
</script>

这被称之为“基于类型的声明”。编译器会尽可能地尝试根据类型参数推导出等价的运行时选项。

我们也可以将 prop 的类型移入一个单独的接口中：

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

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

2.3 `Prop` 默认值

当使用基于类型的声明时，我们失去了对 prop 定义默认值的能力。这可以通过目前实验性的响应性语法糖来解决：

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

// 对 defineProps() 的响应性解构
// 默认值会被编译为等价的运行时选项
const { foo, bar = 100 } = defineProps<Props>()
</script>

三，为组件的 `emit` 标注类型

在 <script setup> 中，emit 函数的类型标注可以通过运行时声明或类型声明进行

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

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