Passing VueJS Prop into TypeScript class component

Question

I have a simple typescript component class that requires one prop:

export default class ColorsPallet extends Vue {
        @Prop({type: String, required: true}) readonly name!: string;
        private readonly view: StorageItem;
        private readonly stored: StorageItem;
        private readonly colors: ColorItems;

        constructor() {
            super();

            this.colors = db.colors[this.name]['items'];
            this.storedColor = new StorageItem(this.name + '-stored-color', localStorage, db.colors[this.name]['default']);
            this.viewColor = new StorageItem(this.name + '-view-color', sessionStorage, this.storedColor.get());
        }
}

I would love to initialize this class in a different typescript component class to get a specific instance variable:

constructor() {
    super();

    const colors = new ColorsPallet();
    console.log(color.$data.viewColor.get());
}

This gives me an obvious error:

[Vue warn]: Missing required prop: "name"

(found in <Root>)

So I changed the initialization to:

const colors = new ColorsPallet({props: ['name']})

That still gives me a type error as I am not really passing anything:

[Vue warn]: Error in data(): "TypeError: Cannot read property 'items' of undefined"

(found in <Root>)

Without requiring a prop this code works perfectly for me in different cases. However I am not able to get this working with passing down a prop. How do I go about it?

Edit:

Passing prop like this also does not work:

const colors = new ColorsPallet({
  name: 'foo'
})

Results into this error:

TS2345: Argument of type '{ props: { name: string; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.   Types of property 'props' are incompatible.     Type '{ name: string; }' is not assignable to type 'string[] | RecordPropsDefinition<Record<string, any>> | undefined'.       Type '{ name: string; }' is not assignable to type 'undefined'.

The type of required format:

/**
 * This type should be used when an array of strings is used for a component's `props` value.
 */
export type ThisTypedComponentOptionsWithArrayProps<V extends Vue, Data, Methods, Computed, PropNames extends string> =
  object &
  ComponentOptions<V, DataDef<Data, Record<PropNames, any>, V>, Methods, Computed, PropNames[], Record<PropNames, any>> &
  ThisType<CombinedVueInstance<V, Data, Methods, Computed, Readonly<Record<PropNames, any>>>>;

off topic but consider that TS class composition is deprecated from 2.6.x — Christian Carrillo
– Christian Carrillo, Commented Feb 6, 2020 at 21:05

Wes Harper · Accepted Answer · 2020-02-10 17:51:17Z

2

One solution would be to set a default value:

@Prop({type: String, required: true, default: 'foo'}) readonly name!: string;

However, in your above example I believe you would need:

const colors = new ColorsPallet({
  propsData: {
    name: 'foo'
  }
})

edited Feb 10, 2020 at 17:51

answered Feb 6, 2020 at 21:00

Wes Harper

1727 bronze badges

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

9 Comments

NiX Over a year ago

TS2345: Argument of type '{ props: { name: string; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.   Types of property 'props' are incompatible.     Type '{ name: string; }' is not assignable to type 'string[] | RecordPropsDefinition<Record<string, any>> | undefined'.       Type '{ name: string; }' is not assignable to type 'undefined'.

Wes Harper Over a year ago

Hmmm... I've never passed props to a component constructor, I'll update.

Wes Harper Over a year ago

Might be worthwhile to just do the default value though

NiX Over a year ago

Yeah, your answer is on good track, I will update my question a little bit so it is more specific to the core of the problem.

NiX Over a year ago

I could definetly set a default value and then set the name. However, I still believe it could be done in one step. What do you think?

|

Collectives™ on Stack Overflow

Passing VueJS Prop into TypeScript class component

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related