I got syntax error on installing typescript with laravel-data package

Reading https://spatie.be/docs/laravel-data/v4/advanced-usage/typescript docs I try to add laravel data package on laravel/vue/element-plus site and adding app/Data/TaskAdminData.php class with code :

<?php

namespace App\Data;

use App\Enums\TaskCompletedEnum;
use App\Enums\TaskPriorityEnum;
use App\Models\TaskCategory;
use App\Models\User;
use Carbon\Carbon;
use Spatie\LaravelData\Data;
use Spatie\LaravelData\Attributes\Validation\Max;
use Spatie\TypeScriptTransformer\Attributes\TypeScript;

#[TypeScript]
class TaskAdminData extends Data
{
    public function __construct(
        public User $creator,
        public TaskCategory $taskCategory,
        public TaskPriorityEnum $priority,
        #[Max(255)]
        public string $title,
        #[Max(255)]
        public string $slug,
        public string $content,
        public TaskCompletedEnum $completed,
        public ?Carbon $completed_at = null,
        public ?Carbon $deadline_at = null,
        public Carbon $created_at,
        public ?Carbon $updated_at = null,
    ) {
    }

}

and calling it in a controller :

return Inertia::render('Admin/Tasks/Index', [
    'tasks' => TaskAdminData::collect($tasks),
    'totalTasksCount' => Task::count(),

and in vue file :

...
<script type="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue'

import {router, usePage} from '@inertiajs/vue3';

import {defineComponent, onMounted, ref, PropType} from "vue";

import TaskAdminData = App.Data.TaskAdminData; // NOT SHUE - IS IT CORRECT SYNTAX

import {Edit, Delete, DeleteFilled, DocumentAdd} from '@element-plus/icons-vue'

export default defineComponent({

    props: {
        tasks: {
            type: Array as PropType<TaskAdminData[]>,
            required: true
        },

But I got error , which seems points not to TaskAdminData I added into the code, but without it I have no this error:

Why this error and which syntax is valid ?

"php": "^8.2",
"laravel/framework": "^11.31",
"spatie/laravel-data": "^4.18",

UPDATED : After I run command :

$ php artisan typescript:transform
+----------------------------------+----------------------------------+
| PHP class                        | TypeScript entity                |
+----------------------------------+----------------------------------+
| App\Data\TaskAdminData           | App.Data.TaskAdminData           |
...

I found a file in my project :

/resources/types/generated.d.ts

But importing file in my vue file :

I got error anyway :

import TaskAdminData from '@types/generated.d'

I got error :

[plugin:vite:import-analysis] Failed to resolve import "@types/generated.d" from "resources/js/Pages/Admin/Tasks/Index.vue". Does the file exist?
/mnt/_work_sdb8/wwwroot/lar/SimpleERP/resources/js/Pages/Admin/Tasks/Index.vue:94:28
7  |  
8  |  // import TaskAdminData = App.Data.TaskAdminData;
9  |  import TaskAdminData from '@types/generated.d'
   |                             ^
10 |  // resources/types/generated.d.ts

The same erro with command :

import TaskAdminData from '@types/generated.d.ts'

Why error and which syntax have I to use ?

UPDATED # 2: As I have typescript-transformer installed I check config parameters :

"laravel/framework": "^11.31",
"spatie/laravel-data": "^4.18",
"spatie/laravel-typescript-transformer": "^2.5",

In config/typescript-transformer.php :

    'output_file' => resource_path('types/generated.d.ts'),
    ... 

    'transformers' => [
        Spatie\LaravelTypeScriptTransformer\Transformers\SpatieStateTransformer::class,
        Spatie\TypeScriptTransformer\Transformers\EnumTransformer::class,
//        Spatie\TypeScriptTransformer\Transformers\SpatieEnumTransformer::class,
        Spatie\LaravelTypeScriptTransformer\Transformers\DtoTransformer::class,
    ],


    // I tried to change this parameter - it did not help
    'transform_to_native_enums' => true,

I founf a file vendor/laravel/breeze/stubs/inertia-vue-ts/tsconfig.json with code :

{
    "compilerOptions": {
        "allowJs": true,
        "module": "ESNext",
        "moduleResolution": "bundler",
        "jsx": "preserve",
        "strict": true,
        "isolatedModules": true,
        "target": "ESNext",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "skipLibCheck": true,
        "paths": {
            "@/*": ["./resources/js/*"],
            "ziggy-js": ["./vendor/tightenco/ziggy"]
        }
    },
    "include": ["resources/js/**/*.ts", "resources/js/**/*.vue"]
}

I suppose it is the used file with valid parameters. What can be wrong ? Have I to create file tsconfig.json manually ? Which code must it have in this case ?

UPDATED # 3:

I also tried syntax :

import TaskAdminData from '@/types/generated.d'

But the same error if you mean this.

If found file resources/types/generated.d.ts with lines :

declare namespace App.Data {
export type TaskAdminData = {
creator: any;
taskCategory: any;
priority: App.Enums.TaskPriorityEnum;
title: string;
slug: string;
content: string;
completed: App.Enums.TaskCompletedEnum;
completed_at?: string;
deadline_at?: string;
created_at: string;
updated_at?: string;
};
}
declare namespace App.Enums {
export enum ConfigValueEnum { DATETIME_ASTEXT_FORMAT = 1, DATE_ASTEXT_FORMAT = 2, DATETIME_NUMBERS_FORMAT = 3, APP_NAME = 7, TIMEZONE = 8, BACKEND_ITEMS_PER_PAGE = 9, HOME_PRODUCTS_PER_PAGE = 10, DEFAULT_AVATAR = 11, FILESYSTEM_DISK = 12 };
export enum MessageIsUserEnum { IS_USER_QUESTION = '1', IS_AI_ANSWER = '0', FILTER_ALL = '' };
export enum StatisticsTypeEnum { ALL_USERS_COUNT = 'All users count', ADMINS_COUNT = 'Admins count', MANAGERS_COUNT = 'Managers count', CONTENT_EDITORS_COUNT = 'Content Editors count', JOINED_LAST_WEEK_COUNT = 'Joined last week count', JOINED_LAST_MONTH_COUNT = 'Joined last month count', TASKS_COMPLETED_PERCENTS = 'Tasks completed percents' };
export enum TaskCategoryActiveEnum { ACTIVE = '1', NOT_ACTIVE = '0', FILTER_ALL = '' };
export enum TaskCompletedEnum { COMPLETED = '1', OPENED = '0', FILTER_ALL = '' };
export enum TaskPriorityEnum { LOW = '1', NORMAL = '2', HIGH = '3', URGENT = '4', IMMEDIATE = '5' };
export enum UserStatusEnum { NEW = 'N', ACTIVE = 'A', INACTIVE = 'I', BANNED = 'B' };
}

Are there some sandboxes for laravel/vue/element-plus site to check my code?