Warn when props use externally imported types in <script setup>

[varHarrie]

Version

3.0.0-rc.7

Reproduction link

https://github.com/varHarrie/vue-script-setup-reproduction

Steps to reproduce

// ===== types.ts =====

export type ButtonSize = 'small' | 'medium' | 'large'
export type ButtonType = 'normal' | 'primary' | 'warn' | 'danger'

export interface ButtonProps {
  size: ButtonSize
  type: ButtonType
}

export type ButtonEvents = ["click"];

// ===== MyButton.vue =====

<template>
  <button :class="classes">
    <slot />
  </button>
</template>

<script lang="ts" setup="props, ctx">
import { ButtonProps, ButtonEvents } from './types'

declare const props: ButtonProps
declare const ctx: SetupContext<ButtonEvents>

export const classes = [
  props.size,
  props.type
]
</script>

// ===== App.vue =====

<template>
  <my-button size="large" type="danger" />
</template>

What is expected?

button has large and danger class names.

What is actually happening?

button has size and type attributes.

---

When I change declare const props: ButtonProps to declare const props: { size: string, type: string }, it works as expected.

[cool-little-fish]

Try to add this to your MyButton.vue file:

The reason is simple, only when component define prop inside self, the outside prop can be prop value of component instance

[yyx990803]

<script setup> compilation requires props definitions to be in the same file. If we support arbitrary external imports then we will potentially crawling and parsing many TS files for a single SFC. We can detect and produce a warning for this case though.

[SancheZz]

@yyx990803 Can I import an external type that I have to import in every SFC file?

import { ExternalStructType } from './types';

declare const props: {
  struct: ExternalStructType;
};

[yyx990803]

@SancheZz that would work, but the compiler won't be able to infer the runtime type for it so it's going to skip runtime type check.

[yyx990803]

This is likely a wontfix since I don't see the benefit being worth it.

[varHarrie]

Try to add this to your MyButton.vue file:

The reason is simple, only when component define prop inside self, the outside prop can be prop value of component instance

Sadly, it does't work well for bool value.

<script setup> is not a good practice now, since there is no way to share props types and it can't define default props.

Waiting for subsequent improvements.