【JS】Vue3与TypeScript结合的超详细入门教程：从零开始构建强类型应用

XinZong-千鑫

已于 2024-11-29 10:16:29 修改

阅读量1.7k

点赞数 19

分类专栏： javascript 文章标签： javascript typescript 开发语言

于 2024-11-29 10:11:08 首次发布

本文链接：https://blog.youkuaiyun.com/zhouzongxin94/article/details/144129019

版权

javascript 专栏收录该内容

10 篇文章

订阅专栏

文章目录

【VScode】VSCode中的智能AI-GPT编程利器，全面揭秘ChatMoss & ChatGPT中文版

【GPT-o1系列模型！支持Open API调用、自定义助手、文件上传等强大功能，助您提升工作效率！】>>>点击跳转 - CodeMoss & ChatGPT-AI中文版

在这里插入图片描述

1. 环境搭建

首先，我们需要搭建一个Vue3和TypeScript的开发环境。你可以使用Vue CLI来快速创建一个项目：

npm install -g @vue/cli
vue create my-vue3-ts-app

在创建项目时，选择手动配置，并启用TypeScript支持。

2. 理解TypeScript的基本概念

在开始之前，了解TypeScript的一些基本概念是很有必要的。TypeScript是JavaScript的超集，增加了类型系统。以下是一些关键概念：

类型注解：为变量、函数参数和返回值指定类型。
接口：定义对象的结构。
泛型：创建可重用的组件。

在这里插入图片描述

3. 在Vue3中使用TypeScript

3.1 类型声明

在Vue3中使用TypeScript的第一步是进行类型声明。以下是一个简单的例子：

let message: string = "Hello, Vue3 with TypeScript!";

3.2 组件类型定义

在Vue3中，组件是核心。使用TypeScript可以为组件的props、data和methods进行类型定义：

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    title: String
  },
  data() {
    return {
      count: 0 as number
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

3.3 使用组合式API

Vue3引入了组合式API，使得逻辑复用更加灵活。结合TypeScript，可以为ref和reactive变量进行类型定义：

import { ref, reactive } from 'vue';

export default defineComponent({
  setup() {
    const count = ref<number>(0);
    const state = reactive<{ message: string }>({
      message: "Hello, Vue3!"
    });

    function increment() {
      count.value++;
    }

    return {
      count,
      state,
      increment
    };
  }
});

4. 高级用法

4.1 使用接口和泛型

TypeScript的接口和泛型可以帮助我们创建更灵活和可重用的组件：

interface User {
  name: string;
  age: number;
}

function getUserInfo<T extends User>(user: T): string {
  return `Name: ${user.name}, Age: ${user.age}`;
}

4.2 Vue3中的类型推断

Vue3的组合式API和TypeScript的类型推断结合得非常好。通过ReturnType等工具类型，可以自动推断返回值的类型：

function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

type CounterType = ReturnType<typeof useCounter>;

5. 实战项目：构建一个简单的Todo应用

为了巩固所学知识，我们将构建一个简单的Todo应用。这个项目将包含以下功能：

添加和删除Todo项
标记Todo项为完成

5.1 项目结构

首先，创建项目结构：

src/
  components/
    TodoList.vue
    TodoItem.vue
  App.vue
  main.ts

5.2 编写组件

在TodoList.vue中，我们将定义Todo列表的逻辑：

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" />
    <ul>
      <TodoItem v-for="todo in todos" :key="todo.id" :todo="todo" @remove="removeTodo" />
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import TodoItem from './TodoItem.vue';

export default defineComponent({
  components: { TodoItem },
  setup() {
    const newTodo = ref<string>('');
    const todos = ref<{ id: number; text: string; done: boolean }[]>([]);

    function addTodo() {
      if (newTodo.value.trim()) {
        todos.value.push({ id: Date.now(), text: newTodo.value, done: false });
        newTodo.value = '';
      }
    }

    function removeTodo(id: number) {
      todos.value = todos.value.filter(todo => todo.id !== id);
    }

    return { newTodo, todos, addTodo, removeTodo };
  }
});
</script>

在TodoItem.vue中，定义单个Todo项的逻辑：

<template>
  <li>
    <span :class="{ done: todo.done }">{{ todo.text }}</span>
    <button @click="$emit('remove', todo.id)">Remove</button>
  </li>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    todo: {
      type: Object as PropType<{ id: number; text: string; done: boolean }>,
      required: true
    }
  }
});
</script>

<style scoped>
.done {
  text-decoration: line-through;
}
</style>