05-decorators.ts
Typescript/src/02-intermediate/05-decorators.ts
// ============================================
// 05. Decorators
// ============================================
// Note: Enable "experimentalDecorators" in tsconfig.json
// Class Decorator
function sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
@sealed
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
}
// Decorator Factory
function color(value: string) {
return function (constructor: Function) {
console.log(`Applying color ${value} to ${constructor.name}`);
};
}
@color("red")
class Car {
brand: string = "Toyota";
}
// Method Decorator
function enumerable(value: boolean) {
return function (
target: any,
propertyKey: string,
descriptor: PropertyDescriptor
) {
descriptor.enumerable = value;
};
}
class Greeter2 {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
@enumerable(false)
greet() {
return "Hello, " + this.greeting;
}
}
// Property Decorator
function format(formatString: string) {
return function (target: any, propertyKey: string) {
console.log(`Formatting ${propertyKey} with ${formatString}`);
};
}
class User {
@format("uppercase")
name: string = "Alice";
}
// Logging Decorator
function log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
const method = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`Calling ${propertyName} with`, args);
const result = method.apply(this, args);
console.log(`Result:`, result);
return result;
};
}
class Calculator {
@log
add(a: number, b: number): number {
return a + b;
}
}
const calc = new Calculator();
calc.add(5, 3); // Logs: Calling add with [5, 3], Result: 8
// Validation Decorator
function validate(min: number, max: number) {
return function (target: any, propertyKey: string) {
let value: number;
const getter = () => value;
const setter = (newVal: number) => {
if (newVal < min || newVal > max) {
throw new Error(`Value must be between ${min} and ${max}`);
}
value = newVal;
};
Object.defineProperty(target, propertyKey, {
get: getter,
set: setter,
});
};
}
class Product {
@validate(0, 100)
price: number = 0;
}
const product = new Product();
product.price = 50; // OK
// product.price = 150; // Error: Value must be between 0 and 100
export { Greeter, Car, Calculator, Product };
関連記事
01-introduction.ts
01-introduction.ts — typescript source code from the Typescript learning materials (Typescript/src/01-beginner/01-introduction.ts).
記事を読む →02-basic-types.ts
02-basic-types.ts — typescript source code from the Typescript learning materials (Typescript/src/01-beginner/02-basic-types.ts).
記事を読む →03-variables.ts
03-variables.ts — typescript source code from the Typescript learning materials (Typescript/src/01-beginner/03-variables.ts).
記事を読む →04-functions.ts
04-functions.ts — typescript source code from the Typescript learning materials (Typescript/src/01-beginner/04-functions.ts).
記事を読む →05-interfaces.ts
05-interfaces.ts — typescript source code from the Typescript learning materials (Typescript/src/01-beginner/05-interfaces.ts).
記事を読む →06-classes.ts
06-classes.ts — typescript source code from the Typescript learning materials (Typescript/src/01-beginner/06-classes.ts).
記事を読む →