TypeScript严格模式下Mirage.js的schema参数对应类型查询

问题场景 #

在开启严格模式的TypeScript项目中使用mirage.js模拟未开发完成的API时，routes()方法内的schema参数存在类型标注问题：

• 代码本身可正常运行，但使用any作为schema类型会触发类型警告
• 尝试直接解构获取schema下的模型属性（如todos）时，找不到对应属性的正确类型

问题示例代码 #

使用any标注类型的写法：

routes () {
  this.get(`todos`, (schema: any) => {
    return schema.todos.all();  
  });
}

直接解构但无类型提示的写法：

routes () {
  this.get(`todos`, ({ todos }) => {
    return todos.all();  
  });
}

解决方法 #

通过TypeScript的模块扩展特性，将自定义的mirage模型合并到mirage内置的类型定义中，即可获得完整的类型提示，无需使用any。

• 首先定义业务模型对应的实体类型，以Todo为例：

  // 根据自身业务字段定义即可
  type Todo = {
    id: string;
    content: string;
    isCompleted: boolean;
  }
  

• 在mirage配置的入口文件，或者项目的全局TS声明文件（如src/types/mirage.d.ts）中，扩展miragejs的Registry类型，注册你定义的所有模型：

  import { Model } from 'miragejs';
  
  declare module 'miragejs' {
    interface Registry {
      models: {
        // key和你在mirage config中定义的model名保持一致
        todos: Model<Todo>;
        // 其他模型可按相同格式追加，例：users: Model<User>
      };
      factories: {}; // 若使用了factories，可在此处同步声明对应类型
    }
  }
  

• 类型声明完成后，回到routes配置中，无需手动标注schema类型，TS会自动推导出包含所有自定义模型属性的正确类型，解构写法也能获得完整的类型提示：

  routes () {
    // 直接写即可，schema.todos有完整类型提示
    this.get(`todos`, (schema) => {
      return schema.todos.all();  
    });
  
    // 解构写法同样有类型提示，不会报属性不存在的错误
    this.get(`todos`, ({ todos }) => {
      return todos.all();  
    });
  }
  

提示：类型声明仅需要全局声明一次即可，不需要在每个路由回调里重复标注类型。如果项目中mirage配置拆分了多个文件，把类型声明放在全局TS声明文件中即可对所有配置文件生效。

补充说明 #

示例项目的miragejs文件夹下存放了完整的配置代码，可参考对应结构调整类型声明。

内容的提问来源于stack exchange，提问作者jogarcia