当前位置：首页 > news >正文

V3+TS(基础知识详解)

news 来源：原创 2025/5/1 12:58:28

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>