vue3 使用typescript小结

   最近学习vue3 typescript，网上看了很多文章，汇总一下，分享给大家，希望会对大家有帮助。

     一. 为props标注类型

      defineProps()宏函数支持从它的参数中推导类型：

<script setup lang='ts'>import { defineProps } from 'vue'//运行时声明const props=defineProps({foo:{ type:String,required:true },bar: {type:Number}})//stringconst foo:string=props.foo// number | undefunedconst bar:number|undefined=props.bar</script>

这被称为运行时声明，传递给defineProps的参数作为运行时的props选项使用，推断出类型。

第二种方式，通过泛型参数来定义props的类型，这种方式更加直接：

<script setup lang='ts'>
import { defineProps } from 'vue'const props=defineProps<{foo:string,bar?:number
}>();//orinterface Props {foo:stringbar?:number
}const props2=defineProps<Props>()//string
const foo:string=props2.foo;
//number | undefined
const bar:number|undefined=props2.bar
</script>

这种被称为“基于类型声明”，编译器会尽可能的尝试根据类型参数推导出等价的运行时选项。这种方式不足之处在于，失去了定义props默认值的能力。为了解决这个问题，我们可以使用withDefaults编译器宏：

<script setup lang='ts'>
import { defineProps } from 'vue'interface Props {msg:stringlabels:string[]
}const props=withDefaults(definedProps<Props>(), {msg:'zhangsan',labels:['a','b']}</script>

 上面代码会被编译为等价的运行时props的default选项。

二. 为emits标注类型

   emit函数的类型标注也可以使用运行时声明或基于类型的声明：

<script setup lang='ts'>
import { defineEmits } from 'vue'//运行时
const emits=defineEmits({'changeEmit','updateEmit'})emits('changeEmit',5,'data')//基于类型
const emits=defineEmits<{
(e:'changeEmit',id:number,data:string):void
(e:'updateEmit',value:string):void
}>();</script>

我们可以看到，基于类型声明，可以使我们对所触发的事件的类型进行更细粒度的控制。

三. 为ref()标注类型

默认推倒类型

ref会根据初始化时的值自动推导其类型：

<script setup lang='ts'>
import { ref } from 'vue'const year=ref(2023)//TS Error:不能将类型sting分配给类型
//number
year.value='2023'</script>

通过接口指定类型:

<script setup lang='ts'>
import { ref }  from 'vue'
import type { Ref } from 'vue'const year:Ref<string|number>=ref(2023)
//success
year.value='2023'//or 通过泛型指定类型
const year1=ref<string|number>=ref(2023)
//success
year1.value=2023//未指定初始值
const year2=ref<string|number|undefined>()
//success
year2.value=2023
year2.value='2023'
</script>

注意：如果你指定了一个泛型参数但没有给出初始值，那么最后得到的就是一个包含undefined的联合类型。

四. 为reactive标准类型

默认推导类型

reactive也会隐式的从它的参数中推导出类型：

<script setup lang='ts'>
import { reactive } from 'vue'cost temp=reactive({title:'为vue3做标注'
})//error number
temp.title=2023
//success string
temp.tilte='abc'
</script>

通过接口指定类型

要显式的指定一个reactive变量的类型，我们可以使用接口：

<script setup lang='ts'>
import { reactive } from 'vue'interface Book {tilte:stringyear?:number
}const book:Book=reactive({title:'程序员的自我修养'})
//or
// const book=reactive<Book>({title:'程序员的自我修养'})
//sucess
book.year=2023</script>

五. 为computed()标注类型

默认推导类型

computed()会自动从其计算函数的返回值上推导类型：

<script setup lang='ts'>
import { ref,computed } from 'vue'const count=ref(0)//推导得到类型：ComputedRef<number>
const double=computed(()=> count.value * 2)//TS Error:Property 'split' does not exist on type
//number
const result=double.value.split('')</script>

通过泛型指定类型

你还可以通过泛型参数显式指定类型：

<script setup lang='ts'>
import { ref,computed } from 'vue'
import type { Ref } from 'vue'const count:Ref<sting>=ref(0)const double=computed<number>(()=> count.value * 2 )</script>

六：为事件处理函数标注类型

在处理原生DOM事件时，应该给时间处理函数的参数正确地标注类型：

<script setup lang='ts'>function handleChange(event) {//event 隐性的标注为 any 类型console.log(event.target.value)
}</script><template><input type='text' @change='handleChange'/>
</template>

当没有类型标注时，这个event参数会隐性的标注为any类型。这也会在tsconfig.json中配置了“strict”:true 或 "noImplicitAny":true时报出一个ts错误。因此，建议显示的为事件处理函数的参数标注类型。此外，你可能需要显式的强制转换event上的属性：

<script setup lang='ts'>function handleChange(event:Event):void
{console.log((event.target as HTMLInputElement).value)
}</script><template><input type='text' @change='handleChange'/>
</template>

七：为provide/inject标注类型

provide和inject 通常会在不同的组件中运行。要正确的为注入的值标注类型，Vue提供了一个InjectKey类型，它是一个继承自Symbol的泛型类型，可以用来在提供者和消费者之间同步植入值的类型。

<script setup lang='ts'>
import { provide,inject } from 'vue'
import type { InjectionKey } from 'vue'const key=Symbol as InjectionKey<string>//若提供的是非字符串值会导致错误
provide(key,'foo')//foo的类型：string | undefind
const foo=inject(key)</script>

建议将注入的key的类型保存在一个单独的文件中，这样它就可以被多个组件导入。

当使用字符串注入key时，注入值的类型是unkown，需要通过泛型参数显式的声明：

<script setup lang='ts'>
import { inject } from 'vue'//foo的类型：string |  undefined
const foo=inject<string>('key')</script>

注意：注入的值仍然可以是undefined，因为无法保证提供者一定会在运行时提供provide这个值。当提供了一个默认值后，这个undefined的类型就可以被移除。

<script setup lang='ts'>
import { inject } from 'vue'//类型 string
const foo=inject<string>('key','foo')</script>

如果你确定该值始终被提供，则可以强制转化该值。

<script setup lang='ts'>
import { inject } from 'vue'const foo=inject('key') as string</script>

八. 为组件模板引用标注类型

 有时，我们需要为一个子组件添加一个模板ref，以便调用它公开的方法。比如：我们有一个MyComponent子组件，它有一个打开的模态框的方法：

<script setup lang='ts'>
import {ref,defineExpose} from 'vue'const isContentShown=ref(0)
const open=()=> isContentShown.value===truedefineExpose({open
})</script>

为了获取MyComponent的类型，我们首先需要通过typeof得到其类型，再使用TypeScript内置的InstanceType工具类型来获取其实例类型。

//pranet.vue
<script setup lang='ts'>
import MyComponent from './MyComponent.vue'const modal=ref<InstanceType<typeof MyComponent > | null>(null)const openModal=()=> modal.value?.open()
</script>