Navigating Mixins in Ember CLI Typescript

Question

Navigating Mixins in Ember CLI Typescript

I'm curious about the best approach for handling mixins in a typed Ember application. While removing mixins from the application is ideal, many addons do not yet support TypeScript. So, how can we effectively utilize Ember Simple Auth's application route mixin (or any other mixins)? Here's a code snippet that I haven't tested, but I think it should work, although it does feel a bit unusual:

import Route from '@ember/routing/route';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';

export default class ApplicationRoute extends Route.extend(ApplicationRouteMixin, {
  // Prototype Code Here?
}) {
  // Class TS Code Here?
}

Once again, I haven't tried this and I'm just starting out with TypeScript, so any guidance and clarification would be welcome.

typescript ember.js

Answer 1

Answer №1

Your approach with Classic Ember Mixin instances bound to the prototype is on the right track. It's important to note that this concept also applies to ES6 classes; TypeScript classes are impacted because they essentially act as types on ES6 classes.

import Route from '@ember/routing/route';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';

export default class ApplicationRoute extends Route.extend(ApplicationRouteMixin, {
  // Any requirements of the mixin should be included here
}) {
  // Regular class code can depend on the mixin but remains separate
}

An alternative perspective is viewing the object literal passed into the class extend() method as a type of mixin in itself.

This coding pattern works best for backwards compatibility or when an addon mandates it. Typing mixins correctly with TypeScript can be challenging and mixing them with classes can lead to unexpected behaviors, as demonstrated in this example. (These oddities would also apply to plain JavaScript using ES6 classes.)

When writing new code, consider these options:

Utilize traditional inheritance with a single base class. This is typically the simplest solution when only one mixin is involved.
Transition to defining pure functions, such as in app/lib/validation, and calling them with appropriate arguments from class instances.

Answer 2

Your approach with Classic Ember Mixin instances bound to the prototype is on the right track. It's important to note that this concept also applies to ES6 classes; TypeScript classes are impacted because they essentially act as types on ES6 classes.

import Route from '@ember/routing/route';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';

export default class ApplicationRoute extends Route.extend(ApplicationRouteMixin, {
  // Any requirements of the mixin should be included here
}) {
  // Regular class code can depend on the mixin but remains separate
}

An alternative perspective is viewing the object literal passed into the class extend() method as a type of mixin in itself.

This coding pattern works best for backwards compatibility or when an addon mandates it. Typing mixins correctly with TypeScript can be challenging and mixing them with classes can lead to unexpected behaviors, as demonstrated in this example. (These oddities would also apply to plain JavaScript using ES6 classes.)

When writing new code, consider these options:

Utilize traditional inheritance with a single base class. This is typically the simplest solution when only one mixin is involved.
Transition to defining pure functions, such as in app/lib/validation, and calling them with appropriate arguments from class instances.

Navigating Mixins in Ember CLI Typescript

Answer №1

Similar questions

Angular2 Cache: Enhance Your Application's Performance

Using Typescript alongside Angular 1.6 and browserify for your development needs

Creating a TypeScript schema with nested maps and arrays using Dynamoose

Exploring end-to-end testing with NestJS and Guards

Discovering and Implementing Background Color Adjustments for Recently Modified or Added Rows with Errors or Blank Cells in a dx-data-grid

Can anyone provide a workaround for bypassing ts 2339 error in order to access class methods? Alternatively, is it feasible to define class methods outside of the class in typescript?

Methods to acquire the 'this' type in TypeScript

Updating the DOM after making changes with Maquette involves calling the `renderMaquette

Finding the number enclosed within two characters - TypeScript

Leveraging multiple routes for a single component in Angular 6

How can I reduce unnecessary spacing in a primeNg Dropdown (p-dropdown) filter within an Angular 5 application?

Guide on packaging an Angular 2 Typescript application with Gulp and SystemJS

Can the garbage collector in Typescript/JavaScript effectively handle circular references, or does it result in memory leaks?

Form submission returns JSON data with an undefined value from the server

What is the process of assigning a value type to a generic key type of an object in typescript?

Warning: Node encountering unexpected Unhandled Promise Rejection ERROR

Before running any unit tests, I have to address all linting issues as required by ng test

The module ~/assets/images/flags/undefined.png could not be found in the directory

The Type-Fest library in TypeScript is malfunctioning when used with a constant

Experiencing TypeScript error in VSCode while trying to run in Nodejs? Here's how to troubleshoot and resolve