Vue3配合TypeScript的使用

Vue
Vue
更新日期:   2024-05-15
文章字数:   1.2k
阅读时长:   5 分
阅读次数:  

Vue3配合TypeScript的使用

这篇文章主要总结了Vue3如何配合TypeScript使用

一.defineProps<>() 泛型函数

1.defineProps<>()泛型函数接收值

defineProps < {
        money: number
        car ? : string
    } > ()

2.使用withDefaults指定默认值

const props = withDefaults(defineProps < {
       money: number
       car ? : string
   } > (), {
       car: '小黄车'
   })

3.使用解构+defineProps响应式语法糖

const {
      money,
      car = '小黄车'
  } = defineProps < {
      money: number
      car ? : string
  } > ()

该写法需要在vite.config.js中添加以下配置

import {
    defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue({
            reactivityTransform: true,
        }),
    ],
})

二.defineEmits<>() 泛型函数

对于子传父时，在子组件中的传递数据时，数据类型检测的校验

//e表示事件类型
const emit = defineEmits<{
    (e:'自定义的事件名',传播数据名:传播数据类型):void
}>()

三.ref<数据类型>(数据) 泛型函数

指定ref中的数据类型

方式1：ref是一个内置的泛型函数，通过泛型函数指定数据类型

import {ref} from 'vue'
cosnt m = ref<number>(10)

方式2：通过Vue内置的泛型工具可以指定初始值的类型 Ref

import {Ref} from 'vue'
const m:Ref<number> = ref(10)

四.reactive<数据类型>(数据) 泛型函数

（之前怎么用，现在就怎么用）

五.computed<数据类型>(数据) 泛型函数

（之前怎么用，现在就怎么用）

六.如何获取事件对象e的类型

通过<h1 @mousemove="e => hh">获取面板位置</h1>的形式拿到e的事件类型

再通过e: MouseEvent指定他的类型

七.ref 操作 DOM

! 非空断言，会排除掉undefined和null

? 可选链接，表示前面不为undefined或null时，才会向后面取值

如何获取DOM类型？ 一定是原生标签
例如：const o = document.querySelector('img')，这样能查看img类型

示例：

<template>
  <div>
    <img src="https://pinia.vuejs.org/logo.svg" ref="imgRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const imgRef = ref<HTMLImageElement | null>(null)

onMounted(() => {
  console.log(imgRef.value?.src)
}),

</script>

八.ref 操作组件

如何获取组件类型？ 一定是组件标签，不能使用在原生标签

InstanceType是vue3内置的泛型工具 首字母大写

语法：InstanceType<typeof Children>

例如：const childCmp = ref<InstanceType<typeof Children> | null>(null)

示例：

<template>
  <div>
    <section>
      <h3>App</h3>
      <button @click="handleClick">click</button>
      <hr />
      <Children ref="childCmp" />
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Children from './Children.vue';

const childCmp = ref<InstanceType<typeof Children> | null>(null)

const handleClick = () => {
  childCmp.value?.log();
}
</script>

九. ！和 ？

！和 ？取值的时候，一般可以通用

！和 ？赋值的时候，一般用!

十.TS 类型声明文件

.ts 文件。

  • 既包含类型信息又可执行代码，可以被编译为 .js 文件，然后，执行代码。
  • 用途：编写程序代码的地方。

.d.ts 文件。

  • 只包含类型信息的类型声明文件，专门为 JS 提供类型信息。
  • 类型声明文件不会生成 .js 文件，仅用于提供类型信息，
    在 .d.ts 文件中不允许出现可执行的 JS 代码，只用于提供类型。

总结：.ts 是 implementation （代码实现文件）；
.d.ts 是 declaration（类型声明文件），如果要为已有的 JS 库提供类型信息，可以使用 .d.ts 文件。

自定义的类型声明

如果多个 Vue 文件中都用到同一个类型，此时可以创建 .d.ts 文件提供该类型，实现类型共享。

1.创建 src/types/data.d.ts 类型声明文件。

2.创建需要共享的类型，并使用 export 导出（TS 中的类型也可以使用 import/export 实现模块化功能）。

3.在需要使用共享类型的 Vue 文件中，通过 import 导入即可（.d.ts 后缀导入时，直接省略）。

如何为已有 JS 文件提供类型声明？

说明：TS 项目中也可以使用 .js 文件，在导入 .js 文件时，
TS 会自动加载与 .js 同名的 .d.ts 文件，以提供类型声明。

declare 关键字，用于类型声明，为 .js 文件中已存在的变量声明类型，
而不是创建一个新的变量。

1.对于 type、interface 等这些明确就是 TS 类型的（只能在 TS 中使用的），
可以省略 declare 关键字。

2.对于 let、function 等具有双重含义（在 JS、TS 中都能用），
应该使用 declare，明确指定此处是类型声明。

十一. Axios 配合TS

语法：axios.get<类型<{数据：类型}>()

axios.get 的第一个泛型参数可以控制res.data的类型

文章作者: 冷杨威
文章链接: https://DOMandBOM.github.io/star/star/2023/0720512.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 冷杨威 !
Vue
  目录
-->