Type { ... } is not assignable to type 'SomeClass'

[colinblaise]

Using vue-tsc 0.40.13, vue 2.7.9, and using the options api.

I have a class called ActionList that I am assigning in data() like so:

data() {
  return {
    actionList: new ActionList([]),
  }
},
...

Viewing the type when hovering over actionList correctly shows ActionList.

However, hovering over this.actionList shows a destructured representation of ActionList (fine, nbd)

The problem is that the template is throwing a type error.

This error is shown when I set the component's prop definition to either:

props: {
    actionList: {
      type: Object as PropType<ActionList>,
      required: true,
    },
}

or

props: {
    actionList: {
      type: ActionList,
      required: true,
    },

Has anyone experienced similar issues? Perhaps I just need additional configuration.

Note

Doing the following suppresses the error, but vue-tsc complains about this

[lukemovement]

Everything passed to a component via the props is wrapped in a deep read only type. This results in non public properties being made public. I know this bug has been previously raised on the Vue Github repo so they are aware of it, however I'm not sure if it is fixable at this current time.

Alternative solutions:

• Cast the actionList variable to any instead of using the ActionList type

:actionList="(actionList as any)"

• Wrap the actionList property in a computed property and cast the return type

export default {
  computed: {
    computedActionList(): ActionList {
      return this.actionList as ActionList;
    }
  }
}

[colinblaise]

Thanks, I gave up pretty much immediately after posting this and just wrapped it in a computed, casting it exactly as you described.

I’ve been opting for using <script setup> for new components which doesn’t have this particular issue I believe, since I can define the props via an interface using ‘defineProps’.