Vue + TypeScript 进阶篇

2024-01-21 01:22:42

前言

继《Vue + TypeScript 新项目起手式》之后，这篇文章将带领大家深入探索 Vue + TypeScript 的进阶知识和踩坑配置。我们将从构建项目开始，逐步讲解组件开发和实战应用，帮助读者在新项目中充分发挥这两个工具的优势。

构建项目

创建项目

首先，让我们创建一个新的 Vue + TypeScript 项目。可以使用 Vue CLI 或 Vite 来完成这一步骤。以下是如何使用 Vue CLI 创建项目的示例：

vue create vue-ts-project --preset typescript

安装依赖

项目创建完成后，我们需要安装必要的依赖项。

npm install

组件开发

单文件组件

Vue + TypeScript 的一个重要特性就是单文件组件。它允许我们将组件的模板、脚本和样式写在一个文件中，这使得组件的开发更加高效和易于维护。

以下是如何创建一个单文件组件的示例：

// MyComponent.vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

<style>
h1 {
  color: red;
}
</style>

TypeScript 类型注解

TypeScript 的类型注解可以帮助我们定义变量和函数的类型，这有助于提高代码的可读性和可维护性。

以下是如何在 Vue 组件中使用 TypeScript 类型注解的示例：

// MyComponent.vue
<script lang="ts">
export default {
  data(): {
    message: string
  } {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

自定义类型

TypeScript 还允许我们定义自定义类型。这可以帮助我们创建可重用的类型，并提高代码的可读性和可维护性。

以下是如何定义一个自定义类型的示例：

// types.ts
export type MyType = {
  name: string
  age: number
}

然后，我们可以在 Vue 组件中使用自定义类型：

// MyComponent.vue
<script lang="ts">
import { MyType } from './types'

export default {
  data(): MyType {
    return {
      name: 'John Doe',
      age: 30
    }
  }
}
</script>

实战应用

路由

Vue + TypeScript 可以轻松集成 Vue Router 来实现路由功能。

以下是如何在 Vue 项目中集成 Vue Router 的示例：

// main.ts
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

new Vue({
  router
}).$mount('#app')

状态管理

Vuex 是一个流行的 Vue 状态管理库。它可以帮助我们在 Vue 组件之间共享状态。

以下是如何在 Vue + TypeScript 项目中集成 Vuex 的示例：

// store.ts
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

然后，我们可以在 Vue 组件中使用 Vuex：

// MyComponent.vue
<script lang="ts">
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

踩坑配置

TypeScript 配置

在使用 Vue + TypeScript 时，我们需要正确配置 TypeScript。

以下是如何配置 TypeScript 的示例：

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "jsx": "react",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

ESLint 配置

ESLint 是一个流行的 JavaScript 代码检查工具。它可以帮助我们发现代码中的问题和潜在的错误。

以下是如何配置 ESLint 的示例：

// .eslintrc.js
module.exports = {
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript"
  ],
  "rules": {
    "vue/max-attributes-per-line": [2, {
      "singleline": 10,
      "multiline": {
        "max": 1,
        "allowFirstLine": false
      }
    }]
  }
}