vue3+ts怎么使用

Vue3和Typescript的使用方式主要有以下几种：

1. 使用Vue CLI创建项目时选择TypeScript作为语言

在创建Vue项目时，可以选择使用TypeScript作为项目的语言。这样可以直接在项目中使用TypeScript，并且会自动生成一些TypeScript相关的配置文件和代码结构。具体步骤如下：

vue create my-project

在选择项目配置时选择"Manually select features"，然后选择TypeScript即可。

2. 在已有的Vue项目中添加TypeScript支持

如果已经有一个Vue项目，也可以在其中添加TypeScript支持。具体步骤如下：

- 安装TypeScript和相关依赖

npm install --save-dev typescript ts-loader @vue/cli-plugin-typescript

- 配置TypeScript

在项目根目录下创建一个`tsconfig.json`文件，并添加以下内容：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

- 配置Vue插件

在`vue.config.js`文件中添加以下内容：

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: []
    }
  },
  configureWebpack: {
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.vue', '.json']
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/]
          }
        }
      ]
    }
  }
}

- 修改Vue组件文件后缀名

在Vue组件文件中，将`.vue`后缀名改为`.vue.ts`，这样可以直接在Vue组件中使用TypeScript。

3. 在Vue3中使用TypeScript

在Vue3中，可以使用以下方式来使用TypeScript：

- 在Vue组件中使用TypeScript

在Vue3中，可以直接在Vue组件中使用TypeScript。具体步骤如下：

- 在`setup()`函数中定义变量的类型
- 在`defineComponent()`函数中使用`defineProps()`和`defineEmits()`定义属性和事件的类型
- 在`template`中使用TypeScript语法

示例代码：

<template>
  <div>{{ count }}</div>
</template>

<script lang="ts">
import { defineComponent, defineProps, defineEmits } from 'vue'

interface Props {
  msg: string
  count: number
}

export default defineComponent({
  props: defineProps<Props>(),
  emits: defineEmits(['update:count']),
  setup(props) {
    const count = ref(props.count)

    return {
      count
    }
  }
})
</script>

- 在Vue3中使用Composition API

Vue3中的Composition API也支持使用TypeScript。具体步骤如下：

- 使用`ref()`、`reactive()`等函数定义变量的类型
- 在`defineComponent()`函数中使用`defineProps()`和`defineEmits()`定义属性和事件的类型

示例代码：

<template>
  <div>{{ count }}</div>
</template>

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

interface Props {
  msg: string
  count: number
}

export default defineComponent({
  props: defineProps<Props>(),
  emits: defineEmits(['update:count']),
  setup(props) {
    const count = ref(props.count)

    return {
      count
    }
  }
})
</script>