Subscribe on changes!

props' default value does not respect typescript's inferred type when using <script> without setup

avatar
May 25th 2023

Vue version

3.2.47

Link to minimal reproduction

see below

Steps to reproduce

<template>
    <div>
        <span>{{ colors$[0] }}</span>
        <span>{{ colors$[1] }}</span>
        <span>{{ colors$[2] }}</span>
    </div>
</template>

<script lang="ts">
import { ComputedRef, computed, defineComponent, getCurrentInstance, markRaw, reactive, PropType } from 'vue';

interface Props {
    colors?: [string, string, string];
}

type VM = {
    colors$: Props['colors'];
};

export default defineComponent({
    props: {
        colors: {
            type: Array as unknown as PropType<Props['colors']>,
            default: () => [1, 2, 3]	// I can return anything as long as it is an array, even the content type doesn't match the PropType
        }
    },
    setup(props) {
        const vm = reactive<VM>({
            colors$: props.colors
        }) as VM;

        return vm;
    }
});
</script>

What is expected?

Type error will be prompted as I am not respecting the type

What is actually happening?

The code still compiles...

System Info

No response

Any additional comments?

No response