Skip to content

clarification needed on imported types in defineProps #3331

@comhon-project

Description

@comhon-project

Hey! I was reading the docs about type-based defineProps and I think I found something that might be outdated or unclear.

What's the issue?

The docs say that imported types give null for runtime inference:

"If the type is a reference to an imported type, the inferred result will be foo: null (equal to any type) since the compiler does not have information of external files."

https://vuejs.org/guide/typescript/composition-api.html#typing-component-props

But I found that imported types from local project files actually work fine in dev mode.

Reproduction

// src/types/icons.ts
export type IconName = 'add' | 'delete' | 'close';

// src/components/Icon.vue
<script setup lang="ts">
import type { IconName } from '@/types/icons';

defineProps<{ icon: IconName }>();
</script>

What the docs suggest:

props: { icon: { type: null } }

What actually happens (dev mode):

props: { icon: { type: String, required: true } }

Vue correctly understands that IconName is a string literal union and infers type: String.

Environment

  • Vue 3.5.26

Question

Does "imported type" in the docs specifically mean types from node_modules? If so, it would be helpful to clarify this because "imported type" sounds like any import.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions