Property Decorators

Introduction

In TypeScript, decorators are a powerful feature that allows you to modify or enhance classes and their members (such as methods, properties, and accessors) in a declarative manner. One of the common use cases for decorators is to work with class properties. This tutorial will guide you through understanding and using property decorators in TypeScript.

Concept

A property decorator is a function that can be applied to a class property declaration. It receives two arguments:

1. Target: The constructor function of the class for static members, or the prototype of the class for instance members.
2. PropertyKey: The name of the member.

The primary purpose of a property decorator is to observe, modify, or replace the behavior of a class property.

Examples

Let's dive into some practical examples to understand how property decorators work.

Example 1: Logging Property Access

Suppose you want to log every time a property is accessed. You can create a property decorator for this purpose.

1function logProperty(target: any, key: string) {
2let value = target[key];
3 
4const getter = function () {
5  console.log(`Getting ${key} with value ${value}`);
6  return value;
7  };
8 
9  const setter = function (newVal: any) {
10  console.log(`Setting ${key} to ${newVal}`);
11  value = newVal;
12  };
13 
14Object.defineProperty(target, key, {
15  get: getter,
16  set: setter,
17  enumerable: true,
18  configurable: true
19});
20}
21 
22class Person {
23@logProperty
24public name: string;
25 
26constructor(name: string) {
27  this.name = name;
28}
29}
30 
31const person = new Person('John');
32console.log(person.name); // Getting name with value John
33person.name = 'Jane';   // Setting name to Jane

In this example, the logProperty decorator logs every time the name property is accessed or modified. The Object.defineProperty method is used to redefine the getter and setter of the property.

Example 2: Validating Property Values

Another common use case for decorators is to validate property values. Let's create a decorator that ensures a property value meets certain criteria.

1function validate(target: any, key: string) {
2let value = target[key];
3 
4const getter = function () {
5  return value;
6};
7 
8const setter = function (newVal: any) {
9  if (typeof newVal !== 'string' || newVal.length < 3) {
10    throw new Error(`Invalid value for ${key}`);
11  }
12  value = newVal;
13};
14 
15Object.defineProperty(target, key, {
16  get: getter,
17  set: setter,
18  enumerable: true,
19  configurable: true
20});
21}
22 
23class User {
24@validate
25public username: string;
26 
27constructor(username: string) {
28  this.username = username;
29}
30}
31 
32const user = new User('john_doe');
33console.log(user.username); // john_doe
34 
35try {
36user.username = 'jo'; // Throws an error
37} catch (e) {
38console.error(e.message); // Invalid value for username
39}

In this example, the validate decorator ensures that the username property is a string with at least three characters. If the validation fails, it throws an error.

What's Next?

Now that you've learned about property decorators, you might want to explore accessor decorators next. Accessor decorators allow you to modify or enhance class accessors (getters and setters) in a similar way to property decorators.

Stay tuned for more tutorials on TypeScript decorators!