面试题：TypeScript与Vue3组合式API中的依赖注入与类型安全

Question

在Vue3的组合式API项目中，使用TypeScript实现依赖注入功能，并确保注入的依赖类型安全。请阐述实现思路并提供核心代码示例，解释如何在不同组件间传递和使用依赖且保证类型正确性。

Answer 1

实现思路

1. 创建注入令牌：使用Symbol创建一个唯一的令牌来标识要注入的依赖，以确保类型安全。
2. 提供依赖：在父组件或应用程序根组件中，使用provide函数通过令牌提供依赖。
3. 注入依赖：在子组件中，使用inject函数通过相同的令牌注入依赖，并进行类型断言确保类型正确。

核心代码示例

import { provide, inject, reactive } from 'vue';

// 创建注入令牌
const token = Symbol('MyDependency');

// 定义依赖类型
interface MyDependency {
  message: string;
  doSomething(): void;
}

// 提供依赖的组件
export const ProviderComponent = {
  setup() {
    const dependency: MyDependency = reactive({
      message: 'Hello from dependency',
      doSomething() {
        console.log('Doing something...');
      }
    });
    provide(token, dependency);
    return {};
  },
  template: '<div><slot /></div>'
};

// 注入依赖的组件
export const ConsumerComponent = {
  setup() {
    const injected = inject<MyDependency>(token);
    if (!injected) {
      throw new Error('Dependency not provided');
    }
    return {
      dependency: injected
    };
  },
  template: `<div>
    <p>{{ dependency.message }}</p>
    <button @click="dependency.doSomething">Do Something</button>
  </div>`
};

解释

1. 令牌创建：Symbol('MyDependency')创建一个唯一的标识，用于在provide和inject中关联依赖。
2. 提供依赖：在ProviderComponent的setup函数中，创建一个符合MyDependency类型的响应式对象，并通过provide(token, dependency)提供出去。
3. 注入依赖：在ConsumerComponent的setup函数中，使用inject<MyDependency>(token)注入依赖，并进行非空检查。若依赖存在，就可以安全地使用，因为类型断言确保了其类型正确性，从而保证在不同组件间传递和使用依赖时的类型安全。