Nicole Oliver
I'm a software developer who loves teaching and learning! I also play with paint and pixels.
Nicole Oliver
@nixallover
Add behavior to an individual object, dynamically, without affecting the behavior of other objects from the same class
Add functionality to classes and class members at definition time
(in TypeScript)
A way to observe, modify, and replace class declarations and members
A way to provide annotations and a meta-programming syntax for class declarations and members
{
/* Experimental Options */
/* Enables experimental support for ES7 decorators. */
"experimentalDecorators": true,
/* Enables experimental support for emitting type metadata for decorators. */
"emitDecoratorMetadata": true,
}
tsconfig.json
@sealed
class Raccoon {
isFuzzy: boolean = true;
shouldPet: boolean = false;
}
function sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
class Bear {
@deprecate
hibernate(): void {
// ...
}
}
function deprecate(
target: any,
propertyKey: string,
descriptor: PropertyDescriptor
) {
const message = 'This will be removed in future versions';
return {
...descriptor,
value: () => {
console.warn(`DEPRECATED: ${key}: ${message}`;
return descriptor.value.apply(this, arguments);
}
};
}
class Bear {
@validate
growl(@required volume: 1 | 11): void {
if (volume === 1) {
console.log('Grrraaaa');
} else if (volume === 11) {
console.log('GRRRRAAAAAWWHRHHF');
}
}
}
import "reflect-metadata";
const requiredMetadataKey = Symbol("required");
function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
let existingReqParams: number[] = Reflect.getOwnMetadata(
requiredMetadataKey,
target,
propertyKey
) || [];
existingReqParams.push(parameterIndex);
Reflect.defineMetadata(requiredMetadataKey, existingReqParams, target, propertyKey);
}
PropertyDescriptor
configurable enumerable writable value
let cub = {};
cub.name = 'Rupert';
// Defaults - created by assignment
{
configurable: true,
enumerable: true,
writable: true,
value: 'Rupert'
}
Object.defineProperty(cub, 'name', {value: 'Rupert'});
// Defaults - created with Object.defineProperty
{
configurable: false,
enumerable: false,
writable: false,
value: 'Rupert'
}
Nicole Oliver
@nixallover
Huge thanks to ngAtlanta organizers, Angular Seattle friends, my Nintendo coworkers, and Jude Poole for ideas and support!
By Nicole Oliver
As Angular developers we use decorators every day. Let's peek at how the core Angular decorators bring our code to life, and use that as a springboard for a discussion about creating our own magical wrappers in TypeScript.
I'm a software developer who loves teaching and learning! I also play with paint and pixels.