vue3中怎么使用ts

在Vue 3中使用TypeScript (简称TS)，首先需要确保已经安装了Node.js和Vue CLI。如果你的项目还没有开始，可以创建一个新的Vue 3 TypeScript项目：

1. **安装Vue CLI**:

   npm install -g @vue/cli

2. **创建Vue 3 TypeScript项目**:

   vue create my-project --type=typescript

3. **选择或配置TS**:
创建项目时会询问是否使用TypeScript。如果之前已有项目，可以打开`package.json`，在`scripts`部分添加`"transpile": "tsc"`来构建TypeScript。

4. **引入和配置TypeScript**:
- `src/main.ts`中导入`@vue/cli-plugin-typescript`并启用它：

     import { defineConfig } from 'vue-cli-plugin-typescript'
     export default defineConfig({
       transpileDependencies: true,
     })

- 配置`.eslintrc.js`文件，允许TS语法:

     module.exports = {
       parser: '@typescript-eslint/parser',
       parserOptions: {
         ecmaVersion: 2020,
         sourceType: 'module',
         tsconfigRootDir: './tsconfig.json',
       },
       extends: ['plugin:@typescript-eslint/recommended', ...],
     }

5. **编写TypeScript组件**:
使用`.vue`文件的扩展名改为`.tsx`，并在文件中使用TypeScript声明变量、函数和属性类型。例如：

   <template>
     <div>你好，世界！</div>
   </template>

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

   export default class HelloWorld extends Component {
     message: string = 'Hello Vue!'
   }
   </script>