在Vue3中配置TypeScript的详细教程

npm install -g @vue/cli # 如果还没有安装 Vue CLI 可以先全局安装
vue create my-vue-ts-app # 创建新的项目

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

<template>
  <div>{{ msg }}</div>
</template>

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

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String // 这里可以添加类型声明
  },
  setup(props) {
    // 使用 TypeScript 的类型推断
    console.log(props.msg);
  }
});
</script>

// 在 src/components/HelloWorld.vue 文件中
interface Props {
  msg: string;
}

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props: Props) {
    console.log(props.msg);
  }
});

// 在 src/components/GenericComponent.vue 文件中
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'GenericComponent',
  props: {
    item: {
      type: Object as PropType<{ id: number; name: string }>,
      required: true
    }
  },
  setup(props) {
    console.log(props.item.name); // 使用泛型传递的属性
  }
});