说说Vue3如何与TS整合使用

说说 Vue3 如何与 TS 整合使用，面试官问的，没有回答上来😭。

你就这样说：首先需要安装一些依赖项，如 TypeScript 和 ts-loader，并创建一个名为 tsconfig.json 的 TypeScript 配置文件。然后，修改 Vue 组件文件的后缀名为 .vue.ts，并在该文件中编写 TypeScript 代码。最后，在 main.ts 中引入修改后的组件，并将其挂载到 Vue 实例上就行了

该回答引用自ChatGpt
在Vue3中与TypeScript整合使用的步骤如下：

  1. 安装Vue3和TypeScript依赖：

    cssCopy code
npm install vue@next typescript

  2. 创建一个Vue项目，并选择TypeScript作为语言选项：

    swiftCopy code
vue create my-project --default --inlinePreset '{"useConfigFiles":true,"plugins":{"@vue/cli-plugin-typescript":{"classComponent":true,"useTsWithBabel":true}}}'

  3. 如果使用Class组件，需要安装vue-class-component和vue-property-decorator：

    pythonCopy code
npm install vue-class-component vue-property-decorator

  4. 在Vue组件中使用TypeScript，需要在<script>标签中声明类型，例如：

    phpCopy code<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, world!'
    };
  },
  methods: {
    handleClick() {
      console.log(this.message);
    }
  }
});
</script>

  5. 在Vue组件中使用Class组件，需要继承VueClass组件并使用装饰器：

    typescriptCopy code<script lang="ts">
import { Vue, Component, Prop } from 'vue-class-component';

@Component
export default class MyComponent extends Vue {
  @Prop() readonly message!: string;

  handleClick() {
    console.log(this.message);
  }
}
</script>

  6. 在Vue组件中使用Composition API，需要先导入setup函数并在函数中使用ref和reactive等API：

    phpCopy code<template>
  <div>{{ message }}</div>
</template>

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

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const message = ref('Hello, world!');

    return {
      message
    };
  }
});
</script>

  7. 最后，在tsconfig.json文件中进行TypeScript的配置，例如配置target、module、esModuleInterop等选项。

通过上述步骤，我们就可以在Vue3中与TypeScript整合使用了。