Типизация пропсов и событий

interface Props {
    title: string;
    count: number;
    isActive: boolean;
    items: string[];
    user: User;
}

const props = defineProps<Props>();

interface Props {
    title: string;
    subtitle?: string;
    count?: number;
}

interface Props {
    title: string;
    count?: number;
    items?: Item[];
    user?: User | null;
}

const props = withDefaults(defineProps<Props>(), {
    count: 0,
    items: () => [],
    user: null,
});

export interface User {
    id: number;
    name: string;
    email: string;
}

export interface ProductCardProps {
    product: Product;
    showPrice?: boolean;
    onAdd?: (product: Product) => void;
}

<script setup lang="ts">
import type { ProductCardProps } from '@/types';

const props = withDefaults(defineProps<ProductCardProps>(), {
    showPrice: true,
});
</script>

const { title, count = 0 } = defineProps<Props>();

const props = defineProps<{
    title: string;
    count?: number;
    items: Item[];
}>();

type Props = {
    title: string;
    count?: number;
};

const props = defineProps<Props>();

type Emits = {
    (e: 'save', id: number): void;
    (e: 'cancel'): void;
    (e: 'update', payload: { id: number; name: string }): void;
};

const emit = defineEmits<Emits>();

const emit = defineEmits<{
    save: [id: number];
    cancel: [];
    update: [payload: { id: number; name: string }];
}>();

const emit = defineEmits<{
    update: [id: number, name: string];   // позиционные
    save: [payload: { id: number; name: string }];   // именованный объект
}>();

emit('update', 5, 'Иван');
emit('save', { id: 5, name: 'Иван' });

<script setup lang="ts">
import type { User } from '@/types';

interface Props {
    user: User;
    editable?: boolean;
    onDelete?: (id: number) => void;
}

type Emits = {
    save: [user: User];
    delete: [id: number];
    cancel: [];
};

const props = withDefaults(defineProps<Props>(), {
    editable: false,
});

const emit = defineEmits<Emits>();

function handleSave() {
    emit('save', props.user);
}

function handleDelete() {
    emit('delete', props.user.id);
}
</script>

<template>
    <div>
        <h3>{{ user.name }}</h3>
        <p>{{ user.email }}</p>

        <button v-if="editable" @click="handleSave">Сохранить</button>
        <button v-if="editable" @click="handleDelete">Удалить</button>
        <button @click="emit('cancel')">Отмена</button>
    </div>
</template>

// Простой v-model
const model = defineModel<string>();
model.value = 'new value';   // string

// С дефолтом
const model = defineModel<string>({ default: '' });

// Обязательный
const model = defineModel<string>({ required: true });

// Именованный
const count = defineModel<number>('count', { default: 0 });

const [model, modifiers] = defineModel<string>({
    set(value) {
        return modifiers.trim ? value.trim() : value;
    },
});

<script setup lang="ts">
import UserCard from './UserCard.vue';
import type { User } from '@/types';

const user = ref<User>({ id: 1, name: 'Иван', email: 'ivan@example.com' });

function handleSave(u: User) {
    console.log('Saved', u);
}

function handleDelete(id: number) {
    console.log('Deleted', id);
}
</script>

<template>
    <UserCard
        :user="user"
        :editable="true"
        @save="handleSave"
        @delete="handleDelete"
        @cancel="() => {}"
    />
</template>

<script setup lang="ts">
import InnerButton from './InnerButton.vue';

defineEmits<{
    click: [event: MouseEvent];
}>();
</script>

<template>
    <InnerButton @click="$emit('click', $event)" />
</template>

defineSlots<{
    default: (props: { item: Item }) => any;
    header: () => any;
    footer: (props: { total: number }) => any;
}>();

<MyList :items="items">
    <template #default="{ item }">
        {{ item.name }}
    </template>
</MyList>

<MyComponent :disabled="true" />

<MyComponent disabled />

<MyComponent :disabled="isDisabled" />

// ❌ Нельзя
const props = defineProps<interface Props { title: string }>();

// ✅ Можно
interface Props { title: string; }
const props = defineProps<Props>();

// ❌ Работает не везде
import { User } from '@/types';
const props = defineProps<{ user: User }>();

// ✅ Надёжнее
import type { User } from '@/types';

// ❌ Все компоненты разделят объект
withDefaults(defineProps<Props>(), { items: [] });

// ✅
withDefaults(defineProps<Props>(), { items: () => [] });