如何在 Vue 3 中使用 TypeScript？

随着前端开发的日益复杂和庞大，JavaScript 在管理大型项目时变得力不从心。为了解决这一问题，TypeScript 作为一种为编写大型 JavaScript 应用程序而设计的语言，变得越来越流行。它是 JavaScript 的超集，增加了静态类型支持，提供了更好的开发者体验和更安全的代码。而 Vue 3 作为一个渐进的 JavaScript 框架，完美地支持 TypeScript。

本篇博客将深入探讨如何在 Vue 3 项目中使用 TypeScript。

项目初始化

在开始之前，首先需要确保你的环境已经安装了 npm 或 yarn，并使用 Vue CLI 创建一个新项目。我们可以通过以下命令进行安装和创建：

# 如果没有安装 Vue CLI，请使用下面的命令安装
npm install -g @vue/cli

# 创建一个新的 Vue 项目
vue create my-vue-app

在创建项目的过程中，Vue CLI 会提供一些配置选项。我们需要选择包含 TypeScript 支持的预设选项。你可以通过以下步骤进行操作：

运行 vue create my-vue-app 后，选择 "Manually select features"。
在特性选择中，使用空格键选中 TypeScript，然后按下回车键确认。
接下来，在 TypeScript 配置部分，可以选择是否使用 class-style 组件语法，是否启用严格类型检查等。根据你的项目需求进行选择即可。

项目结构

完成项目创建后，项目目录大致如下：

my-vue-app
│
├── node_modules
├── public
├── src
│   ├── assets
│   ├── components
│   │   └── HelloWorld.vue
│   ├── views
│   │   └── About.vue
│   ├── App.vue
│   ├── main.ts
│   └── shims-vue.d.ts
├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json

可以看到，main.js 文件被 main.ts 取代，项目中还增加了一个 tsconfig.json 文件，用于配置 TypeScript 编译选项。shims-vue.d.ts 则是为了允许 TypeScript 识别 .vue 文件的模块。

编写 TypeScript 组件

我们可以在组件中使用 TypeScript 来编写逻辑。以下是如何在 Vue 3 中使用 TypeScript 编写一个简单的组件。

创建一个新的文件 src/components/TypeScriptExample.vue，并添加以下内容：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">Increment Counter</button>
    <p>Counter: {{ counter }}</p>
  </div>
</template>

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

export default defineComponent({
  name: 'TypeScriptExample',
  setup() {
    const message = ref<string>('Hello TypeScript in Vue 3!');
    const counter = ref<number>(0);

    const incrementCounter = () => {
      counter.value++;
    };

    return {
      message,
      counter,
      incrementCounter,
    };
  },
});
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

在这个例子中，我们使用了 Vue 3 的 Composition API，并且在 setup 函数中定义了响应式变量 message 和 counter，分别指定了它们的类型 string 和 number。类型检查保证了更安全和可维护的代码。

在 Vue Router 中使用 TypeScript

同样地，我们也可以在 Vue Router 中使用 TypeScript。以下是如何在 Vue Router 中创建和使用 TypeScript 编写的组件。

首先，在 src/views/ 目录下创建一个新的文件 Home.vue，内容如下：

<template>
  <div class="home">
    <h1>Welcome to Your Vue.js + TypeScript App</h1>
    <TypeScriptExample />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import TypeScriptExample from '@/components/TypeScriptExample.vue';

export default defineComponent({
  name: 'Home',
  components: {
    TypeScriptExample,
  },
});
</script>

<style scoped>
h1 {
  font-weight: normal;
}
</style>

接着，在 src/router/index.ts 文件中配置路由：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '@/views/Home.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // 懒加载方式引入组件
    component: () => import('@/views/About.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

可以看到，我们在 Vue Router 中使用 TypeScript 配置路由，同时为路径 / 指定了 Home 组件。

API 调用与接口定义

在实际项目中，我们经常需要调用后端 API 并处理返回的数据。下面展示了如何在 Vue 3 中使用 TypeScript 和 Axios 进行 API 调用，并定义接口类型。

首先，安装 Axios：

npm install axios

然后，在 src/ 目录下创建一个 api 文件夹，并在其中创建 api.ts 文件：

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  headers: {
    'Content-Type': 'application/json',
  },
});

export const getPosts = async () => {
  try {
    const response = await apiClient.get('/posts');
    return response.data;
  } catch (error) {
    console.error('Error fetching posts:', error);
    throw error;
  }
};

接着，我们在 src/components/Posts.vue 文件中使用这个 API 调用：

<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { getPosts } from '@/api/api';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

export default defineComponent({
  name: 'Posts',
  setup() {
    const posts = ref<Post[]>([]);

    const fetchPosts = async () => {
      try {
        posts.value = await getPosts();
      } catch (error) {
        console.error('Failed to fetch posts:', error);
      }
    };

    onMounted(() => {
      fetchPosts();
    });

    return {
      posts,
    };
  },
});
</script>

<style scoped>
h1 {
  font-weight: normal;
}
</style>

在这个例子中，我们定义了一个接口 Post 来确保从 API 获取的数据具有正确的类型。使用 onMounted 生命周期钩子在组件挂载时调用 fetchPosts 方法，并将获取到的数据赋值给 posts。

结论

TypeScript 赋予了 Vue 3 更强大的类型检查能力和更安全的代码编写体验。通过使用 TypeScript，可以更好地提高代码的可维护性和可读性，减少潜在的运行时错误。

我们展示了如何通过 Vue CLI 创建支持 TypeScript 的项目，如何使用 TypeScript 编写组件、路由以及进行 API 调用。通过这些示例代码，你可以更好地理解如何在 Vue 3 项目中运用 TypeScript，并在实际应用中灵活使用这些技术。

复制全文生成海报前端框架编程语言开发工具

编程 如何在 Vue 3 中使用 TypeScript？