Extension method library for Javascript Array using Typescript

Array Extension methods - Typescript

This is step by step guide to create custom library for extension method on Javascript Array using Typescript.

Tools and framework we are going to use are

Visual studio code, which you can download from here.
Framework : NodeJs

Open Command prompt and type following commands

mkdir demo-extension-lib
cd demo-extension-lib

We are in your target directory, type following command

npm init

npm will guide you through the series of questions. Which you can change according to your requirement or go with the default ones.

Once npm is done with initialization, Open demo-extension-lib in any editor of your choice. We will use Visual Studio Code for our demo.

You will se single file package.json as we do not have any other library install.

We will start by adding two directory src - for source code and test - to add test cases.

Add type script file with name extension.ts. In that file, declare Array interface to global namespace

One thing to notice here we are exporting this module as {}. This interface is basically to extend definition of existing Array. Now that have defined interface, it needs to be implemented. we will define each functionality in same extension file.

Lets implement addRange method.

Here, we first check if addRange method already exist on Array prototype or not. If not then we add addRange definition to Array.prototype. First argument this is to tell compiler that its an extension method to existing JavaScript array. This argument will not appear in method definition when we type dot(.) to any object or type array.

However, second argument is the actual parameter that would be available in function to process. Similarly, we can implement rest of the methods.

Implementation of rest of the methods can be found at my GitHub repo

In Next post we will discuss how we can

Build library
Add Unit test cases
Unit test covergae.

Thank you for Reading!

Comments

Accessing Enum in template–Angular with Typescript

By reading title of this post, It seems some what misleading. In Angular 2 (or higher version for that matter). We cannot directly access Enum or any other type for that matter into template. so, for an example consider following example now if we try to access Enum WeekDays in HTML template as follows It would be resulted in runtime error shown below To resolve this error we should be assigning enum to component property as shown below. Reason behind this is , Component is the execution context for an Angular application. We can reference only those properties in template which are defined in component or have scope in component.

Array Extensions Library- Unit Test

Array Extensions Library- Unit Test This post is second in series of creating Array Extension Library In this post we will learn how we can add unit test cases to our library. We will use Jasmine framework to Unit test our library. For that, use below command. >> npm install jasmine As we have developed our library in typescript, it will convenient to add typing for Jasmine as well. To install typing for Jasmine. Use below command. >> npm uninstall @types/jasmine After running these commands, our package.config will look like Now, we will add new file named extension.spec.ts under test directory. In this file we will import extension library first. We will now define one class named Heros, Which we use to create Array and test all our extension methods against it. Now we will describe our test suite using describe function provided by Jasmine. And initialize arrays with our primitive and custom type(Heros) in beforeEach function provided by jasmine. Now, we will

Visual Studio code - Setting up Tomcat server

This is the second post in series of Setting up Visual Studio code for Java Spring Boot development. First post of this series can be found here . In this article we will see how we can configure VS Code to run Apache Tomcat server via extension. So lets begin. Open your VS Code and click on Extensions menu item. Now search for "Tomcat For Java". Select extension From Wei Shen and click install. Once this extension is installed. we can see new tab panel enabled in Explorer window. When we expand it, its empty. Now we need to configure Tomcat. For that, we need to download Apache Tomcat from official site. To download Tomcat click here to redirect to official site. There are multiple version available to download. For this demo we will download Tomcat Version 9. Once Tomcat is downloaded to our machine. We now navigate back to VS code. We can now configure Tomcat by click on "+" sign on "Tomcat Servers" panel. When we click on Add Tomcat Server "

Technically Speaking

Search This Blog