JavaScript component conversion to TypeScript: What is the type of props

Question

Migrating VueJS project from JavaScript + Options API to TypeScript + Composition API, I have gradually found equivalents of most of the stuff. One thing that I'm struggling with is the v-model feature. I found a good article on implementing it using Composition API, where author creates a composable function that can be reused in components that want to implement v-model. I'm trying to now write an equivalent function using TypeScript.

Here is the original JS code:

import { computed } from 'vue'
export function useModelWrapper(props, emit, name = 'modelValue') { 
  return computed({ 
    get: () => props[name], 
    set: (value) => emit(`update:${name}`, value) 
  })
}

My TS implementation looks like this:

import { computed, ComputedRef } from '@vue/composition-api'

export function useModelWrapper<T> (props: Record<string, unknown>, emit: (event: string, value: T) => void, name: 'modelValue') : ComputedRef {
  return computed({
    get: () => props[name],
    set: (value) => emit(`update:${name}`, <T>value)
  })
}

This compiles fine but Vue is not too happy about it. I get

No overload matches this call

error if I use this function in a component.

My suspicion is that the type of props in the TS version is not correct, but I was not able to figure out what type I should use there. I have tried it with Object, unknown and any, but none of them allows me to do props[name] in the getter (any does but TS complains that I shouldn't use any as the type of props).

What am I doing wrong here?

Edit

Here is the full error text:

{
    "resource": "../ProjectsDropdown.vue",
    "owner": "_generated_diagnostic_collection_name_#6",
    "code": "2769",
    "severity": 8,
    "message": "No overload matches this call.
Overload 1 of 3, '(options: ComponentOptionsWithoutProps<unknown, unknown, Data, {}, {}>): VueProxy<unknown, unknown, Data, {}, {}>', gave the following error.
Type '{ modelValue: PropType<Project>; }' is not assignable to type 'undefined'.
Overload 2 of 3, '(options: ComponentOptionsWithArrayProps<string, Data, Data, {}, {}, Readonly<{ [x: string]: any; }>>): VueProxy<Readonly<{ [x: string]: any; }>, Data, Data, {}, {}>', gave the following error.
Type '{ modelValue: PropType<Project>; }' is not assignable to type 'string[]'.
  Object literal may only specify known properties, and 'modelValue' does not exist in type 'string[]'.
Overload 3 of 3, '(options: ComponentOptionsWithProps<ComponentPropsOptions<Data>, Data, Data, {}, {}, ({ [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; ... 32 more ...; 
toLocaleString?: string | undefined; }) | ({} & { ...; })>): VueProxy<...>', gave the following error.
Type '{ modelValue: PropType<Project>; }' is not assignable to type 'ComponentPropsOptions<Data> | undefined'.
  Types of property 'modelValue' are incompatible.
    Type 'PropType<Project>' is not assignable to type 'Prop<unknown, unknown> | null | undefined'.
      Type 'new (...args: never[]) => Project & object' is not assignable to type 'Prop<unknown, unknown> | null | undefined'.
        Type 'new (...args: never[]) => Project & object' is not assignable to type 'new (...args: string[]) => Function'.
          Types of parameters 'args' and 'args' are incompatible.
            Type 'string' is not assignable to type 'never'.",
    "source": "Vetur",
    "startLineNumber": 59,
    "startColumn": 16,
    "endLineNumber": 119,
    "endColumn": 3
}

Edit 2

Here is how I'm using this function in a component:

<script lang='ts'>
export default defineComponent({
  ...
  import { useModelWrapper } from '../usemodelWrapper'
  props: {
    modelValue: Object as PropType<Project>
  },
  setup (props, { emit }) {
  return {
    selectedProject: useModelWrapper<Project>(props, emit, 'modelValue')
  }
})
</script>

@Eldar: props section has a property modelValue: Object as PropType<Project> and the object returned by setup() function has a member selectedProject: useModelWrapper(props, emit, 'modelValue') — dotNET
– dotNET, Commented Oct 21, 2021 at 6:22
I think the issue is , name: 'modelValue') part. This is a type declaration not a default value assignment. Try with it name = 'modelValue') — Eldar
– Eldar, Commented Oct 21, 2021 at 6:23
Please, update the question with the code where you use it. It's the most important part because it causes the error. If you use it like shown in the comment, the problem is that you don't use a generic — Estus Flask
– Estus Flask, Commented Oct 21, 2021 at 7:39

dotNET · Accepted Answer · 2021-10-22 16:25:04Z

2

After seeing your own answer, I feel like this could be even stricter.

import { computed, WritableComputedRef } from '@vue/composition-api'

export function useModelWrapper<TProps, TKey extends keyof TProps> (
  props: TProps,
  emit: (event: string, value: TProps[TKey]) => void,
  name: TKey = 'modelValue' as TKey
) : WritableComputedRef<TProps[TKey]> {
  return computed<TProps[TKey]>({
    get: () => props[name],
    set: (value: TProps[TKey]) => emit('input', value)
  })
}

I haven't tested it with Vue specifically but that function should restrict which key you can pass it as third argument and correctly infer the return type depending on which name was passed instead of a union of all values of props.

edited Oct 22, 2021 at 16:25

dotNET

35.7k29 gold badges176 silver badges276 bronze badges

answered Oct 22, 2021 at 14:06

emeraldsanto

4,7611 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dotNET Over a year ago

Yep. This works and infers types correctly. I'll add missing imports for sake of completeness and accept it as answer.

Boern Over a year ago

For Vue3 where do I get WritableComputedRef from? import { WritableComputedRef } from "vue-demi"; ? thanks! Also it should be update:${name} IMHO

dotNET · Accepted Answer · 2021-10-22 16:26:19Z

Just in case it helps someone down the road, it turned out that I was using wrong version of PropType in the component to define my v-model prop. The real PropType class should be imported like this:

import { PropType } from '@vue/composition-api'

and not:

import Vue, { PropType } from 'vue'

Edit

If it helps anyone, here is how I finally implemented a strongly-typed v-model using Composition API and TypeScript:

import { computed, WritableComputedRef } from '@vue/composition-api'

export interface IIndexable<T> { [key: string]: T }

export function useModelWrapper<T> (props: IIndexable<T>, emit: (event: string, value: T) => void, name = 'modelValue') : WritableComputedRef<T> {
  return computed<T>({
    get: () => props[name] as T,
    set: (value: T) => emit('input', value as T)
  })
}

You can then import it in any component like this:

export default defineComponent({
  name: 'ProjectsDropdown',
  props: {
    value: Object as PropType<Project>
  },
  setup (props, { emit }) {
    const selectedProject = useModelWrapper<Project>(props, emit, 'value')

    return { selectedProject }
  }
}

and bind it to whatever you want to bind in your component's template.

Please note that this works in Vue 2.x. For Vue 3, you'll want to change the name of value prop to modelValue and emit('input', value as T) with emit('update:modelValue', value) in the above code.

Edit 2

See @emeraldsanto's answer below. It provides an even better implementation.

Brent · Accepted Answer · 2022-03-14 01:50:44Z

This is an extension of @emeraldsanto's answer but the type inferences are the Vue 3 component emit strings

export function useModelWrapper<TProps extends Record<string, unknown> | { modelValue: unknown },
                                TKey extends keyof TProps & string = 'modelValue',
                                TEmit extends (event: `update:${TKey}`, value: TProps[TKey]) => void = (event: `update:${TKey}`, value: TProps[TKey]) => void > (
  props: TProps,
  emit: TEmit,
  name: TKey = 'modelValue' as TKey
) : WritableComputedRef<TProps[TKey]> {
  return computed<TProps[TKey]>({
    get: () => props[name],
    set: (value: TProps[TKey]) => emit(`update:${name}` as `update:${TKey}`, value)
  })
}

use like

const props = defineProps<{
  modelValue: string
  foo?: number
}> ()

const emit = defineEmits<{
  (e: 'update:modelValue', id: string): void
  (e: 'update:foo', value: number | undefined): void
}> ()
const value = useModelWrapper(props, emit)
const fooValue = useModelWrapper(props, emit, 'foo')

Collectives™ on Stack Overflow

JavaScript component conversion to TypeScript: What is the type of props

Edit

Edit 2

3 Answers 3

2 Comments

Edit

Edit 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

Edit 2

3 Answers 3

2 Comments

Edit

Edit 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related