docs icon indicating copy to clipboard operation
docs copied to clipboard

Typescript with Composition API: Document use of PropType

Open LinusBorg opened this issue 3 years ago • 1 comments

Preface

Our Typescript docs are split into two pages for Composition API and Options API, which is fine as there are different things to be aware about when using these APIs with TS.

However at the same time, we should document similarities in both sections equally.

We explain the use of PropType only in the Options API TS guide.

We explain how to use it here in the second code snippet: https://vuejs.org/guide/typescript/options-api.html#typing-component-props

However we don't mention it on the Composition API Version of that page anywhere. If one were to read this page alone, as they are not using Options API, they would not be aware they need to do this to use an external type:

<script setup> 
import type { Categories } from './types'
import { PropType } from 'vue'

defineProps({
  category: {
    type: String as PropType<Categories>
  }
})
</script>

Proposed solution

Right after the first simple code snippet explaining runtime props declaration, we should insert and explanation of PropType before we go on to dive into defineProps<{ }>()

LinusBorg avatar Mar 16 '22 07:03 LinusBorg

I created a PR (https://github.com/vuejs/docs/pull/1868) matching this issue and am open for any comments. I'd really like to get this merged as it would IMHO be an improvement over the current situation.

julian-eckhardt avatar Aug 24 '22 14:08 julian-eckhardt