V3+TS(基础知识详解)

Vue 3 与 TypeScript 的结合为开发者提供了一种强大且类型安全的开发体验。Vue 3 是 Vue.js 的最新版本，它带来了许多改进和新特性，如 Composition API、更好的 TypeScript 支持、更小的包体积等。而 TypeScript 是一种 JavaScript 的超集，它添加了静态类型检查和一些新的语法特性，使得代码更加健壮和易于维护。

以下是一些关于如何在 Vue 3 中使用 TypeScript 的基本步骤和注意事项：

1.安装必要的依赖：

首先，确保你已经安装了 Vue CLI。然后，创建一个新的 Vue 3 项目并添加 TypeScript 支持：

vue create my-vue3-ts-app # 在创建过程中，选择手动选择特性，并确保勾选了 TypeScript 和 Vue 3

或者使用vite创建项目：

## 创建工程 npm init vite-app vue3_test-vite ## 进入工程目录 cd vue3_test-vite ## 安装依赖 npm install ## 运行 npm run dev

   vite的优势：

开发环境中，无需打包操作，可快速的冷启动。

轻量快速的热重载（HMR）。

真正的按需编译，不再等待整个应用编译完成。

   2. 分析文件目录     2.1  main.js // 引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数 import { createApp } from 'vue' import App from './App.vue' // 创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”) const app = createApp(App) console.log(app) // 挂载 app.mount('#app')   2.2  App.vue <template> <!-- Vue3组件中的模板结构可以没有根标签 --> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </template>  3.示例    3.1 编写组件

在 Vue 3 中，你可以使用 Composition API 来组织你的组件逻辑。结合 TypeScript，你可以为响应式状态、计算属性等定义明确的类型。

例如，一个简单的计数器组件可能如下所示：

<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const count = ref(0); const increment = () => { count.value++; }; return { count, increment, }; }, }); </script>     3.2  使用 TypeScript 进行类型检查：

TypeScript 的主要优势之一是它的类型系统。你可以为 props、emits、组件选项等定义类型，以确保代码的正确性和一致性。

例如，为 props 定义类型：

<script lang="ts"> import { defineComponent, PropType } from 'vue'; interface User { name: string; age: number; } export default defineComponent({ props: { user: { type: Object as PropType<User>, required: true, }, }, // ... }); </script>