vue 3 composition api & typescript object keys

Question

Currently digging into Vue-3 composition api and wondering how to use types in detail (using TypeScript on top of vue).

The documentation isn't very accurate on this, since there is only a short description about how to do Strings. Of course according to that I could simply use type Object, but I wonder how to declare object properties, to tell TypeScript what keys belong to a related object - in class style api this could be done the TypeScript way ... is there any extended source about how to do properties in detail in composition api?

Maybe provide a little code snippet demonstrating what you're trying to achieve. An example can often illustrate a problem better than a long description. — Husam Elbashir
– Husam Elbashir, Commented Nov 24, 2020 at 14:02
In class style api I'd do it this way: @Prop() somePropertyName: { foo, bar }; So TypeScript/my IDE knows that my Object should contain the keys foo and bar. I could not find any description about how to achieve that using composition api — Irgend Son Hansel
– Irgend Son Hansel, Commented Nov 24, 2020 at 14:11
ok you need to use PropType. I'll give you an example below. — Husam Elbashir
– Husam Elbashir, Commented Nov 24, 2020 at 14:16
@IrgendSonHansel Someone asked similar question recently. My proposed solution there might help. — Yom T.
– Yom T., Commented Nov 24, 2020 at 14:58

Husam Elbashir · Accepted Answer · 2020-11-24 14:18:06Z

2

Use PropType to provide strong type definitions for your props. Here's an example ..

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    myProp: Object as PropType<{ foo: string, bar: number }>,
  },
  setup(props) {
    ...
  }
});

answered Nov 24, 2020 at 14:18

Husam Elbashir

7,1953 gold badges20 silver badges32 bronze badges

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

2 Comments

Irgend Son Hansel Over a year ago

Can you tell where this information can be found? Now I know how to handle objects but what about arrays & functions ...?

Husam Elbashir Over a year ago

@IrgendSonHansel Same thing. See Annotating Props in the official guide.

Collectives™ on Stack Overflow

vue 3 composition api & typescript object keys

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related