阐述 Vue 3 源码中 `vue-tsc` (TypeScript 命令行工具) 的工作原理，以及它如何进行类型检查和生成声明文件 (`.d.ts`)。

各位同学们，早上好！今天咱们来聊聊 Vue 3 源码里一个相当重要的角色——vue-tsc。它就像 Vue 3 项目的 "语法警察" 兼 "文件管理员"，负责确保咱们的代码类型安全，还能自动生成声明文件，让其他开发者用起来更顺手。

一、vue-tsc：TypeScript 的得力助手

首先，咱们得明确一点：vue-tsc 并不是 Vue 团队自己从头撸的 TypeScript 编译器。它实际上是 tsc (TypeScript Compiler) 的一个包装器，做了些针对 Vue 特性的增强和适配。 换句话说，vue-tsc 本身就调用了TypeScript Compiler，并复用了它的类型检查和代码生成能力。

简单来说，vue-tsc 的主要职责有两项：

1. 类型检查： 对 Vue 组件 (.vue 文件) 和 TypeScript 代码 (.ts 文件) 进行类型检查，确保代码符合 TypeScript 的类型规范。
2. 声明文件生成： 根据 TypeScript 代码生成对应的声明文件 (.d.ts)，方便其他 TypeScript 项目使用。

二、vue-tsc 的核心流程

vue-tsc 的工作流程大致可以分为以下几个步骤：

1. 配置读取： 读取 tsconfig.json 文件，获取 TypeScript 编译器的配置信息，例如编译目标、模块系统、包含的文件等等。
2. 文件解析： 解析项目中的 .vue 文件、.ts 文件等，构建语法树。
3. 类型检查： 使用 TypeScript 编译器对语法树进行类型检查，发现类型错误并报告。
4. 代码生成 (可选)： 如果配置了代码生成选项，则将 TypeScript 代码编译成 JavaScript 代码。
5. 声明文件生成： 根据 TypeScript 代码生成对应的声明文件 (.d.ts)。

这个流程可以用一个简单的表格来概括：

步骤	描述
配置读取	vue-tsc 首先会读取项目根目录下的 tsconfig.json 文件，这个文件定义了 TypeScript 编译器的各种选项，例如要编译哪些文件、编译的目标 JavaScript 版本、是否生成声明文件等等。 如果没有找到 tsconfig.json 文件，vue-tsc 可能会使用一些默认配置。
文件解析	接下来，vue-tsc 会根据 tsconfig.json 文件中 include 和 exclude 选项的配置，找到需要编译的文件。然后，它会使用 TypeScript 编译器将这些文件解析成抽象语法树 (AST)。 AST 是代码的一种抽象表示，它将代码的结构和语义信息都编码在其中。 对于 .vue 文件，vue-tsc 会使用 @vue/compiler-sfc 将其拆解为 <template>、<script> 和 <style> 等部分，然后分别处理。 例如，<script> 部分会被当作 TypeScript 代码进行解析，<template> 部分会被编译成渲染函数。
类型检查	vue-tsc 的核心任务就是进行类型检查。它会遍历 AST，检查代码中的类型是否匹配。例如，如果一个变量被声明为 number 类型，但是却被赋值为 string 类型，vue-tsc 就会报错。 vue-tsc 还会检查 Vue 组件的 props、data、computed 属性等的类型是否正确。 为了更好地支持 Vue 的特性，vue-tsc 集成了 Vue 的类型定义，例如 PropType、DefineComponent 等，这些类型定义可以帮助 vue-tsc 更准确地进行类型检查。 类型检查的结果会被输出到控制台，开发者可以根据这些错误信息来修复代码。
代码生成	如果 tsconfig.json 文件中配置了 compilerOptions.declaration 为 true，那么 vue-tsc 还会生成声明文件 (.d.ts)。 声明文件描述了 TypeScript 代码的类型信息，它可以让其他 TypeScript 项目在使用这个模块时，获得更好的类型提示和类型检查。 声明文件的生成过程也是基于 AST 的。vue-tsc 会遍历 AST，提取出类型信息，然后将这些信息写入到声明文件中。 对于 Vue 组件，vue-tsc 会生成包含组件 props、data、computed 属性等类型信息的声明文件。
声明文件生成	生成声明文件 (.d.ts) 是 vue-tsc 的另一个重要任务。声明文件描述了 TypeScript 代码的 API 接口和类型信息，方便其他 TypeScript 项目使用。 vue-tsc 会根据 TypeScript 代码的类型信息生成对应的声明文件。例如，对于一个函数，vue-tsc 会生成包含函数参数类型和返回值类型的声明。 对于 Vue 组件，vue-tsc 会生成包含组件 props、data、computed 属性等类型信息的声明。 生成的声明文件会被保存在与 TypeScript 代码相同的目录下，文件名与 TypeScript 代码的文件名相同，但后缀名为 .d.ts。 例如，如果有一个名为 MyComponent.vue 的 Vue 组件，vue-tsc 可能会生成一个名为 MyComponent.vue.d.ts 的声明文件。

三、.vue 文件中的类型检查

.vue 文件是 Vue 项目的核心组成部分。vue-tsc 需要能够正确地解析 .vue 文件，并对其中的 TypeScript 代码进行类型检查。

1. @vue/compiler-sfc 的作用

vue-tsc 依赖于 @vue/compiler-sfc 这个库来解析 .vue 文件。@vue/compiler-sfc 会将 .vue 文件拆解成三个主要部分：

• <template>：模板部分，通常包含 HTML 和 Vue 指令。
• <script>：脚本部分，通常包含 Vue 组件的逻辑代码，可以使用 TypeScript。
• <style>：样式部分，通常包含 CSS 或其他样式代码。

vue-tsc 主要关注 <script> 部分，它会将这部分代码当作 TypeScript 代码进行解析和类型检查。

2. 类型推断与类型注解

在 <script> 部分，我们可以使用 TypeScript 的类型推断和类型注解来指定变量、函数等的类型。

• 类型推断： TypeScript 编译器会根据变量的初始值自动推断出变量的类型。
• 类型注解： 我们可以使用冒号 : 来显式地指定变量、函数等的类型。

例如：

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

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

// 类型推断：message 的类型会被推断为 string
const message = ref('Hello Vue!');

// 类型注解：count 的类型被显式地指定为 number
const count: number = ref(0);

function increment(value:number): number {
  return count.value + value;
}

</script>

在这个例子中，message 的类型会被 TypeScript 编译器自动推断为 string，而 count 的类型则被显式地指定为 number。

3. defineProps 和 defineEmits 的类型支持

Vue 3 提供了 defineProps 和 defineEmits 这两个 API，用于定义组件的 props 和 emits。vue-tsc 提供了对这两个 API 的类型支持，可以确保 props 和 emits 的类型安全。

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

// 定义 props 的类型
const props = defineProps<{
  name: string;
  age?: number; // 可选的 prop
}>();

// 定义 emits 的类型
const emit = defineEmits<{
  (e: 'update', value: string): void;
  (e: 'delete'): void;
}>();

function handleClick() {
  emit('update', 'New Value');
  emit('delete');
}

</script>

在这个例子中，我们使用 defineProps 定义了 name 和 age 两个 props，并指定了它们的类型。我们还使用 defineEmits 定义了 update 和 delete 两个 emits，并指定了它们的参数类型。

四、声明文件 (.d.ts) 的生成

声明文件 (.d.ts) 描述了 TypeScript 代码的 API 接口和类型信息，方便其他 TypeScript 项目使用。vue-tsc 会根据 TypeScript 代码的类型信息生成对应的声明文件。

1. 声明文件的作用

• 类型提示： 在其他 TypeScript 项目中使用该模块时，编辑器可以根据声明文件提供类型提示。
• 类型检查： TypeScript 编译器可以根据声明文件进行类型检查，确保代码的类型安全。
• 方便 JavaScript 项目使用： 即使是 JavaScript 项目，也可以通过声明文件获得一些类型信息，提高代码的可维护性。

2. 声明文件的生成过程

vue-tsc 会遍历 AST，提取出类型信息，然后将这些信息写入到声明文件中。例如，对于一个函数，vue-tsc 会生成包含函数参数类型和返回值类型的声明。

// 原始 TypeScript 代码
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

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

vue-tsc 生成的声明文件：

// 声明文件 (greet.d.ts)
export function greet(name: string): string;
export interface User {
    name: string;
    age: number;
}

3. Vue 组件的声明文件

对于 Vue 组件，vue-tsc 会生成包含组件 props、data、computed 属性等类型信息的声明文件。

例如，对于一个名为 MyComponent.vue 的 Vue 组件：

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

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

const props = defineProps<{
  name: string;
  age?: number;
}>();

const message = ref('Hello Vue!');
</script>

vue-tsc 可能会生成一个名为 MyComponent.vue.d.ts 的声明文件，其中包含组件 props 的类型信息：

// MyComponent.vue.d.ts
import type { DefineComponent } from 'vue';

declare const MyComponent: DefineComponent<{
    name: string;
    age?: number | undefined;
}, {}, any>;

export default MyComponent;

这个声明文件描述了 MyComponent 组件的 props 类型，方便其他 TypeScript 项目在使用该组件时获得类型提示和类型检查。

五、vue-tsc 的使用

1. 安装

通常情况下，vue-tsc 会作为 @vue/cli-plugin-typescript 的依赖自动安装。如果你的项目中没有安装 vue-tsc，可以使用以下命令进行安装：

npm install --save-dev vue-tsc

2. 配置 tsconfig.json

tsconfig.json 文件是 TypeScript 编译器的配置文件。我们需要在 tsconfig.json 文件中配置一些选项，以确保 vue-tsc 能够正确地进行类型检查和生成声明文件。

一些常用的配置选项：

• compilerOptions.target: 指定编译的目标 JavaScript 版本，例如 "esnext"。
• compilerOptions.module: 指定模块系统，例如 "esnext" 或 "commonjs"。
• compilerOptions.jsx: 指定 JSX 编译模式，通常设置为 "preserve"。
• compilerOptions.declaration: 是否生成声明文件，设置为 true 可以生成声明文件。
• compilerOptions.strict: 是否启用严格模式，设置为 true 可以启用更严格的类型检查。
• include: 指定需要编译的文件或目录。
• exclude: 指定需要排除的文件或目录。

一个典型的 tsconfig.json 文件：

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

3. 运行 vue-tsc

安装并配置好 vue-tsc 后，就可以在命令行中运行 vue-tsc 命令进行类型检查和生成声明文件了。

vue-tsc --noEmit --watch  #类型检查，不输出任何文件，监听文件变化
vue-tsc --declaration # 生成声明文件

• --noEmit: 只进行类型检查，不生成 JavaScript 代码或声明文件。这个选项通常用于在开发过程中进行快速的类型检查。
• --watch: 监听文件变化，当文件发生修改时自动进行类型检查。
• --declaration: 生成声明文件 (.d.ts)。

六、总结

vue-tsc 是 Vue 3 项目中不可或缺的工具，它负责进行类型检查和生成声明文件，确保代码的类型安全和可维护性。 理解 vue-tsc 的工作原理，可以帮助我们更好地使用 TypeScript 开发 Vue 项目，提高开发效率和代码质量。

好了，今天的分享就到这里，大家有什么问题可以提问。