使用 TypeScript（TS）在 Vue 3 中编写代码时，可以更加详细地探讨如何定义组件、处理Props、数据、方法、计算属性、生命周期钩子以及与Vue Router和Vuex的集成。

1、基本组件定义

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

export default defineComponent({
  data() {
    const message = ref('Hello, TypeScript in Vue 3');
    return { message };
  },
});
</script>

在此示例中，我们使用ref来定义一个响应式的数据属性message，并将其初始化为"Hello, TypeScript in Vue 3"。这个message属性将自动与模板绑定。

2、使用 Props

<template>
  <div>
    <p>{{ greeting }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    name: String as PropType<string>,
  },
  computed: {
    greeting(): string {
      return `Hello, ${this.name}!`;
    },
  },
});
</script>

在这个案例中，我们定义了一个name属性作为Props，并将其类型设置为字符串。在计算属性greeting中，我们使用这个Props来构建一个问候语。

3、计算属性和方法

<template>
  <div>
    <p>{{ fullName }}</p>
    <button @click="capitalizeName">Capitalize Name</button>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    const capitalizeName = () => {
      firstName.value = firstName.value.toUpperCase();
      lastName.value = lastName.value.toUpperCase();
    };

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

    return { firstName, lastName, fullName, capitalizeName };
  },
});
</script>

这个案例演示了如何使用ref来创建响应式的数据属性，并使用computed计算属性来派生一个新值。我们还定义了一个方法capitalizeName，在点击按钮时会修改数据属性。

4、生命周期钩子

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Component is mounted',
    };
  },
  setup() {
    onMounted(() => {
      console.log('Component is mounted');
    });

    onUnmounted(() => {
      console.log('Component is unmounted');
    });
  },
});
</script>

在此示例中，我们使用onMounted和onUnmounted生命周期钩子来执行相应的操作。onMounted会在组件被挂载时执行，onUnmounted会在组件被卸载时执行。

5、自定义组件

<template>
  <div>
    <custom-button :text="buttonText" @click="buttonClick" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import CustomButton from './CustomButton.vue';

export default defineComponent({
  components: {
    CustomButton,
  },
  setup() {
    const buttonText = ref('Click me');

    const buttonClick = () => {
      buttonText.value = 'Clicked';
    };

    return { buttonText, buttonClick };
  },
});
</script>

这个案例展示了如何在Vue组件中使用自定义组件。我们在setup函数中引入了一个子组件CustomButton，并将数据和方法传递给它。

6、使用接口定义 Props

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

<script lang="ts">
import { defineComponent, PropType } from 'vue';

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

export default defineComponent({
  props: {
    user: Object as PropType<User>,
  },
});
</script>

在此案例中，我们定义了一个User接口来描述user属性的结构。这可以增加代码的可读性和类型安全性。

这些案例覆盖了不同方面的 Vue 3 组件编写，包括数据处理、Props、计算属性、方法、生命周期钩子、自定义组件、接口等。通过结合使用 TypeScript 和 Vue 3，您可以获得更好的类型检查和开发体验。

【TypeScript】TS在Vue3中详细应用