Vue props defined in a page component file error (typescript)

Hello all,

I am using Laravel with Laravel Data package from Spatie inertia.js and vue.js with typescript enabled and composition API with setup.

<script setup lang='ts'>
</script>

I also installed typescript-transformer from Spatie

The end game is to create a Laravel Data Object that holds all the props of the page Component so the controller action should look like that:

	public function show(Department $department): Response  
	{  
		  return inertia('DepartmentShow', new DepartmentShowData($department));  
	}

after I create the generated.d.ts file as the Spatie documentation suggests I have a the file below:

	declare namespace App.Data {
		export type DepartmentShowData = {  
		  department: App.Data.DepartmentData;  
		  employees: Array<App.Data.EmployeeData>;  
	  	};
	}

and now inside my DepartmentShow component this works

<script setup lang='ts'>
	const props = defineProps<{
		department: App.Data.DepartmentData,
		employees: Array<App.Data.EmployeeData>
	}>()
</script>

this also works

<script setup lang='ts'>
	type Props = {
		department: App.Data.DepartmentData,
		employees: Array<App.Data.EmployeeData>
	}
	
	const props = defineProps<Props>()
</script>

and this DOESN'T

<script setup lang='ts'>
	const props = defineProps<App.Data.DepartmentShowData>()
</script>

The error I get is:

[plugin:vite:vue] [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

/Users/effraimidis/code/one/resources/js/Pages/Organization/Departments/DepartmentShow.vue
110|  
111|  
112|  const props = defineProps<App.Data.DepartmentShowData>()
                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^

Any help plz?