Learning TypeScript Part 5- Functions

Functions

Just as in JavaScript functions can be created both as a named function or as an anonymous function. Similar to JavaScript TypeScript also captures variables.

function add(x, y) {
	return x + y;
}

let myAdd = function (x, y) { return x + y };

/**Typing the function */
function add(x: number, y: number): number {
	return x + y;
}

let myAdd = function (x: number, y: number): number { return x + y };

Contextual Typing

As you can see in the above example TypeScript compiler can figure out the type if you have types on one side of the equation but not the other.
This is called contextual typing a form of inference.

Optional Parameters

In JavaScript every parameter is optional but in TypeScript every parameter is required by default.
The number of arguments given in the parameters must match no.of arguments passed

Default Parameters

Even though TypeScript expects exact parameter list we can still be able to have optional parameters using the symbol ? But one catch is that all the optional parameters has to come in the end

function build(firstName: string, lastName?: string) {
	return firstname + ' ' + lastName;
}

build('Bob'); //Ok
build('a', 'b', 'c'); //too many params
  • Optional parameters used as a default value if a parameter is not provided with a value
  • Optional parameters not necessarily should be placed at the end of the params list
  • Default parameters that comes after all required params are treated as optional
function buildName(firstName: string, lastName = "Smith") {
	return firstName + ' ' + lastName;
}

buildName('Bob'); //returns Bob Smith
buildName('Bob', 'Ryan') // returns Bob Ryan

Rest params

Allows to pass any number of params

function restParamDemo(firstName: string, ...restOfName: string[]) {
	return firstName + ' ' + restOfName.join(' ');
}

restParamDemo('Bob'); //Valid
restParamDemo('Bob', 'Some 2'); //Valid
restParamDemo('Bob', 'Some 2', 'Some 3'); //Valid
//would be valid for any number of params

Lamdas

When using JavaScript you should be carefull while using ‘this’ keyword in callback. Lamdas can be used to capture this when function is created rather than when it is invoked

Overloads

  • JavaScript is inherently very dynamic language. A function can return any type of objects from string, number etc to complex objects based on the input
  • But this will not allow us to describe a type of the function effectively
  • Overloads allows us to use multiple function types for the same function as a list of overloads
Advertisement
Advertisements
Advertisements

.Net activity logs Agile Azure bad parts C# C#7.0 C# Tuples CSS Framework CSS Styling Customization designpatterns dotnet dotnet-core event hubs frontend development functions getting-started Hype Cycle JavaScript learn Next.js Node node_modules npm objects vs functions performance optimization React Redux rimraf scalability server-side rendering Software Development SOLID State management static site generation Tailwind CSS Tips Tricks Tuple Tuples Umamaheswaran Visual Studio Web Design web development

Advertisements
Daily writing prompt
What sacrifices have you made in life?

One response to “Learning TypeScript Part 5- Functions”

  1. […] Source: Learning TypeScript Part 5- Functions […]

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: