Home » vue » vue 3 composition api & typescript object keys

vue 3 composition api & typescript object keys

Posted by: admin November 26, 2021 Leave a comment

Questions:

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?

Answers:

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) {
    ...
  }
});