Skip to main content

Is Typescript a functional language

The answer to this question is both Yes and No. Similar to many other popular programming languages like Java, Typescript is also trying to combine best of both worlds for its users. Typescript is a multi-paradigm programming language and it is has influences from Object Oriented Programming as well as fucntional programming paradigm.

One of the most important concept of functional paradigm is that the languages following this paradigm ensure that the applications builts using their type system are free of side-effects. Since Typescript interoperate with Javascript, it has lost some of its freedom and unlike pure functional languages like Haskell it cannot guarantee that our applications will be free from side-effects. Languages like Haskell ensure this through their type system. We can however use FP techniques to improve our type safety. For example look at the following code snippet

findNumber (numbers: Number[], input: number): number {
   if(numbers.length == 0) {
      throw new Error ("There are no number");
   }

   const number = numbers.find ( (num, index ) => {
       if(input === num ) return index
    });

   if( number) return number;
   throw new Error("Number not found!");
}
 
const numbers = [2, 3, 5, 21, 45, 56, 23, 2, 456];
const numberIndex = findNumber(numbers, "3"); 
console.log(`Number found at index ${numberIndex}` );

const numberIndex2 = findNumber([], "3")
console.log(`Number found at index ${numberIndex2}` );

You can see that the second call to findNumber will not return a number instead it will throw an error. That means the function canot guarantee a specific type of output in all situations. This is againt the functional programming paradigm.

In Functional programming languages like Haskel the default behavior of type system ensures that this will not happen. In Typescript it is up to the programmer to use an approach like the above or choose a more functional way through promises. A promise based approach will look like the following

findNumber (numbers: Number[], input: number) : Promise<number> {
   if(numbers.length == 0) {
      return Promise.reject(new Error("There are no numbers") );
   }

   const number = numbers.find ( (num, index ) => {
       if(input === num ) return Promise.resolve(index)
    });

   if( number) return number;
   return Promise.reject(new Error("Number not found") );

}
findNumber(numbers, "3").then ( idx => console.log(`Number found at index ${idex}` ) 
The above example shows how we can transform our unsage and impure function into a safe and pure function.

The answer of our original question is Typescript is both functional and object oriented and it allows programmers to choose the implementation based on what they find easy for their problems.

Comments

Popular posts from this blog

Html5 Canvas Drawing -- Draw dotted or dashed line

This post is for those who want to use html5 canvas for drawing. The canvas API now has built in methods to create lines with dashes. The method is called setLineDash. Following is the code sample to create dashed line. var canvas = document . getElementById ( "canvas" ); var ctx = canvas . getContext ( "2d" ); ctx . setLineDash ([ 5 , 3 ]); /*Dash width and spaces between dashes.*/ ctx . beginPath (); ctx . moveTo ( 0 , 100 ); ctx . lineTo ( 400 , 100 ); ctx . stroke (); If you want to draw lines having a custom style there is no methos in the API. But fortunately there is a way to achieve this. Following is a description about how I achieved this. You can set the stroke pattern on canvas context. Stroke pattern can be created using any image. You create image for your custom pattern and set strokeStyle of the context like the following: var linePattern; imageToUsedAsPattern.onload = function() { linePattern = context.createPattern(imageToU...

Difference between ng-template, ng-content and ng-container

While working on a very complex feature for a client in which I had to present hierarchical dynamic data in three column layout with ability to expand like google image search on each level, I came across ng-content, which seemed like a perfect fit for the solution I was thinking about implementing. But I got confused between ng-content and ng-container when I saw the generated html while debugging my code in developer console. I further investigated both ng-content and ng-container and decided to write my finding here in my blog for future references. If you are also wondering what are they for, read on. <ng-container> When you have to write different host elements to combine many structural component like the following <div *ngIf="condition"> <div *ngFor="..."> Some content here </div> </div> You get many unintentional host elements which are not required for your layout. It becomes a prolem when you have complex appl...

Grouping Exports in Javascript code

As a Javascript developer, you will come across many occassions when you will have to export many functions, variables or other items from one file and import them in different files. You may end up with a code like the following export const function1 = () => { /*something here */ } ; export const function2 = () => { /*something here */ } ; export const function3 = () => { /*something here */ } ; export const function4 = () => { /*something here */ } ; export const function5 = () => { /*something here */ } ; export const function6 = () => { /*something here */ } ; export const function7 = () => { /*something here */ } ; And in the file you want to import you will be importing like the following import { function1, function2, function3, function5, function6, function7 } from './path_to_the_script' You can improve it using * if you want to import all the functions. import * as Functions from './path_to_the_script' This is a better way of imp...