ember-cli-typescript
  • ember-cli-typescript
  • Installation
  • Configuration
  • TypeScript and Ember
    • Using TypeScript With Ember Effectively
    • Decorators
    • Current limitations
    • Building Addons in TypeScript
    • Understanding the @types Package Names
  • Working With Ember
    • Components
    • Services
    • Routes
    • Controllers
    • Helpers
    • Testing
  • Working With Ember Data
    • Models
    • Transforms
  • Cookbook
    • Working with route models
  • Working With Ember Classic
    • EmberComponent
    • Mixins
    • Computed Properties
    • EmberObject
  • Upgrading from 1.x
  • Troubleshooting
    • Conflicting Type Dependencies
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
Export as PDF
  1. Working With Ember Data

Transforms

In Ember Data, attr defines an attribute on a Model. By default, attributes are passed through as-is, however you can specify an optional type to have the value automatically transformed. Ember Data ships with four basic transform types: string, number, boolean and date.

You can define your own transforms by subclassing Transform. Ember Data transforms are normal TypeScript classes. The return type of deserialize method becomes type of the model class property.

You may define your own transforms in TypeScript like so:

# app/transforms/coordinate-point.ts
import Transform from '@ember-data/serializer/transform';

declare module 'ember-data/types/registries/transform' {
  export default interface TransformRegistry {
    'coordinate-point': CoordinatePointTransform;
  }
}

export type CoordinatePoint = {
  x: number;
  y: number;
};

export default class CoordinatePointTransform extends Transform {
  deserialize(serialized): CoordinatePoint {
    return { x: value[0], y: value[1] };
  }

  serialize(value): number {
    return [value.x, value.y];
  }
}

# app/models/cursor.ts
import Model, { attr } from '@ember-data/model';
import { CoordinatePoint } from 'agwa-data/transforms/coordinate-point';

declare module 'ember-data/types/registries/model' {
  export default interface ModelRegistry {
    cursor: Cursor;
  }
}

export default class Cursor extends Model {
  @attr('coordinate-point') declare position: CoordinatePoint;
}

Note that you should declare your own transform under TransformRegistry to make attr to work with your transform.

PreviousModelsNextCookbook

Last updated 1 year ago

Was this helpful?