More on Functions

• My question on Stackoverflow (opens new window)

Function type expression

// def - (param:type) => returnType;
type callback = (x: string) => string;

// as arg
function foo(func: callback) {
  func('hello');
}

// as arrow function
const bar: callback = (str) => {
  return str;
};

Signature

• Use this if callback has some extra properties in addition to function defination

// call signature type callback = { (s: string): string; // actual function x: number; // property (callback.x)y };

// construct signature type callback = { new (s: string): FooObject; };

Generic Functions

• Use Generics when we have 2+ related variables ie used atleast 2 times.
• If no relation then don't use it.

// Generic function foo<T>(x: T[]): T { return x[0]; } foo([2, 4, 5]); // T = number foo(['a', 'b']); // T = string // arrow func (only type) type fooType = <T>(x: T) => T; // arrow func (def with type) // const foo2 = <T>(x: T) => x; // error since <T> is jsx const foo3 = <T>(x: T) => x; // no error - just add comma

// Generic + Union function foo<T>(x: T[], y: T[]): T[] { return x.concat(y); } // Limit types for `<T>` when call // T = string | number let z = foo<string | number>([1, 2], ['hi']);

Generic + constraint

Note : if extends is used then it can have more properties than what it extends.

playground (opens new window)

// Generic + constraint // hard to read function Max<T extends {length: number}>(x: T, y: T): T { if (x.length > y.length) return x; return y; }

// same but not possible to extend // but, can be extended using intersection (&) // easy to read type T = {length: number}; function Max(x: T, y: T): T { if (x.length > y.length) return x; return y; }

Overload

• Avoid Overload if Union can be used.

// overload signatures (atleast 2+)
function foo(num: number): number;
function foo(x: number, y: number): number;

// function implementation
function foo(xOrNum: number, y?: number): number {
  if (y) return xOrNum + y;
  return xOrNum * 2;
}

console.log(foo(3)); // 6
console.log(foo(3, 5)); // 8