在Ember CLI TypeScript应用中处理Mixin的最佳方法咨询

嘿，刚接触TypeScript的Ember开发者确实会在Mixin这块有点懵，我来给你捋清楚正确的处理方式～

首先得说：你写的那段代码其实是可行的，只是因为Ember的Mixin机制是基于经典类原型，而TypeScript用的是原生类语法，所以看起来有点“混搭”，但这是当前过渡阶段的标准写法。下面给你拆解优化，并解释背后的逻辑：

正确的代码示例 #

import Route from '@ember/routing/route';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
// 如果插件有类型定义，可导入Session类型增强提示
import type { Session } from 'ember-simple-auth';

// 第一步：用Ember经典类的.extend()混合Mixin和原型级配置
export default class ApplicationRoute extends Route.extend(ApplicationRouteMixin, {
  // 这里放需要挂载到原型上的Mixin相关配置/方法
  // 比如覆盖Mixin的默认钩子，保留原始逻辑的同时加自定义行为
  sessionAuthenticated() {
    // 调用Mixin的原始实现
    this._super(...arguments);
    // 你的自定义逻辑：登录成功后跳转到仪表盘
    this.transitionTo('dashboard');
  }
}) {
  // 第二步：在TypeScript类中编写类级别的属性和方法
  // 声明session属性的类型，获得更好的TS提示
  declare session: Session;

  model() {
    // 示例：路由模型逻辑，和Mixin无关的常规代码
    return this.store.findAll('notification');
  }

  // 也可以在类里直接覆盖Mixin的方法，用TS的super语法
  sessionInvalidated() {
    super.sessionInvalidated(...arguments);
    // 自定义登出后的跳转逻辑
    this.transitionTo('login');
  }
}

关键逻辑说明 #

1. 为什么要用.extend()？
   Ember的Mixin是基于经典类原型系统设计的，而TypeScript的类是原生JS类语法，两者需要通过.extend()来桥接——这个方法会把Mixin的属性/方法合并到Route的原型上，再让你的TS类继承这个混合后的原型类，这样就能同时获得Mixin的功能和TS的类型检查。

2. 类型提示怎么处理？
   现在主流Ember插件（包括ember-simple-auth）都提供了TypeScript类型定义，只要你的项目正确配置了ember-cli-typescript，就能自动获得Mixin方法/属性的类型提示。如果遇到个别无类型的Mixin，可以手动声明类型（比如上面的declare session: Session;），或者临时用// @ts-ignore跳过检查（不推荐长期用）。

3. 覆盖Mixin方法的注意点
   不管是在.extend()里用this._super()，还是在TS类里用super.xxx()，一定要调用原始方法——因为Mixin里封装了很多核心逻辑（比如session状态监听、路由跳转拦截），跳过调用会破坏原有功能。

关于“怪异感”的补充 #

这种“经典类+TS类”的混搭写法确实有点别扭，但这是Ember从经典类向原生类过渡阶段的临时方案。等后续插件都支持原生类装饰器或其他替代Mixin的方案后，写法会更简洁，但目前这是使用Mixin最稳妥、符合官方规范的方式。

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