ts在vue3中的使用

在Vue 3中使用TypeScript有两种方式：

1. 使用Vue CLI创建项目时选择TypeScript模板，这样创建的项目默认已经配置好了TypeScript相关依赖和配置文件。

2. 在已有Vue项目中添加TypeScript支持，需要安装以下依赖：

npm install -D typescript @vue/compiler-sfc @typescript-eslint/parser @typescript-eslint/eslint-plugin 

然后在项目根目录下创建一个`tsconfig.json`文件，配置如下：

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

然后在`vue.config.js`文件中添加以下配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('ts')
      .use('babel-loader')
      .loader('babel-loader')
      .tap(options => {
        options.presets.push('@babel/preset-typescript')
        return options
      })
  }
}

这样就可以在Vue 3项目中使用TypeScript了。