ts语法如何在Vue3中运用?

在Vue 3中使用TypeScript，你需要做以下几步：

1. 确保你的项目已经支持Vue 3。

2. 安装TypeScript依赖：

   
   
   
   npm install -D typescript
   npm install -D @vue/cli-plugin-typescript

3. 在项目根目录下创建一个tsconfig.json文件，并配置TypeScript。

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

4. 修改<script>标签为<script lang="ts">。
5. 在.vue文件中使用TypeScript时，你可以定义组件的props、methods、computed属性等：

<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  props: {
    message: String
  },
  setup(props) {
    const reversedMessage = computed(() => props.message?.split('').reverse().join('') || '');
 
    return { reversedMessage };
  }
});
</script>

6. 确保你的Vue项目配置支持TypeScript。

这样，你就可以在Vue 3中使用TypeScript进行开发了。