Vue 3 与 TypeScript：最佳实践详解

CodeQi技术小栈

已于 2024-07-10 09:32:17 修改

阅读量1.1k

点赞数 33

分类专栏： # Vuejs 文章标签： typescript vue.js 前端

于 2024-07-10 09:27:40 首次发布

本文链接：https://blog.youkuaiyun.com/SWQ4520/article/details/140313898

版权

Vuejs 专栏收录该内容

20 篇文章

订阅专栏

大家好，我是CodeQi！

很多人问我为什么要用TypeScript？

因为 Vue3 喜欢它！

开个玩笑...

在我们开始探索 Vue 3 和 TypeScript 最佳实践之前，让我们先打个比方。

如果你曾经尝试过在没有 GPS 的情况下开车到一个陌生的地方，你可能会知道那种迷失方向的感觉。

而 TypeScript 就像是你编程旅程中的 GPS，帮助你避免错误并顺利到达目标。

现在，让我们进入正题，看看如何在 Vue 3 中使用 TypeScript，并了解一些最佳实践。

准备工作

在开始之前，请确保你的开发环境已经安装了以下工具：

Node.js（推荐使用最新的 LTS 版本）
npm 或 Yarn
Vue CLI（确保你安装的是最新版本）

安装Vue CLI

如果你还没有安装 Vue CLI，请先安装：

npm install -g @vue/cli

你可以使用以下命令来检查版本：

vue --version

确保你使用的是最新版本的 Vue CLI。

项目初始化

接下来，我们将使用 Vue CLI 初始化一个新的 Vue 3 项目，并启用 TypeScript 支持。

vue create vue3-typescript-demo

在创建项目过程中，选择以下选项：

• Manually select features
• Babel, TypeScript, Router, Vuex, Linter/Formatter
• Use class-style component syntax? No
• Use Babel alongside TypeScript? Yes

项目创建完成后，进入项目目录：

cd vue3-typescript-demo

启动开发服务器

确保一切正常工作，启动开发服务器：

npm run serve

打开浏览器，访问 http://localhost:8080，你应该会看到一个 Vue 欢迎页面。

配置 TypeScript

在这个项目中，TypeScript 已经通过 Vue CLI 自动配置好了。不过，我们仍然需要了解一些关键配置项。

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件。以下是一些关键配置项：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

shims-vue.d.ts

为了让 TypeScript 正确识别 .vue 文件，我们需要在项目根目录下创建一个 shims-vue.d.ts 文件：

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

组件开发

现在，我们已经配置好了 TypeScript，可以开始编写 Vue 组件了。

定义 Props

在 Vue 3 中，使用 TypeScript 定义组件的 Props 非常简单直观。

示例

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

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

export default defineComponent({
  name: 'HelloWorld',
  props: {
    title: {
      type: String,
      required: true
    }
  }
});
</script>

使用 Ref

在 Vue 3 中，使用 ref 进行数据绑定和操作变得更为强大和灵活。这里展示如何在 TypeScript 中使用 ref。

示例

<template>
  <div>
    <input v-model="message" placeholder="Enter a message" />
    <p>{{ message }}</p>
    <button @click="reset">Reset</button>
  </div>
</template>

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

export default defineComponent({
  name: 'MessageInput',
  setup() {
    const message = ref<string>('');

    const reset = () => {
      message.value = '';
    };

    return {
      message,
      reset
    };
  }
});
</script>

组件事件

处理组件事件和事件类型是 TypeScript 的另一个重要方面。

示例

<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

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

export default defineComponent({
  name: 'ClickButton',
  emits: ['customClick'],
  methods: {
    handleClick(event: MouseEvent) {
      this.$emit('customClick', event);
    }
  }
});
</script>

使用 emit 函数

在组合式 API 中，你可以使用 emit 函数来触发事件。

示例

<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

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

export default defineComponent({
  name: 'ClickButton',
  emits: ['customClick'],
  setup(props, { emit }) {
    const handleClick = (event: MouseEvent) => {
      emit('customClick', event);
    };

    return {
      handleClick
    };
  }
});
</script>

组合式 API 与 TypeScript

Vue 3 的组合式 API 与 TypeScript 的结合让代码更具模块化和可读性。

使用 reactive

reactive 允许你创建响应式的数据对象。

示例

<template>
  <div>
    <p>{{ state.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default defineComponent({
  name: 'Counter',
  setup() {
    const state = reactive({
      count: 0
    });

    const increment = () => {
      state.count++;
    };

    return {
      state,
      increment
    };
  }
});
</script>

使用 computed

computed 允许你创建基于其他响应式数据的计算属性。

示例

<template>
  <div>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default defineComponent({
  name: 'ComputedCounter',
  setup() {
    const state = reactive({
      count: 0
    });

    const doubleCount = computed(() => state.count * 2);

    const increment = () => {
      state.count++;
    };

    return {
      state,
      doubleCount,
      increment
    };
  }
});
</script>

Vue 3 与 TypeScript 最佳实践

在使用 Vue 3 和 TypeScript 开发过程中，遵循一些最佳实践可以帮助你编写高质量的代码。

类型推断

TypeScript 的强大之处在于其类型推断功能。尽量依赖 TypeScript 的类型推断，而不是显式地声明类型。

示例

const count = ref(0); // TypeScript 会自动推断出 count 是 number 类型

避免 any 类型

尽量避免使用 any 类型，因为它会消除 TypeScript 的类型检查机制。

示例

const message: any = 'Hello'; // 尽量避免

使用类型声明文件

将公共类型定义提取到单独的文件中，可以提高代码的可维护性。

示例

types.ts

export interface User {
  id: number;
  name: string;
  email: string;
}

在组件中使用：

import { User } from '@/types';

const user: User = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

使用 ESLint 和 Prettier

使用代码检查工具和格式化工具可以帮助你保持代码的一致性和质量。Vue CLI 允许你在项目初始化时选择 ESLint 和 Prettier。

安装 ESLint 和 Prettier

如果你在项目创建时没有选择 ESLint 和 Prettier，可以通过以下命令手动安装：

npm install --save-dev eslint prettier eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier

配置 ESLint

在项目根目录创建一个 .eslintrc.js 文件：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'vue/no-multiple-template-root': 'off',
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: false
      }
    ]
  }
}

配置 Prettier

在项目根目录创建一个 .prettierrc 文件：

{
  "singleQuote": true,
  "semi": false
}

使用 Vuex 和 TypeScript

Vuex 是 Vue 的状态管理模式，结合 TypeScript 可以更好地管理应用状态。

安装 Vuex

npm install vuex@next

创建一个 Vuex Store

store/index.ts

import { createStore } from 'vuex'

interface State {
  count: number
}

const store = createStore<State>({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

export default store

在组件中使用 Vuex

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'VuexCounter',
  setup() {
    const store = useStore()

    const count = computed(() => store.state.count)
    const doubleCount = computed(() => store.getters.doubleCount)

    const increment = () => {
      store.dispatch('increment')
    }

    return {
      count,
      doubleCount,
      increment
    }
  }
})
</script>

测试与调试

良好的测试和调试习惯是确保代码质量的重要保证。我们将使用 Jest 进行单元测试，并展示如何在 Vue 3 项目中进行调试。

安装 Jest

npm install --save-dev jest @vue/test-utils @types/jest ts-jest

配置 Jest

在项目根目录创建一个 jest.config.js 文件：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.[t|j]sx?$': 'babel-jest'
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'vue'],
  transformIgnorePatterns: ['/node_modules/']
}

编写单元测试

创建一个简单的组件测试文件 tests/unit/HelloWorld.spec.ts：

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      props: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

运行测试

npm run test:unit

调试

在 Vue 3 中，你可以使用浏览器的开发者工具进行调试。以下是一些调试技巧：

• 断点调试：在源码中设置断点，然后在浏览器中运行应用，代码执行到断点处会自动暂停。
• Vue Devtools：安装 Vue Devtools 浏览器扩展，可以方便
• Vue Devtools：安装 Vue Devtools 浏览器扩展，可以方便地查看和调试 Vue 组件的状态、事件、Vuex 状态等。你可以从这里下载并安装 Vue Devtools。