【总结】Typescript 结合Vue3的写法

小五Five

已于 2023-08-11 09:45:45 修改

阅读量390

点赞数

分类专栏： Typescript vue 文章标签： typescript vue.js javascript

于 2023-08-11 09:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_42373175/article/details/132181357

版权

vue 同时被 2 个专栏收录

28 篇文章 2 订阅

订阅专栏

Typescript

4 篇文章 0 订阅

订阅专栏

前言

Vue 3与TypeScript结合使用能够提供类型检查和智能提示，增强了代码的可靠性和可维护性。本文整理了项目开发时用到的结合写法，供学习和参考。

一、结合写法

1. ref

在原有的 ref() 之间加 <> ，并且在 <> 里跟ts类型。

ref() 也会隐式地从它的参数中推导类型。

const msg = ref<string>('hello')

import type { Ref } from 'vue'
const msg2: Ref<number> = ref(100)

type Todo = {
  id: number
  name: string
  done: boolean
}
const list = ref<Todo[]>([])

const list: Ref<Todo[]> = ref([])

2. reactive

在声明变量时，在 : 后跟ts类型。

reactive() 也会隐式地从它的参数中推导类型。

import { reactive } from 'vue'

// 推导得到的类型：{ title: string }
const book = reactive({ title: 'Vue 3 指引' })

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

import { reactive } from 'vue'

interface Book {
  title: string
  year?: number
}

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

不推荐使用 reactive() 的泛型参数，因为处理了深层次 ref 解包的返回值与泛型参数的类型不同。

3. defineProps

在原有的 defineProps() 之间加 <> ，并且在 <> 里跟ts类型。

// 注意这种方式无法设置可选参数的默认值
const props = defineProps<{
  name?: string
  phoneNumber: number
  userInfo: object
  tags: string[]
}>()

// 指定默认值
withDefaults(defineProps<{
  size?: number
  labels?: string[]
}>(), {
  size: 3,
  labels: () => ['default label']
})

上面写法太笨拙，可以使用响应式语法糖解构 + defineProps 就行

注意：目前需要显式地选择开启，因为它还是一个实验性特性。

// vite.config.ts
export default defineConfig({
  plugins: [
    vue({
      reactivityTransform: true,
    }),
  ],
});

const { money, car = "宝马车" } = defineProps<{
  money: number
  car?: string
}>();

4. defineEmits

在原有的 defineEmits() 之间加 <> ，并且在 <> 里跟ts类型。

const emit = defineEmits(['change'])
const handleChange = () => {
  emit('change', 'itcast', '你好')
}

interface Emits {
  (e: "update:modelValue", value: string): void;
  (e: "change", value: string): void;
}
//定义控件事件
const emit = defineEmits<Emits>();

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

5. computed

computed() 会自动从其计算函数的返回值上推导出类型：

import { ref, computed } from 'vue'

const count = ref(0)

// 推导得到的类型：ComputedRef<number>
const double = computed(() => count.value * 2)

// => TS Error: Property 'split' does not exist on type 'number'
const result = double.value.split('')

你还可以通过泛型参数显式指定类型：

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

6. 事件处理函数

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

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

没有类型标注时，这个 event 参数会隐式地标注为 any 类型。这也会在 tsconfig.json 中配置了 "strict": true 或 "noImplicitAny": true 时报出一个 TS 错误。因此，建议显式地为事件处理函数的参数标注类型。此外，你可能需要显式地强制转换 event 上的属性：

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

7. html元素引用

模板引用需要通过一个显式指定的泛型参数和一个初始值 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>

8. 组件实例

<!-- 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>

二、拓展补充

1. keyof 操作符

通过索引类型查询能够获取给定类型中的属性名类型。索引类型查询的结果是由字符串字面量类型构成的联合类型，该联合类型中的每个字符串字面量类型都表示一个属性名类型。

type Point = { x: number; y: number };
type P = keyof Point; // type P = 'x' | 'y'

如果类型具有字符串或数字索引签名，则 keyof 将返回这些类型：

type Arrayish = { [n: number]: unknown };
type A = keyof Arrayish; // type A = number

type Mapish = { [k: string]: boolean };
type M = keyof Mapish; // type M = string | number
type Todo = {
  id: number;
  text: string;
  done: boolean;
}

const todo: Todo = {
  id: 1,
  text: "Learn TypeScript keyof",
  done: false
}
// extends 关键字约束 K 类型必须为 keyof T 联合类型的子类型。 'id' | 'text' | 'done'
function prop<T extends object, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const id = prop(todo, "id"); // const id: number
const text = prop(todo, "text"); // const text: string
const done = prop(todo, "done"); // const done: boolean

2. typeof 操作符

用于获取一个值的类型信息。typeof操作符有两种主要的使用方式：

typeof表达式：用于获取一个值的类型字符串。

const num = 42;
const typeOfNum = typeof num; // 类型为 "number"

const obj = { name: 'Alice', age: 25 };
const typeOfObj = typeof obj; // 类型为 "object"

注意：typeof操作符返回的是一个字符串字面量，表示该值的类型。常见的返回值包括 "number"、"string"、"boolean"、"object"、"function"等。

typeof类型守卫：用于在条件语句中判断一个变量的类型。

function printLength(value: string | number) {
  if (typeof value === 'string') {
    console.log(value.length); // 在这个条件块中，value被推断为 "string" 类型
  } else {
    console.log('Value is not a string.');
  }
}

在上述代码中，通过使用typeof进行类型检查，可以在不使用显式类型断言的情况下，根据不同的类型执行不同的代码逻辑。

需要注意的是，typeof操作符的结果在某些情况下可能比较特殊，例如：

typeof null 的结果是 "object"，这是由于历史原因造成的。
对于函数类型，typeof会返回 "function"。

3. InstanceType 工具类型

该工具类型能够获取构造函数的返回值类型，即实例类型。这里面的T必须是一个构造函数。

class C {
  x = 0;
}
type T0 = InstanceType<typeof C>;         // C

type T1 = InstanceType<new () => object>; // object

type T2 = InstanceType<any>;              // any

type T3 = InstanceType<never>;            // any

type T4 = InstanceType<string>;           // 编译错误
type T5 = InstanceType<Function>;         // 编译错误