typescript配合vue的实际使用

vue 对 props 进行复杂类型验证的时候，就直接用 PropType 进行强制转换， data 中返回的数据也能在不显式定义类型的时候推断出大多类型， computed 也只用返回类型的计算属性即可，代码清晰，逻辑简单，同时也保证了 vue 结构的完整性。

Composition API

const temp = ref<number | string>('9')

interface Employee {
name: string
class?: string
age: number
}
const yant = reactive({name:'李念',age:22})
const yant: Employee = reactive({name: '婷宇' ,age:21})
const yant = reactive({name:'淰婷',age:1,class: '大班'}) as Employee

### 注释

自定义Hooks

vue3借鉴react hooks开发了Composition API ，所有CompositionApi 可以刻自定义封装hooks

import { ref } from '/@modules/vue'   
import useCount from './useCount' 


interface Range {
 min?:number,
 max?:number
}
interface Result {
  current: Ref<number>,
  inc: (delta?:number) => void,
  dev: (delta?:number) => void,
  set: (value number) => void,
  reset: ()=> void
}

export default {
name: 'CountDemo',
props: { msg: String },
setup() {
const { current: count, inc, dec, set, reset } = useCount(2, { min: 1, max: 15 }) 
const msg = ref('Demo useCount') 
return { count, inc, dec, set, reset, msg } 
} 
}
//`useCount源码`
export default function useCount(initialVal: number,range?:Range):Result {  
const current = ref(initialVal);
const increament = (delta:number): void => {  
  if(typeof delta === 'number') {
    current.value +=delta
  } else {  
    current.value +=1 
  }
 }
const set = (value:number) :void=> {  
  current.value = value
 }
watch(current,(newVal:number,oldVal:number)=> {
 if(newVal === oldVal) return  
 if(range && range.min && newVal < range.min) {  
    current.value = range.min
   }
 if(range && range.max && newVal > range.max) {
    current.value = range.max
  }
 })

}

自定义钩子 对入参和返回类型进行了定义，入参的Range和返回的Result 反别用一个接口来指定、

好处：使用自定义钩子时ide会自定提示哪些参数是必填项，各个参数类型，防止业务逻辑出错

尾声AnyScript

为什么叫`anyscript`,因为很多人刚开始使用typescript时很喜欢使用any类型，失去了TypeScript的类型检查意义