typescript在vue3的一些运用

1.defineProps与Typescript运用

1.defineProps与vue默认的语法进行校验父传子的类型校验(普通写法)

<script setup >
const props =   defineProps({
   name: {
   		type: String,
    	required: true,
  		 },
 
    age: {
   		 type: Number,
     defulat: 18,
  	},
 });

</script>

2.defineProps与ts的泛型定义父传子的类型(ts写法)

<script setup lang="ts">
// 使用ts的泛型定义props类型 
const props  = defineProps<{
  name: string
  age?: number  //可选
}>()
</script>

3.props解构指定默认值(默认值时需要配置格外设置)

<script  setup lang="ts">
// 使用ts的泛型定义props类型
const { name, age = 18 } = defineProps<{
  name:  string
  age?: number
}>()
</script>

3.1在vite.config.js中,添加解构默认值配置

官方链接: vuejs.org/guide/extra…

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

2.defineEmits与Typescript运用

在子传父时路由ts进行类型的校验

1.defineEmits与vue3普通运行的声明

<script  setup >

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

</script>

2.defineEmits配合ts 泛型类型声明，实现准确的类型校验

<script  setup lang="ts">
    
const emit = defineEmits<{
  (e: 'changeName', name: string): void
  (e: 'changeAge', age: number): void
}>()


</script>

3.ref与Typescript运用

1.通过泛型指定value值类型,简单值类型可以利用类型推导,省略泛型

const name = ref<string>('zs')

//类型推导 string
const name = ref('zs')

2.复杂类型推荐利用指定的泛型

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

setTimeout(() => {
  list.value = [
    { id: 1, name: '小明'},
    { id: 2, name: '小红'}
  ]
})

3.ref组件与ts运用

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

//初始化时,泛型指定null或者HTMLHeadingElement 

//HTMLHeadingElement 可以通过创建H1标签获取到,见下图操作

const H1ref = ref<null | HTMLHeadingElement>(null);

//挂载时触发
onMounted(() => {
    //判断当ref属性已经在H1标签时修改内容
  if (H1ref.value) {
    H1ref.value.innerHTML = 'Ileye';
  }
});
</script>
<template>
     <!-- 挂载到组件ref属性上 -->
  <h1 ref="H1ref">你好啊</h1>
</template>
<style></style>

4.computed与Typescript运用

1.利用泛型指定computed类型,可以类型类型推断省略

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

let arr:number[]  = ref([1,2,3,4])

const arrLength = computed<number>(() => {
  return arr.value.filter((item) => item>3).length
})
console.log(arrLength.value)

</script>