function logParamTypes(target : any, key : string) {
  var types = Reflect.getMetadata("design:paramtypes", target, key);
  var s = types.map(a => a.name).join();
  console.log(`${key} param types: ${s}`);
}

class Foo {}
interface IFoo {}

class Demo{
  @logParameters
  doSomething(
    param1 : string,
    param2 : number,
    param3 : Foo,
    param4 : { test : string },
    param5 : IFoo,
    param6 : Function,
    param7 : (a : number) => void,
  ) : number {
      return 1
  }
}

// doSomething param types: String, Number, Foo, Object, Object, Function, Function

function logProperty(target: any, key: string) {
 
  // property value
  var _val = this[key];
 
  // property getter
  var getter = function () {
    console.log(`Get: ${key} => ${_val}`);
    return _val;
  };
 
  // property setter
  var setter = function (newVal) {
    console.log(`Set: ${key} => ${newVal}`);
    _val = newVal;
  };
 
  // Delete property.
  if (delete this[key]) {
 
    // Create new property with getter and setter
    Object.defineProperty(target, key, {
      get: getter,
      set: setter,
      enumerable: true,
      configurable: true
    });
  }
}

class Person { 
  @logProperty
  public name: string;
  public surname: string;

  constructor(name : string, surname : string) { 
    this.name = name;
    this.surname = surname;
  }
}

var p = new Person("remo", "Jansen");
p.name = "Remo";
var n = p.name;

function logParameter(target: any, key : string, index : number) {
  var metadataKey = `__log_${key}_parameters`;
  if (Array.isArray(target[metadataKey])) {
    target[metadataKey].push(index);
  }
  else {
    target[metadataKey] = [index];
  }
}

function logMethod(target, key, descriptor) {
	
    if(descriptor === undefined) {
      descriptor = Object.getOwnPropertyDescriptor(target, key);
    }
    var originalMethod = descriptor.value;

    //editing the descriptor/value parameter
	  descriptor.value = function (...args: any[]) {

    	var metadataKey = `__log_${key}_parameters`;
    	var indices = target[metadataKey];

  		if (Array.isArray(indices)) { 
  			for (var i = 0; i < args.length; i++) { 
  		
  				if (indices.indexOf(i) !== -1) { 
  		
  				var arg = args[i];
  				var argStr = JSON.stringify(arg) || arg.toString();
  				console.log(`${key} arg[${i}]: ${argStr}`);
  				}
  			}
  			var result = originalMethod.apply(this, args);
  			return result;
  		}
  		else {
  			var a = args.map(a => (JSON.stringify(a) || a.toString())).join();
  			var result = originalMethod.apply(this, args);
  			var r = JSON.stringify(result);
  			console.log(`Call: ${key}(${a}) => ${r}`);
  			return result;
  		}
  	}

    // return edited descriptor as opposed to overwriting the descriptor
    return descriptor;
}

class Person { 

  public name: string;
  public surname: string;

  constructor(name : string, surname : string) { 
    this.name = name;
    this.surname = surname;
  }
  
  @logMethod
  public saySomething(@logParameter something : string, somethingElse : string) : string { 
    return this.name + " " + this.surname + " says: " + something + " " + somethingElse; 
  }
}

var p = new Person("remo", "jansen");
p.saySomething("I love playing", "halo");

function logMethod(target, key, descriptor) {
 
    // save a reference to the original method this way we keep the values currently in the
    // descriptor and don't overwrite what another decorator might have done to the descriptor.
    if(descriptor === undefined) {
      descriptor = Object.getOwnPropertyDescriptor(target, key);
    }
    var originalMethod = descriptor.value;
 
    //editing the descriptor/value parameter
    descriptor.value = function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i - 0] = arguments[_i];
        }
        var a = args.map(function (a) { return JSON.stringify(a); }).join();
        // note usage of originalMethod here
        var result = originalMethod.apply(this, args);
        var r = JSON.stringify(result);
        console.log("Call: " + key + "(" + a + ") => " + r);
        return result;
    };
 
    // return edited descriptor as opposed to overwriting the descriptor
    return descriptor;
}

class Person { 
  
  public name: string;
  public surname: string;
  
  constructor(name : string, surname : string) { 
    this.name = name;
    this.surname = surname;
  }
  
  @logMethod
  public saySomething(something : string, somethingElse : string) : string { 
    return this.name + " " + this.surname + " says: " + something + " " + somethingElse; 
  }
}

var p = new Person("remo", "jansen");
p.saySomething("I love playing", "halo");

function log(...args : any[]) {
  switch(args.length) {
    case 1:
      return logClass.apply(this, args);
    case 2:
      return logProperty.apply(this, args);
    case 3:
      if(typeof args[2] === "number") {
        return logParameter.apply(this, args);
      }
      return logMethod.apply(this, args);
    default:
      throw new Error();
  }
}

@logClassWithArgs({ when : { name : "remo"} })
class Person {
  public name: string;
 
  // ...
}

function logClassWithArgs(filter: Object) {
    return (target: Object) => {
        // implement class decorator here, the class decorator
        // will have access to the decorator arguments (filter)
        // because they are  stored in a closure
    }
}

function logClass(target: any) {
 
  // save a reference to the original constructor
  var original = target;
 
  // a utility function to generate instances of a class
  function construct(constructor, args) {
    var c : any = function () {
      return constructor.apply(this, args);
    }
    c.prototype = constructor.prototype;
    return new c();
  }
 
  // the new constructor behaviour
  var f : any = function (...args) {
    console.log("New: " + original.name);
    return construct(original, args);
  }
 
  // copy prototype so intanceof operator still works
  f.prototype = original.prototype;
 
  // return new constructor (will override original)
  return f;
}

@logClass
class Person { 

  public name: string;
  public surname: string;

  constructor(name : string, surname : string) { 
    this.name = name;
    this.surname = surname;
  }
}

var p = new Person("remo", "jansen");

Decorators  یا تزئین کننده‌ها و ReflectDecorators، یکی از پیشنهادهای نگارش بعدی جاوا اسکریپت هستند (ECMAScript 2016) که هم اکنون قابلیت استفاده‌ی از آن‌ها در TypeScript وجود دارد.
جهت افزودن قابلیت‌های meta-programming به زبان‌های جاوا اسکریپت و TypeScript و همچنین تعریف annotations بر روی کلاس‌ها و اعضای کلاس، می‌توان از Decorators استفاده کرد. یک decorator، تعریف ویژه‌ای است که می‌تواند به تعریف یک کلاس، متد، خاصیت و یا پارامتر «متصل» شود و به صورت expression@ تعریف می‌گردد. این expression باید قابلیت فراخوانی به صورت یک متد را داشته باشد که در زمان اجرا فراخوانی خواهد شد. از Decorators در طراحی AngularJS 2 زیاد استفاده شده‌است.


نحوه‌ی فعال سازی Decorators با ES 5

این قابلیت فعلا در مرحله‌ی آزمایش به سر می‌برد؛ بنابراین برای فعال سازی آن نیاز است پارامترهای experimentalDecorators و emitDecoratorMetadata را به کامپایلر خط فرمان tsc و یا به خواص کامپایلر در فایل tsconfig.json اضافه کنید:

Command Line:
tsc --target ES5 --experimentalDecorators --emitDecoratorMetadata

tsconfig.json:
{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

بررسی انواع Decorators

در اینجا یک مثال ساده از decoratorها را مشاهده می‌کنید:

// A simple decorator
@decoratorExpression
class MyClass { }

و ساده‌ترین فرم پیاده سازی این decoratorExpression به صورت زیر است:

function decoratorExpression(target) {
   // Add a property on target
   target.annotated = true;
}

همانطور که ملاحظه می‌کنید، یک decorator در اصل یک function است که دسترسی به target ایی را که قرار است تزئین شود، میسر می‌کند. این قابلیت بسیار شبیه است به مفهومی به نام attributes و annotations در زبان #C.
در ادامه انواع و اقسام decoratorهای ممکن را با مثال‌هایی بررسی خواهیم کرد.


Class Decorator

یک class Decorator، پیش از تعریف یک کلاس اضافه می‌شود و هدف آن، اعمال تعاریفی به سازنده‌ی کلاس است و از آن می‌توان جهت تحت نظر قرار دادن تعاریف کلاس و یا تغییر یا حتی تعویض کلی تعاریف آن استفاده کرد. یک class Decorator را نمی‌توان در سایر فایل‌های تعاریف، مانند d.ts. قرار داد.
تنها آرگومانی که به یک class Decorator ارسال می‌شود، سازنده‌ی کلاسی است که به آن اعمال شده‌است. اگر متد class Decorator مقداری را برگرداند، سبب تعویض و جایگزینی تعاریف کلاس با مقدار باگشت داده شده، می‌شود.
در ادامه دو مثال را از class Decoratorها مشاهده می‌کنید:

مثال بدون پارامتر

function ClassDecorator(
target: Function // The class the decorator is declared on
) {
    console.log("ClassDecorator called on: ", target);
}

@ClassDecorator
class ClassDecoratorExample {
}

یک decorator برای اجرا، نیازی به وهله سازی از آن کلاس ندارد و اجرای آن دقیقا در زمان تعریف کلاس انجام می‌شود. این اجرا به معنای تزریق کدهای تزئین کننده، به تعاریف سازنده‌ی کلاس تعریف شده، پیش از وهله سازی از آن است.

مثال با پارامتر

function ClassDecoratorParams(param1: number, param2: string) {
return function(
  target: Function // The class the decorator is declared on
  ) {
   console.log("ClassDecoratorParams(" + param1 + ", '" + param2 + "') called on: ", target);
}
}

@ClassDecoratorParams(1, "a")
@ClassDecoratorParams(2, "b")
class ClassDecoratorParamsExample {
}

با خروجی

ClassDecoratorParams(2, 'b') called on: function ClassDecoratorParamsExample() {
}
ClassDecoratorParams(1, 'a') called on: function ClassDecoratorParamsExample() {
}

همانطور که در این مثال مشاهده می‌کنید، چندین decorator را نیز می‌توان به تعاریف یک کلاس اعمال کرد که به آن Decorator Composition نیز می‌گویند.


Property Decorator

یک Property Decorator دقیقا پیش از تعریف یک خاصیت اضافه می‌شود و نباید در سایر فایل‌های تعاریف جانبی قرار گیرد. زمانیکه متد expression آن در runtime فراخوانی می‌شود، دو پارامتر را دریافت خواهد کرد:
الف) برای static member ها، متد سازنده‌ی کلاس و برای  instance memberها، prototype کلاس را دریافت می‌کند.
ب) نام عضو.

اگر متد expression تعریف شده، مقداری را برگرداند، به عنوان Property Descriptor آن عضو بکارگرفته می‌شود.

در مثال ذیل که متد PropertyDecorator به خاصیت name اعمال شده‌است، دو پارامتر ارسالی به آن‌را بهتر می‌توان مشاهده کرد:

function PropertyDecorator(
target: Object, // The prototype of the class
propertyKey: string | symbol // The name of the property
) {
   console.log("PropertyDecorator called on: ", target, propertyKey);
}

class PropertyDecoratorExample {
@PropertyDecorator
name: string;
}

با خروجی

PropertyDecorator called on: PropertyDecoratorExample {} name

Method Decorator

یک Method Decorator باید درست پیش از تعریف یک متد، قرارگیرد و نباید در سایر کلاس‌ها تعاریف نوع‌های جانبی افزوده شود. هدف از آن می‌تواند بررسی، مشاهده و تغییر رفتار یک متد باشد. به متد expression آن، سه پارامتر ارسال می‌شوند:
الف) برای static member ها، متد سازنده‌ی کلاس و برای  instance memberها، prototype کلاس را دریافت می‌کند.
ب) نام عضو
ج) Property Descriptor عضو

اگر متد تعریف شده، خروجی را برگرداند به عنوان Property Descriptor آن متد استفاده خواهد شد.

در مثال ذیل، متد تزئین کننده‌ای به نام MethodDecorator تعریف شده‌است که سه پارامتر یاد شده را در زمان اجرا دریافت می‌کند:

function MethodDecorator(
target: Object, // The prototype of the class
propertyKey: string, // The name of the method
descriptor: TypedPropertyDescriptor<any>
) {
console.log("MethodDecorator called on: ", target, propertyKey, descriptor);
}

class MethodDecoratorExample {
   @MethodDecorator
   method() {
   }
}

با خروجی

MethodDecorator called on: MethodDecoratorExample { method: [Function] } method { value: [Function],
writable: true,
enumerable: true,
configurable: true }

و مثالی جهت محدود ساختن آن به یک سری متد خاص که یک پارامتر عددی را دریافت می‌کنند و یک خروجی عددی نیز دارند:

function TypeRestrictedMethodDecorator(
target: Object, // The prototype of the class
propertyKey: string, // The name of the method
descriptor: TypedPropertyDescriptor<(num: number) => number>
) {
   console.log("TypeRestrictedMethodDecorator called on: ", target, propertyKey, descriptor);
}

class TypeRestrictedMethodDecoratorExample {
   @TypeRestrictedMethodDecorator
   method(num: number): number {
      return 0;
   }
}

با خروجی

TypeRestrictedMethodDecorator called on: TypeRestrictedMethodDecoratorExample { method: [Function] } method { value: [Function],
writable: true,
enumerable: true,
configurable: true }

و مثالی از تزئین کننده‌های متدهای استاتیک یک کلاس که در این حالت، پارامتر target از نوع متد سازنده‌ی کلاس خواهد بود و نه prototype آن:

function StaticMethodDecorator(
target: Function, // the function itself and not the prototype
propertyKey: string | symbol, // The name of the static method
descriptor: TypedPropertyDescriptor<any>
) {
   console.log("StaticMethodDecorator called on: ", target, propertyKey, descriptor);
}

class StaticMethodDecoratorExample {
   @StaticMethodDecorator
   static staticMethod() {
   }
}

با خروجی

StaticMethodDecorator called on: function StaticMethodDecoratorExample() {
} staticMethod { value: [Function],
writable: true,
enumerable: true,
configurable: true }

Parameter Decorator

یک Parameter Decorator باید درست پیش از تعریف یک آرگومان متد، قرارگیرد و نباید در سایر کلاس‌ها تعاریف نوع‌های جانبی افزوده شود. به متد expression آن سه پارامتر ارسال می‌شوند:
الف) برای static member ها، متد سازنده‌ی کلاس و برای  instance memberها، prototype کلاس را دریافت می‌کند.
ب) نام عضو
ج) شماره ایندکس پارامتر مدنظر در متد

از خروجی متد تزئین کننده در اینجا صرفنظر می‌شود.

در ادامه مثالی را از نحوه‌ی تعریف یک تزئین کننده‌ی پارامترها را با سه آرگومان ویژه‌ی آن، مشاهده می‌کنید:

function ParameterDecorator(
target: Function, // The prototype of the class
propertyKey: string | symbol, // The name of the method
parameterIndex: number // The index of parameter in the list of the function's parameters
) {
   console.log("ParameterDecorator called on: ", target, propertyKey, parameterIndex);
}

class ParameterDecoratorExample {
   method(@ParameterDecorator param1: string, @ParameterDecorator param2: number) {
   }
}

با خروجی

ParameterDecorator called on: ParameterDecoratorExample { method: [Function] } method 1
ParameterDecorator called on: ParameterDecoratorExample { method: [Function] } method 0

مبحث بسیار مهم Generic

موقع نوشتن برنامه یکی از جنبه های مهم، ساخت کامپوننت یا اجزا با قابلیت استفاده مجدد است. مبحث جنریک تضمین میکند که برنامه شما در  طولانی مدت، انعطاف پذیر و مقیاس پذیر باشد. Generic راهی برای ایجاد اجزا (کامپوننت های) قابل استفاده مجدد ارائه میدهد.

* Generic ها روشی را برای کار با مؤلفه ها، آرگومان ها یا پارامتر ها یا هر نوع داده دیگری ارائه میدهند و محدود به یک نوع داده نمیشوند.

* بنابراین کامپوننت ها (اجزا) با انواع مختلف داده ها، میتوانند فراخوانی شوند و مورد استفاده قرار بگیرند.

به مثال زیر برای درک ضرورت استفاده از نوع داده Generic توجه نمائید:

unction getArray(items:any[]):any[]{
    return new Array().concat(items);
}

let myNumArr = getArray([100,105,99,76,20,23,65]);
let myStrArr = getArray(["Hello","world"]);

myNumArr.push("hi from world");
myStrArr.push(1399);

console.log(myNumArr);
console.log(myStrArr);
//------------------------------------- نتیجه
[ 100, 105, 99, 76, 20, 23, 65, 'hi from world' ]
[ 'Hello', 'world', 1399 ]

نتایج فوق را بررسی کنید.

شاید نخواهیم نوع داده رشته ای درون آرایه عددی قرار بگیرد و یا بر عکس نخواهیم نوع داده عددی درون آرایه رشته ای قرار گیرد.

مثال مفهومی:

function echo<T>(data:T){
    return data;
}

console.log(echo<string>("Mokhtar").length);
console.log(echo<number>(34));

درتابع فوق که یک تابع چنریک شده است.<T> نوع داده ای است که قرار است استفاده شود. و اگر هنگام استفاده از تابع ذکر نشود از T استفاده میشود یعنی نوع داده ورودی تابع.

built-in generics - جنریک های داخلی

بسیاری از اشیا جاوااسکریپت، در تایپ اسکریپت دارای نوع داده جنریک هستند مثلا آرایه ها. مثال:

const testResult :Array<number> = [226,-236,456];
testResult.push(34);
console.log(testResult)

یک مثال دیگر از توابع جنریک به همراه استفاده از آرایه.

function printAll<T>(args:T[]){
    args.forEach(elm=>{
        console.log(elm)
    })
}

printAll<string>(['Apple','Banana'])

نوع داده جنریک - Generic Types

type echoType = <T>(data:T)=>T;

const echo2:echoType = echo;
console.log(echo2<string>("somethings"))

انواع دیگر مثال ها و روش های استفاده

<T>
<T,U>
<T extends یک نوع سفارشی>
<T extends number>
<T extends number|string>

const testType:<T extends ...>
const testType:<T>(data:T)=>T;

<T,U extends number|string>
<T extends number,U extends string>

<T extends U>
<T extends U, U extends number|string>

نحوه استفده کلاس ها از اینترفیس

1- نحوه استفده کلاس ها از اینترفیس چگونه است؟ پاسخ:

class example implements Interface{}

2- آیا یک کلاس می تواند از چندین اینترفیس استفاده نماید؟ پاسخ:   بله

class example implements Interface1 , Interface2 , Interface3 , Interface4{}

مثال اینترفیس برای توابع

interface DoubleValueFunc{
    (number1:number,number2:number):number;
}

let myDblFunc:DoubleValueFunc;

myDblFunc = function(val1:number,val2:number):number{
    return (val1+val2)*2;
}

console.log(myDblFunc(10,20));

وراثت در اینترفیس ها

interface ChildInterface extends ParentInterface{}

آبجکت یا کلاس نهایی که از اینترفیس فرزند ساخته میشود، باید هم موارد اینترفیس والد را رعایت کند و هم موارد اینترفیس فرزند را. مثلاً اگر در اینترفیس والد، تعریف یک خاصیت اختیاری بود ولی در اینترفیس فرزند اختیاری نباشد، آن خصوصیت دیگر اختیاری یا optional نیست.