面试题：怎么让 Vue 项目支持使用 TypeScript？

在 Vue 项目中支持 TypeScript 可以提升代码的可维护性和开发体验。以下是详细的步骤和配置方法：

1. 创建支持 TypeScript 的 Vue 项目

如果你是从零开始创建项目，可以使用 Vue CLI 直接生成一个支持 TypeScript 的项目。

使用 Vue CLI 创建项目

安装 Vue CLI（如果尚未安装）：

   npm install -g @vue/cli

创建项目时选择 TypeScript 支持：

   vue create my-project

在项目配置选项中，选择 Manually select features，然后勾选 TypeScript。

完成创建后，项目会自动配置好 TypeScript 支持。

2. 在现有 Vue 项目中添加 TypeScript 支持

如果你的项目已经存在，可以通过以下步骤添加 TypeScript 支持。

安装依赖

安装 TypeScript 和相关依赖：

   npm install --save-dev typescript @vue/cli-plugin-typescript

安装 Vue 的 TypeScript 类型定义：

   npm install --save-dev @types/node @types/vue @types/vue-router

3. 配置 TypeScript

创建 `tsconfig.json`

在项目根目录下创建 tsconfig.json 文件，配置 TypeScript 编译选项。

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

配置 Vue CLI

在 vue.config.js 中配置 TypeScript 支持：

module.exports = {
  configureWebpack: {
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.vue', '.json'],
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          },
        },
      ],
    },
  },
};

4. 修改文件扩展名

将 .js 文件改为 .ts 文件，并将 Vue 单文件组件（.vue）中的 <script> 标签改为 <script lang="ts">。

示例：Vue 单文件组件

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

export default defineComponent({
  data() {
    return {
      message: 'Hello, TypeScript!',
    };
  },
});
</script>

<style scoped>
p {
  color: red;
}
</style>

5. 使用 TypeScript 特性

定义 Props

使用 TypeScript 的类型系统定义组件的 Props。

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

export default defineComponent({
  props: {
    title: {
      type: String,
      required: true,
    },
    count: {
      type: Number,
      default: 0,
    },
    items: {
      type: Array as PropType<string[]>,
      required: true,
    },
  },
});
</script>

使用 Composition API

在 Composition API 中使用 TypeScript 的类型推断。

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

export default defineComponent({
  setup() {
    const count = ref(0); // 类型推断为 Ref<number>

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

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

6. 配置 ESLint 支持 TypeScript

如果你的项目使用了 ESLint，需要配置 ESLint 以支持 TypeScript。

安装 ESLint 插件

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

配置 `.eslintrc.js`

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['@typescript-eslint'],
  rules: {
    // 自定义规则
  },
};

7. 解决常见问题

类型定义缺失

如果使用第三方库时提示类型定义缺失，可以尝试安装对应的类型定义包：

npm install --save-dev @types/库名

Vue 文件类型检查

确保在 .vue 文件中正确使用 lang="ts"，并在 tsconfig.json 中配置 include 包含 .vue 文件。

8. 示例项目结构

my-project/
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.ts
│   └── shims-vue.d.ts
├── tsconfig.json
├── vue.config.js
├── package.json
└── .eslintrc.js