TypeScript与Vue #

import { defineComponent } from 'vue';

export default defineComponent({
    name: 'UserCard',
    props: {
        name: {
            type: String,
            required: true
        },
        age: {
            type: Number,
            default: 0
        }
    },
    setup(props) {
        return {
            greeting: `Hello, ${props.name}!`
        };
    }
});

<script setup lang="ts">
import { ref, computed } from 'vue';

interface Props {
    name: string;
    age?: number;
}

const props = defineProps<Props>();

const greeting = computed(() => `Hello, ${props.name}!`);
</script>

interface Props {
    title: string;
    count?: number;
    items: string[];
}

const props = defineProps<Props>();

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

const props = withDefaults(defineProps<Props>(), {
    count: 0
});

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

interface Props {
    user: User;
    onUpdate: (user: User) => void;
}

const props = defineProps<Props>();

interface Emits {
    (e: 'update', value: string): void;
    (e: 'delete', id: number): void;
}

const emit = defineEmits<Emits>();

emit('update', 'new value');
emit('delete', 1);

<script setup lang="ts">
const emit = defineEmits<{
    (e: 'update', value: string): void;
    (e: 'delete', id: number): void;
}>();
</script>

import { ref } from 'vue';

const count = ref<number>(0);
const name = ref<string>('');
const user = ref<User | null>(null);

import { reactive } from 'vue';

interface State {
    count: number;
    name: string;
    items: string[];
}

const state = reactive<State>({
    count: 0,
    name: '',
    items: []
});

import { computed } from 'vue';

const doubleCount = computed<number>(() => count.value * 2);

const fullName = computed<string>(() => {
    return `${firstName.value} ${lastName.value}`;
});

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

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

const users = ref<User[]>([]);
const loading = ref(false);

const fetchUsers = async () => {
    loading.value = true;
    const response = await fetch('/api/users');
    users.value = await response.json();
    loading.value = false;
};

onMounted(fetchUsers);
</script>

import { ref, Ref } from 'vue';

function useFetch<T>(url: string): {
    data: Ref<T | null>;
    loading: Ref<boolean>;
    error: Ref<Error | null>;
    fetch: () => Promise<void>;
} {
    const data = ref<T | null>(null);
    const loading = ref(false);
    const error = ref<Error | null>(null);
    
    const fetch = async () => {
        loading.value = true;
        try {
            const response = await fetch(url);
            data.value = await response.json();
        } catch (e) {
            error.value = e as Error;
        } finally {
            loading.value = false;
        }
    };
    
    return { data, loading, error, fetch };
}

<script setup lang="ts">
import { ref } from 'vue';

const inputRef = ref<HTMLInputElement | null>(null);

const focus = () => {
    inputRef.value?.focus();
};
</script>

<template>
    <input ref="inputRef" />
    <button @click="focus">Focus</button>
</template>

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

const childRef = ref<InstanceType<typeof ChildComponent> | null>(null);
</script>

<script setup lang="ts">
import { reactive } from 'vue';

interface FormData {
    username: string;
    password: string;
}

const form = reactive<FormData>({
    username: '',
    password: ''
});

const emit = defineEmits<{
    (e: 'submit', data: FormData): void;
}>();

const handleSubmit = () => {
    emit('submit', { ...form });
};
</script>

<script setup lang="ts">
interface User {
    id: number;
    name: string;
}

interface Props {
    users: User[];
}

defineProps<Props>();

const emit = defineEmits<{
    (e: 'select', user: User): void;
}>();
</script>

<template>
    <ul>
        <li v-for="user in users" :key="user.id" @click="emit('select', user)">
            {{ user.name }}
        </li>
    </ul>
</template>