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

PreviousModelsNextCookbook

Last updated 1 year ago

Was this helpful?

In Ember Data, attr defines an attribute on a . 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 . 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.

Model
Transform