This is the 21st day of my participation in Gwen Challenge

Vue3 uses React hooks to create the Composition API, which means that the Composition API can also use custom hooks to wrap counter logic in TypeScript style

Hooks (useCount) :

First let’s see how this hooks work:

import { ref } from '/@modules/vue'
import  useCount from './useCount'
 
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
    }
  }
}
Copy the code

The resulting effect is:

Paste useCount source code:

import { ref, Ref, watch } from 'vue' interface Range { min? : number, max? : number } interface Result { current: Ref<number>, inc: (delta? : number) => void, dec: (delta? : number) => void, set: (value: number) => void, reset: () => void } export default function useCount(initialVal: number, range? : Range): Result { const current = ref(initialVal) const inc = (delta? : number): void => { if (typeof delta === 'number') { current.value += delta } else { current.value += 1 } } const dec = (delta? : number): void => { if (typeof delta === 'number') { current.value -= delta } else { current.value -= 1 } } const set = (value: number): void => { current.value = value } const reset = () => { current.value = initialVal } watch(current, (newVal: number, oldVal: number) => { if (newVal === oldVal) return if (range && range.min && newVal < range.min) { current.value = range.min } else if (range && range.max && newVal > range.max) { current.value = range.max } }) return { current, inc, dec, set, reset } }Copy the code

Analysis of the source code

The input and return types of the hooks function are defined by an interface. The input Range and return Result of the hooks function are specified by an interface. The ide automatically prompts you which parameters are required when using useCount. What are the types of each parameter to prevent business logic errors.

Next, we added TypeO type guard checking to the two functions that add inc and decrement dec, because the incoming delta value is not very deterministic in certain scenarios, such as calling a method from template, where type checking might fail. The type passed in is a native Event.

Do weigh in hand wrap up work, have don’t understand although ask, I am free will reply of

Big guys, interested can pay attention to my public number duck, now or single digit, wronged…

Lazy people, do not want to map, hope to help you

Public number: small he growth, the Buddha department more text, are their own once stepped on the pit or is learned things

Interested little partners welcome to pay attention to me oh, I was: he Small Life. Everybody progress duck together

Narrative:

  • 12 ~ 18K front-end interview will ask what?
  • The shift from outsourcing to self-employment | 2021 mid-year summary

Technology,

Chaotic series

  • Uniapp Configures ios Universal Link and associate Domains

Vue series

  • The same login and registration interface? Teach you to do a cool!
  • Vue3’s setup and Ref syntax
  • Provide and inject vue3
  • Vue3 + vite + vant + typescript – Day 1
  • Vue3 + TS Encapsulates request request, storage cache, and Config request information. – The next day
  • Vue3 + TS Package bottom Tabbar – Day 3
  • Vue3 + TS Canvas for Bezier curve wave effects – Day 4

The typescript series

  • On day one, data types and vscode work with Typescript
  • The next day, interface and Readonly properties
  • Typescript Day 3 – Functions
  • Typescript Day 4 – Type inference, joint types, and type assertions
  • Day 5 – Classes and interfaces
  • Day 6 – Generics/generic constraints/Generics with classes and interfaces
  • Typescript Day 7 – Type aliases and cross types
  • Day 8 – Declaring files, built-in types

The react – native series

  • React-native lifecycle details
  • [React-native]JSX and RN styles and differences from the Web
  • [React -native] Mobx [React -native] Mobx [React -native] Mobx