【TypeScript】TS与Vue

TypeScript与Vue

文章目录

TypeScript与Vue
- defineProps与Typescript
- defineEmits与Typescript
- ref与Typescript
- reactive与Typescript
- computed与Typescript
- 事件处理与Typescript
- Template Ref与Typescript
- 可选链操作符
- 非空断言

参考链接：https://vuejs.org/guide/typescript/composition-api.html

vue3配合ts中，还需要额外安装一个vscode插件：Typescript Vue Plugin

在这里插入图片描述

defineProps与Typescript

目标：掌握defineProps如何配合ts使用

defineProps配合vue默认语法进行类型校验（运行时声明）

// 运行时声明
defineProps({
  money: {
    type: Number,
    required: true
  },
  car: {
    type: String,
    required: true
  }
})

defineProps配合ts的泛型定义props类型校验，这样更直接

// 使用ts的泛型指令props类型
defineProps<{
  money: number
  car?: string
}>()

props可以通过解构来指定默认值

<script lang="ts" setup>
// 使用ts的泛型指令props类型
const { money, car = '小黄车' } = defineProps<{
  money: number
  car?: string
}>()
</script>

如果提供的默认值需要在模板中渲染，需要额外添加配置

https://vuejs.org/guide/extras/reactivity-transform.html#explicit-opt-in

// vite.config.js
export default {
  plugins: [
    vue({
      reactivityTransform: true
    })
  ]
}

defineEmits与Typescript

目标：掌握defineEmit如何配合ts使用

defineEmits配合运行时声明

const emit = defineEmits(['change', 'update'])

defineEmits配合ts 类型声明，可以实现更细粒度的校验

const emit = defineEmits<{
  (e: 'changeMoney', money: number): void
  (e: 'changeCar', car: string): void
}>()

ref与Typescript

目标：掌握ref配合ts如何使用

通过泛型指定value的值类型，如果是简单值，该类型可以省略

const money = ref<number>(10)

const money = ref(10)

如果是复杂类型，推荐指定泛型

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

setTimeout(() => {
  list.value = [
    { id: 1, name: '吃饭', done: false },
    { id: 2, name: '睡觉', done: true }
  ]
})

reactive与Typescript

目标：掌握reactive配合typescript如何使用

// reactive 适合于明确属性的对象场景
type User = {
  name: string
  age: number
};
const obj: User = reactive({
  name: "zs",
  age: 18
});

computed与Typescript

目标：掌握computed配合typescript如何使用

通过泛型可以指定computed计算属性的类型，通常可以省略

const leftCount = computed<number>(() => {
  return list.value.filter((item) => item.done).length
})
console.log(leftCount.value)

事件处理与Typescript

目标：掌握事件处理函数配合typescript如何使用

const move = (e: MouseEvent) => {
  mouse.value.x = e.pageX
  mouse.value.y = e.pageY
}

<h1 @mousemove="move($event)">根组件</h1>

Template Ref与Typescript

目标：掌握ref操作DOM时如何配合Typescript使用

const imgRef = ref<HTMLImageElement | null>(null)

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

如何查看一个DOM对象的类型：通过控制台进行查看

document.createElement('img').__proto__

可选链操作符

目标：掌握js中的提供的可选链操作符语法

内容

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。
参考文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining

let nestedProp = obj.first?.second;
console.log(res.data?.data)
obj.fn?.()

if (obj.fn) {
    obj.fn()
}
obj.fn && obj.fn()

// 等价于
let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

非空断言

目标：掌握ts中的非空断言的使用语法

内容：

如果我们明确的知道对象的属性一定不会为空，那么可以使用非空断言 !

// 告诉typescript, 明确的指定obj不可能为空
let nestedProp = obj!.second;

注意：非空断言一定要确保有该属性才能使用，不然使用非空断言会导致bug