valid-vue-reactivity-transform-props.md

Enforce Vue props with Reactivity Transform to be valid (valid-vue-reactivity-transform-props)

Reactivity Transform provides considerable convenience for the declaration of props. However, these usages may not be properly recognized by eslint-plugin-vue, e.g. rules like vue/require-valid-default-prop, vue/no-required-prop-with-default, etc.

In addition, @vue-macros/reactivity-transform's handling of defaults is incompatible with TS and requires special type assertions to enable it to generate correct runtime checked code.

This rule is fixable.

Fail

<script lang="ts" setup>
const { foo } = $(defineProps<{
  foo: string
}>())
</script>

<script lang="ts" setup>
const { foo } = $(withDefaults(defineProps<{
  foo?: string
}>(), {
  foo: '',
}))
</script>

<script lang="ts" setup>
const { foo = '' } = defineProps<{
  foo: string
}>()
</script>

<script lang="ts" setup>
const { foo = [] } = defineProps<{
  foo?: string[]
}>()
</script>

<script lang="ts" setup>
const { foo = () => [] } = defineProps<{
  foo?: string[]
}>()
</script>

Pass

<script lang="ts" setup>
const { foo } = defineProps<{
  foo: string
}>()
</script>

<script lang="ts" setup>
const { foo = '' } = defineProps<{
  foo?: string
}>()
</script>

<script lang="ts" setup>
const { foo = (() => ({})) as never } = defineProps<{
  foo?: object
}>()
</script>

<script lang="ts" setup>
const { foo = () => {} } = defineProps<{
  foo?: () => void,
}>()
</script>

<script setup>
const { foo = () => ({}) } = defineProps({
  foo: Object,
})
</script>