Get component prop type when using defineProps with TypeScript in production

[OlaAlsaker]

When using defineProps with TypeScript like this:

const props = defineProps<{
	foo: number;
	bar: string;
}>();

The type is not available during runtime in production:

// console.log(component.props)

{
  foo: {},
  bar: {},
}

But in development, the type is available:

// console.log(component.props)

{
  foo: { type: Number },
  bar: { type: String },
}

The reason is that the compiler basically skips adding type in production:

core/packages/compiler-sfc/src/script/defineProps.ts

Lines 262 to 269 in 32262a9

	if (!ctx.options.isProd) {
	return `${finalKey}: { ${concatStrings([
	`type: ${toRuntimeTypeString(type)}`,
	`required: ${required}`,
	skipCheck && 'skipCheck: true',
	defaultString,
	])} }`
	} else if (

And then fallbacks to this code:

core/packages/compiler-sfc/src/script/defineProps.ts

Lines 295 to 296 in 32262a9

	// production: checks are useless
	return `${finalKey}: ${defaultString ? `{ ${defaultString} }` : `{}`}`

Is there a special reason for this? 😄 I see that there is already an exception for Boolean:

core/packages/compiler-sfc/src/script/defineProps.ts

Lines 269 to 283 in 32262a9

	} else if (
	type.some(
	el =>
	el === 'Boolean' ||
	((!hasStaticDefaults || defaultString) && el === 'Function'),
	)
	) {
	// #4783 for boolean, should keep the type
	// #7111 for function, if default value exists or it's not static, should keep it
	// in production
	return `${finalKey}: { ${concatStrings([
	`type: ${toRuntimeTypeString(type)}`,
	defaultString,
	])} }`
	} else {

I would be happy to make a PR with the other primitives added as well, but I am assuming this is done for a reason.

... and yes, we know that we could use the non-TS way of defining props, but we do really prefer the TS-way 😇

[skirtles-code]

This is by design. It's mentioned at https://vuejs.org/api/sfc-script-setup.html#type-only-props-emit-declarations.

The main use of the type option is to validate prop values. That validation isn't performed in production, so the type is discarded to reduce the bundle size.

There are a handful of cases where the type serves another purpose, not just validating prop values. For example, for a Boolean, the value is interpreted differently to determine whether it is true or false. In those cases the type needs to be retained, even in production.

[OlaAlsaker]

Thanks for a good reply! 😄 I did read the documentation but somehow didn't see the connection.