decorators | References | ArcGIS Maps SDK for JavaScript

import { aliasOf, property, subclass, cast, cast } from "@arcgis/core/core/accessorSupport/decorators.js";

const { aliasOf, property, subclass, cast, cast } = await $arcgis.import("@arcgis/core/core/accessorSupport/decorators.js");

Since: ArcGIS Maps SDK for JavaScript 4.2

This module contains Accessor TypeScript decorators. Decorators allow us to define and/or modify behavior of existing properties, methods, and constructors at design time.

See also

Functions

aliasOf

deprecated Function

A property decorator that creates a two-way binding between the property it decorates and an inner property of one of its members.

Signature: aliasOf (aliasedPropertyName: string): PropertyDecorator

Parameters

Parameter	Type	Description	Required
aliasedPropertyName	string	The aliased property name.

Returns: PropertyDecorator
The property decorator.

Examples

// property example
@aliasOf("viewModel.name")
name: string = "name";

// method example
@aliasOf("viewModel.someMethod")
someMethod: () => string;

property

Function

Type parameters: <T extends Base, Base = T>

This convenience decorator is used to define an Accessor property. Any property defined with this decorator can now be get and set. In addition, you can watch for any property changes.

See also

Accessor

Signature: property <T extends Base, Base = T>(metadata?: InputPropertyMetadata<T, Base>): PropertyDecorator

Parameters

Parameter	Type	Description	Required
metadata	InputPropertyMetadata<T, Base>	An object describing the property.

Returns: PropertyDecorator
The property descriptor.

Example

// typescript syntax to specify the property.
@property()
title: string = "Awesome Title!"

subclass

Function

This decorator is used to define an Accessor subclass. Any subclass of Accessor must use the @subclass decorator.

Signature: subclass (declaredClass?: string): any

Parameters

Parameter	Type	Description	Required
declaredClass	string	The subclass name.

Returns: any
The class decorator.

Example

// TypeScript syntax which creates a subclass that extends the Accessor class.
@subclass("my.custom.class")
class MyCustomClass extends Accessor {
  // ...
}

cast

Function

This property decorator is used to define the function or class for a property.

See also

Accessor

Signature: cast (functionOrClass: Function): PropertyDecorator

Parameters

Parameter	Type	Description	Required
functionOrClass	Function	The function or class to cast the property

Returns: PropertyDecorator
The property descriptor.

Example

import Accessor from "@arcgis/core/core/Accessor.js";
import { subclass, property, cast } from "@arcgis/core/core/accessorSupport/decorators.js";

function clampRGB(component: number) {
  return Math.min(Math.max(component, 0), 255);
}

function clampAlpha(alpha: number) {
  return Math.min(Math.max(alpha, 0), 1);
}

@subclass()
class Color extends Accessor {

  @property()
  @cast(clampRGB)
  r: number = 0;

  @property()
  @cast(clampRGB)
  g: number = 0;

  @property()
  @cast(clampRGB)
  b: number = 0;

  @property()
  @cast(clampRGB)
  a: number = 1;
}

cast

Function

This method decorator is used to define the method that will cast a property from a class.

See also

Accessor

Signature: cast (propertyName: string): MethodDecorator

Parameters

Parameter	Type	Description	Required
propertyName	string	The property name the function will cast.

Returns: MethodDecorator
The method descriptor.

Example

import Accessor from "@arcgis/core/core/Accessor.js";
import { subclass, property, cast } from "@arcgis/core/core/accessorSupport/decorators.js";

@subclass()
class Color extends Accessor {

  @property()
  r: number = 0;

  @property()
  g: number = 0;

  @property()
  b: number = 0;

  @property()
  a: number = 1;

  @cast("r")
  @cast("g")
  @cast("b")
  protected castComponent(value) {
    // cast method that clamp the value that
    // will be set on r, g or b between 0 and 255
    return Math.max(0, Math.min(255, value));
  }

  @cast("a")
  protected castAlpha(value) {
    // cast method that clamp the value that
    // will be set on a between 0 and 255
    return Math.max(0, Math.min(1, value));
  }
}