Vue3中的TypeScript (干货)

一. defineProps写法

父组件 (如下)

子组件 (如下)

// 非ts语法
defineProps({
  father: {
    type: String,
    required: true,
    default: '默认'
  }
})

// Ts语法  使用 '属性?' 代表属性可选, 不写?则代表必传
defineProps<{
  father: string,
  msg?: string // 属性可选
}>()

// 使用 withDefaults 函数绑定默认值
const props = withDefaults(defineProps<{
  father: string,
  msg?: string
}>(), {
  father: '默认值',
  msg: '默认msg'
})

二. defineEmits写法

父组件 (如下)

子组件 (如下)

// 写法1  有几个事件就写几个限制, e表示事件名, 后面就是依次  参数名:类型
const emit = defineEmits<{
  (e: 'getChild', content: number, thing: string): void
}>()

// 写法2 简洁写法  3.3+版本
// 事件名作为键, 后面是 参数:类型 列表数组
const emit = defineEmits<{
  getChild: [content: number, thing: string]
}>()

// 调用传参
emit('getChild', 12, '西瓜')

三. ref

type Person = {
  name: string,
  age: number,
  content?: string
}
// 一样通过泛型指定类型
const obj = ref<Person[]>([
  {
    name: '刘德华',
    age: 18,
    content: '我是刘德华'
  },
  {
    name: '周华健',
    age: 28,
    content: '我是周华健'
  }
])

// 尽量使用ref 少使用reactive, 要注意reactive在更新数据时, 丢失响应式问题 模板不更新

四. computed

// 计算属性 在绝大部分场景都不需要手动指定类型 会自动推导
let objName = computed<string[]>(() => {
  return obj.value.map((item) => item.name)
})

五. 指定事件对象类型

如何获取对应事件的类型:
方法一: console.log(e) 控制台打印事件对象
方法二: 在template中事件绑定处, 传入$event, 鼠标悬浮上 弹出类型

const handleClick = (e: MouseEvent) => {
  console.log(e)
  console.log(e.pageX, e.pageY)
}

六. 使用ref获取DOM

<img ref="ggBao" src="xxxxxxxxxxxxxxx" alt=""/>

// 指定为 相应元素类型 | null
const ggBao = ref<HTMLImageElement | null>(null)

// 修改图片src
const setggBao = () => {
  ggBao.value && (ggBao.value.src = 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0602%2Fd4a710aaj00qu271l001bc000ht00ddm.jpg&thumbnail=660x2147483647&quality=80&type=jpg')
}

七. 可选链操作符 ?.

// 以前写法
if(ggBao.value) {
    console.log(ggBao.value?.src)
}

// 使用可选链操作符
// 可以让我们不需要确定每个属性是否真的有值, 如果某个环节没有值, 整个表达式返回undefined
console.log(ggBao.value?.src)

八. 非空断言 !.

一定100%确定有值才能使用, 一旦值为空, 程序会报错! ! !

//告诉ts这个变量一定有值, 不会为空, 避免ts报红
console.log(ggBao.value!.src)