Vue3学习记录（八）--- 组合式API和TypeScript

一、基础内容

1、简介

​ TypeScript是JavaScript的超集，是一种强类型的语言。Vue3官方的项目创建命令npm create vue@latest，提供了基于Vite且使用TypeScript的项目选项。

​ 在基于Vite的项目中，开发服务器和打包器将只会对 TypeScript 文件执行语法转译，将其转换成JavaScript，而不会执行类型检查，因此在开发时推荐使用 VScode + Vue-Official 来获取即时的TS类型错误反馈。

​ Vue - Official 扩展取代了我们之前为 Vue 2 提供的官方 VSCode 扩展 Vetur。如果你的VSCode之前已经安装了 Vetur，请确保在 Vue 3 的项目中禁用它。

​ 关于TypeScript的相关知识，大家可以查看以下博客：TypeScript相关知识。

2、在单文件组件中使用TS

​ 在项目引入TS之后，如果要在单文件组件中使用TS，则需要在<script>标签上增加lang="ts"的属性即可：

<script setup lang="ts">
// 启用了 TypeScript
</script>

​ 在单文件组件中，在使用了<script setup lang="ts">之后，组件模板中的表达式也同样受到TS的类型支持，可以在模板表达式中使用TS的语法：

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

<template>
  <!-- 需要类型断言 指定 x 的类型为number 否则会报类型错误 -->
  {
  
  { (x as number).toFixed(2) }}
</template>

二、组合式API和TypeScript

1、ref

简单数据类型：

​ 在使用ref声明简单数据类型的变量时，TS支持根据初始值自动推导响应式变量的默认类型：

<script setup lang="ts">
  import {
     
      ref } from 'vue'

  // 默认类型为推导出来的 Ref<number> 
  const count = ref(0)

  // 给变量赋值一个number类型的数据 正常运行
  count.value = 1;

  // 给变量赋值一个其他类型的数据会报错 
  count.value = '1';
</script>

​ 除了自动推导之外，还可以借助Vue提供的Ref为变量指定类型，尤其是给变量指定一个复杂的类型时，例如联合类型等：

<script setup lang="ts">
  import {
     
      ref } from 'vue'
  // 导入Ref类型
  import type {
     
      Ref } from 'vue'

  // 给变量指定一个联合类型 使其同时支持number和string两种类型
  const count: Ref<number | string> = ref(0)
  // 可以设置为number数据
  count.value = 1;
  // 也可以设置为string数据
  count.value = '1';
</script>

​ 也可以通过给ref设置一个泛型参数，用来覆盖默认的推导结果：

<script setup lang="ts">
  import {
     
      ref } from 'vue'

  // 给ref指定一个泛型参数 使变量同时支持number和string两种类型
  // 推导得到的类型：Ref<string | number>
  const count = ref<number | string>(0)

  // 可以设置为number数据
  count.value = 1;
  // 也可以设置为string数据
  count.value = '1';
</script>

​ 如果给ref设置一个泛型参数，但没有设置初始值，那最终得到的类型中将会包含undefined：

<script setup lang="ts">
  import {
     
      ref } from 'vue'
  // 给ref指定一个泛型参数 且未设置初始值
  // 推导得到的类型：Ref<string | number | undefined>
  const count = ref<number | string>()
  // 可以设置为number数据
  count.value = 1;
  // 也可以设置为string数据
  count.value = '1';
  // 也可以设置为undefined数据
  count.value = undefined;
</script>

复杂数据类型：

​ 如果通过ref声明的变量是复杂类型的数据，如对象、数组等等，TS也会根据初始值自动推导响应式变量的默认类型：

<script setup lang="ts">
  import {
     
      ref } from 'vue'

  // 默认类型为推导出来的 Ref<{ title: string; sex: string; }>
  const obj = ref({
     
      name: '张三',sex: "男" })
  // 可以设置为string数据
  obj.value.name = '李四'
  // 初始值上不存在的属性会报错 只有已经存在的属性才能被编辑
  obj.value.age = 16
  // 直接修改对象时 必须字段都相同 否则就就会报错
  // 缺少字段会报错
  obj.value = {
     
      name: '李四' }
  // 多余字段会报错
  obj.value = {
     
      name: '李四',age: 16 }

  // 默认类型为推导出来的 Ref<number[]>
  const arr = ref([1, 2, 3])
  // 可以添加number数据
  arr.value.push(4)
  // 直接替换数组时 元素类型必须匹配 否则就就会报错
  // 类型不匹配会报错
  arr.value = ['1','2','3'] 

  // 默认类型为推导出来的 Ref<(string | number)[]>
  const arr2 = ref([1, '2'])

  // 默认类型为推导出来的 Ref<(string | number | { order: number })[]>
  const arr3 = ref([1, '2', {
     
      order: 3 }])
</script>

​ 还可以结合TS的接口interface显式的指定一个复杂数据的类型，包括指定对象的类型、指定数组元素的类型等，可以借助Vue提供的Ref指定类型，也可以使用泛型参数来指定类型。

​ 但是如果设置泛型参数时未设置初始值 则最终变量的类型中会加上undefined。

<script setup lang="ts">
  import {
     
      ref