What input type should I use for code which combines text and numbers? How to declare in TypeScript to avoid errors?

Question

I'm using VueJs (coming from React so I'm new), and I have this input which contains a code => combinations of vowels and numbers. I'm having 2 problems, first of all

I'm not sure which be the correct type for the input, and, in second instance my var defined as number | string is throwing error.

I know it might be a kind of stupid problem but I'm new with Vue & TypeScript so it would be really helpful if you can tell me the correct way to do it.

Here's the code:

<template>
  <form>
    <label>Code</label>
    <input 
      type="text"
      placeholder="enter a code using only vowels and numbers"
      required
      maxlength="15"
      minlength="7"
      v-model="codeValue"  <!-- Error here -->
      @blur="handleFocus"
      
       />
    <span v-if="focused">You should only enter vowels and numbers.</span>
  </form>
</template>

<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'InputValidations',
  data() {
    return {
      emailValue: '' as string, 
      selectedNumber:0 as number,
      codeValue: '' as string | number, 
      focused: false as boolean
    }
  }
})
</script>

The error comes from v-model="codeValue" and says:

Argument of type 'string | number' is not assignable to parameter of type 'string | null | undefined'.
  Type 'number' is not assignable to type 'string'.VueDX/TS(2345)

Answer 1

I think the problem is you're using VueDX, which I've noticed does not work well at all.

Switch to Volar, the officially recommended VS Code extension, especially for TypeScript support. Also install the TypeScript Vue Plugin for Volar.