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: numbercar?: string
}>()

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

<script lang="ts" setup>
// 使用ts的泛型指令props类型
const { money, car = '小黄车' } = defineProps<{money: numbercar?: 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: numbername: stringdone: 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: stringage: 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.pageXmouse.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

【TypeScript】TS与Vue相关推荐

学习TypeScript(TS)，这一篇就足够了
一.TypeScript 简介 1.什么是 TypeScript? 官方文档 TypeScript 本质上是向 JavaScript 语言添加了「可选的静态类型」和「基于类的面向对象」编程,它相当于是 ...
ts watch路由参数变化_TypeScript基础（六）：TS 在 Vue 中的用法，data，生命周期，methods，computed，props，watch，$emit...
其实 ts 在 vue 的环境下,我们经常用的一个东西就是上一篇博客讲的装饰器. 装饰器一般情况下有三种用途: 1,装饰整个类. 2,装饰某一个方法. 3,装饰某一个属性. 而这三种用途对 vue 来 ...
TypeScript深度剖析:Vue项目中应用TypeScript？
一.前言与link类似在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基于vue-class-component库而来,这个库vue官 ...
TypeScript (TS
1.Node卸载 1)控制面板卸载 2)安装位置删除文件夹 3)c盘用户下去删除.npmrc文件 2.下载Nodejs 最新下载地址: 下载 | Node.js 中文网安装: 双击打开,下一步,同 ...
使用 typescript ，提升 vue 项目的开发体验（1）
此文已由作者张汉锐授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言:对于我们而言,typescript 更像一个工具官方指南从 vue2.5 之后,vue 对 ts ...
TS在vue中的应用
TIP typescript 配合 Vue3 composition-api 使用 TypeScript 与组合式 API | Vue.js script 加上 lang="ts" ...
ts 在vue中的使用总结
依旧是只有标题,好像只有这样才能慢慢补坑 / ** ************************** 终于来补坑了 *************************** ** / 变量 ...
vue3 vite ts引入vue文件报错 ts(2307)
vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行. 官方文档有说明:http://vue.dragonlm.com/guide ...
typescript 判断异步执行已经结束_vue进阶系列——用typescript玩转vue和vuex
用过vue的朋友大概对vuex也不陌生,vuex的官方解释是专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. ...

【TypeScript】TS与Vue

TypeScript与Vue

文章目录

defineProps与Typescript

defineEmits与Typescript

ref与Typescript

reactive与Typescript

computed与Typescript

事件处理与Typescript

Template Ref与Typescript

可选链操作符

非空断言

【TypeScript】TS与Vue相关推荐

最新文章

热门文章