<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Suhas Chatekar</title>
    <description>The latest articles on DEV Community by Suhas Chatekar (@suhas_chatekar).</description>
    <link>https://dev.to/suhas_chatekar</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2168%2FIFunjzQA.jpg</url>
      <title>DEV Community: Suhas Chatekar</title>
      <link>https://dev.to/suhas_chatekar</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/suhas_chatekar"/>
    <language>en</language>
    <item>
      <title>What makes a chatbot great?</title>
      <dc:creator>Suhas Chatekar</dc:creator>
      <pubDate>Mon, 01 Jan 2018 20:38:59 +0000</pubDate>
      <link>https://dev.to/suhas_chatekar/what-makes-a-chatbot-great-3fgc</link>
      <guid>https://dev.to/suhas_chatekar/what-makes-a-chatbot-great-3fgc</guid>
      <description>&lt;p&gt;This post was &lt;a href="http://chatekar.com/building-a-user-friendly-chatbot/"&gt;originally published on my blog&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Last month I attended the Big Data London conference. One of the &lt;a href="https://www.slideshare.net/MatthewStubbs6/big-data-ldn-2017-improving-customer-experience-with-an-ai-bot?ref=https://bigdataldn.com/slides/"&gt;sessions run by Microsoft&lt;/a&gt; had a slide (#7) that roughly read like &lt;/p&gt;

&lt;h3&gt;
  
  
  What makes a bot great?
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;not how much "AI" it has&lt;/li&gt;
&lt;li&gt;Not how sophisticated the language model is&lt;/li&gt;
&lt;li&gt;Not whether it uses voice&lt;/li&gt;
&lt;li&gt;Not whether it used guided UI&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  It is the personality of the bot that makes it great
&lt;/h3&gt;

&lt;h2&gt;
  
  
  What does "personality of a bot" even mean?
&lt;/h2&gt;

&lt;p&gt;Honestly, it is as complicated as the personality of us humans. There is no one way to define what a great personality is. It's a combination of a number of personality traits. And the same is true for bots. There are a number of traits that a great bot has. In this post, I will go over some of these traits that I have learned. &lt;/p&gt;

&lt;h2&gt;
  
  
  #1 - Give your bot some character
&lt;/h2&gt;

&lt;p&gt;First of all, give your bot a name. When we built our first bot we did not do this. We ended up having everyone refer to it as just a chatbot. But then we learned that you can make the bot more lively simply by giving it a name. Now, when you are giving it a name, think about whether you want it to be male or a female character. &lt;/p&gt;

&lt;p&gt;Do you want your bot to come across as a machine or as a human? This is very important and will go a long way in giving your bot a character. Generally, bots with machine-like characters will be mostly very static in their conversations. On the other hand, human-like bots will engage their users in lively conversations. &lt;/p&gt;

&lt;p&gt;Once you have done that, think of a bot persona. A number of factors will drive the bot persona - demographics of the target customer base, business domain and the task at hand, to name a few. Bot persona will help you greatly when you are work out responses to different situations. &lt;/p&gt;

&lt;h2&gt;
  
  
  #2 - Watch the tone of voice
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Thanks to &lt;a href="https://twitter.com/Cat4052"&gt;Catherine Hornby&lt;/a&gt; for this tip.&lt;br&gt;
After you have picked up a persona for your bot, it is essential to decide how that persona will respond to different conversations e.g. formal, informal, use of slang, colloquialism etc. When doing UX designs, we tend to put together style guides and colour pallets to help wider teams come up consistent UI design. The same can be done with bots. You can have a copywriter put together a conversation style guide for different bot persona. Anyone building a bot conversation can refer to this style guide and come up with consistent bot responses. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  #3 - Be humorous
&lt;/h2&gt;

&lt;p&gt;Humour is everywhere around us, so why not with bots? When we ran the first internal test of our bot, a significant proportion of conversations started with users trying to be humorous. Even when your bot is built around a non-humorous business problem, the moment users find out that they are talking to a bot, there will always be a few who would try to be naughty and start saying funny things to the bot. You may not want to go overboard with handling every possibility in the universe but having humorous responses to some funny statements from the users will make your bot stand out. &lt;/p&gt;

&lt;h2&gt;
  
  
  #4 - Do not be monotonous
&lt;/h2&gt;

&lt;p&gt;This is the most important thing. Over time, your users will keep coming back to the bot and ask similar questions. It is easy to build a non-lively conversation by having the bot respond in a monotonous manner. &lt;br&gt;
Imagine you welcome every time the user starts talking to the bot. If you welcome the user by saying "Welcome back Bob" every time, then soon, that will become very monotonous and less engaging for the user. &lt;/p&gt;

&lt;p&gt;It does not take a lot to bring variation in bot responses if you are using tools like &lt;a href="https://www.ibm.com/watson/services/conversation/"&gt;Watson Conversation&lt;/a&gt; or &lt;a href="https://dev.botframework.com/"&gt;Microsoft Bot Framework&lt;/a&gt;. Most of us will ignore this during development as it's an overhead. But do not forget to add this in before you go live or even go out for a wider beta test. And do not add variations just for the welcome message but for every response that is coming back from the bot. &lt;/p&gt;
&lt;h2&gt;
  
  
  #5 - Handle small talk
&lt;/h2&gt;

&lt;p&gt;Small talk is relatively straightforward to handle and very easy to fall through the cracks. Some bot services like &lt;a href="https://dialogflow.com/"&gt;Dialog Flow&lt;/a&gt; will handle small talk automatically for you. All you have to do it enable it. But for others, you need to build conversations around small talk. If you are sailing in this boat, consider the following &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Greet the user with a welcome message at the beginning of the conversation and assume that user may reply with small talk like "thanks", "hello". &lt;/li&gt;
&lt;li&gt;Always end the conversation with small talk like "bye", "see you soon" etc. and assume that user will respond with similar words&lt;/li&gt;
&lt;li&gt;Messaging is inherently slow and full of latency so it's possible that user become impatient when they do not see a response from the bot in time. Some user may try to talk to the bot using a word like "Hi", "Still there?" while the bot is still working on their previous request. It's best to handle such utterances appropriately. and make sure that you remove monotony from these responses. &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Small talk is a never-ending thing. There will never be enough of it. But if you look at it from your domain lens, you can come up with a reasonably small list of things that people can say that bot can reply in a friendly way. And for the rest, you can always have a number of variations of the same response (remember trait #3 - Do not be monotonous)&lt;/p&gt;
&lt;h2&gt;
  
  
  #6 - Handle out of context conversations to a reasonable degree
&lt;/h2&gt;

&lt;p&gt;One of the best things about natural language interfaces is that users get the freedom to express in whatever way they want. But this also becomes one of the biggest pain points for us, bot developers. Now, we have to deal with users who change the conversation context in the middle of a conversation. Let's look at an example of a hotel finder bot&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Bot: Welcome to hotel finder. Where are you looking to travel?
User: I am looking for a room for 2 in Dubai next week
Bot: Sure thing. Let me find the best room for you
Bot: What do you think of the following options?
...
User: how long before I can cancel a booking?
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The conversation was in the middle of a context around hotel search. User asks a question about the cancellation. The best thing for the bot to do here is to answer the user's question on cancellation (if modelled to do so) and then go back to hotel search. &lt;a href="https://dev.botframework.com/"&gt;Microsoft Bot Framework&lt;/a&gt; supports such use cases out of the box. With others, you will need to do some work yourself but this is definitely possible. &lt;/p&gt;

&lt;p&gt;Handling out of context conversation is important because when the user makes a typo that results in bot not recognising what the user is saying, then you would want to present a friendly message to the user and then get back into the previous conversation context. &lt;/p&gt;

&lt;h2&gt;
  
  
  #7 - Use sentiment analysis tools to determine user's mood
&lt;/h2&gt;

&lt;p&gt;The whole natural language understanding field is in its infancy still. The lack of maturity in the technology makes it difficult to build bots that can match a human's speaking abilities and wit. So there will be times when you will leave a customer unhappy, frustrated or angry. Use sentiment analysis tools on every user statement to understand user's mood and respond accordingly. Do not wait for an angry or frustrated customer to tell you that they want to speak to a human. Do not forget to ask a happy customer for their feedback. &lt;/p&gt;

&lt;h2&gt;
  
  
  #8 - Handoff to a human before the conversation becomes too frustrating for the user
&lt;/h2&gt;

&lt;p&gt;Make it easy for human agents to take over a conversation from the bot. Make it easy for humans to switch from the bot to a human (e.g. when they type help). Make it easy for the bot to hand the conversation over to a human agent. &lt;/p&gt;

&lt;p&gt;You may not want to bake all of the above into your bot from day 1. But at least give the users an option to switch from a bot to a human, to begin with. Analyse how your users are interacting with the bot and decide what is the right time to get the other two features. &lt;/p&gt;

&lt;h2&gt;
  
  
  #9 - Offer a help menu
&lt;/h2&gt;

&lt;p&gt;Last but not least, offer a help menu in the form of a conversation. The simplest thing you can do is when the user types something like "help" or "I need help", you can present a message back to the user listing everything that the bot can help the user with. In this response, you can also describe how to talk to a human. &lt;/p&gt;

&lt;p&gt;Again, &lt;a href="https://dev.botframework.com/"&gt;Microsoft Bot Framework&lt;/a&gt; offers such feature out of the box. For other services, you will need to build this yourself. &lt;/p&gt;

</description>
      <category>chatbots</category>
      <category>bots</category>
    </item>
    <item>
      <title>Converting a JavaScript project to Typescript, one file at a time</title>
      <dc:creator>Suhas Chatekar</dc:creator>
      <pubDate>Mon, 21 Aug 2017 19:04:18 +0000</pubDate>
      <link>https://dev.to/suhas_chatekar/converting-a-javascript-project-to-typescript-one-file-at-a-time</link>
      <guid>https://dev.to/suhas_chatekar/converting-a-javascript-project-to-typescript-one-file-at-a-time</guid>
      <description>&lt;h1&gt;
  
  
  Convert a JavaScript application to Typescript
&lt;/h1&gt;

&lt;p&gt;JavaScript is good but, like me, if you come from statically typed languages then it becomes a bit annoying to deal with lack of types when the project grows big. Luckily there is Typescript but adding Typescript retrospectively may not be a very straight-forward job. Recently I successfully converted a sizable JavaScript project into Typescript, &lt;strong&gt;one file at a time&lt;/strong&gt;. Converting one file at a time to Typescript is really powerful because then you can make the change incrementally without having to stop delivering the features that your product owner wants. I tried doing this different ways. Here, I will talk you through the one that worked. &lt;/p&gt;

&lt;p&gt;This a long-ish read. I have divided the content into three main sections&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Adding typescript config and webpack&lt;/li&gt;
&lt;li&gt;Adding Type declaration files&lt;/li&gt;
&lt;li&gt;Convert the code into typescript&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The source code for this article is on &lt;a href="https://github.com/schatekar/js-to-ts"&gt;GitHub&lt;/a&gt;. It is a very simple calculator application with just two files. I think that is enough files to demonstrate the approach. The initial javascript source is in &lt;a href="https://github.com/schatekar/js-to-ts"&gt;master branch&lt;/a&gt;. the changed source code at the end of every section is in appropriate branches in the same repository. &lt;/p&gt;

&lt;p&gt;Let's drive straight in then.&lt;/p&gt;

&lt;h1&gt;
  
  
  1. Adding  typescript config and webpack
&lt;/h1&gt;

&lt;p&gt;Any typescript code has to be transpiled down to JavaScript before it can be run. That is where webpack comes in handy. If you have never used Webpack before, then I recommend reading &lt;a href="https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/"&gt;A detailed introduction to webpack&lt;/a&gt; before proceeding. &lt;/p&gt;

&lt;p&gt;We start by installing webpack using the following command&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install --save-dev webpack
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note that we are adding webpack as a development dependency. This is because it's only used to convert typescript code into javascript. Next we need a webpack configuration. Add a new file named &lt;code&gt;webpack.config.js&lt;/code&gt; at the root of the project and the following content to it&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;path&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;webpack&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;webpack&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;


&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;  
  &lt;span class="na"&gt;entry&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
    &lt;span class="na"&gt;index&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./index.ts&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;target&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;node&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;module&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;loaders&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;test&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;\.&lt;/span&gt;&lt;span class="sr"&gt;ts&lt;/span&gt;&lt;span class="se"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;x&lt;/span&gt;&lt;span class="se"&gt;?)&lt;/span&gt;&lt;span class="sr"&gt;$/&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;loader&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ts-loader&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;      
      &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;test&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;\.&lt;/span&gt;&lt;span class="sr"&gt;json$/&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;loader&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;json-loader&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;]&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;webpack&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;DefinePlugin&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;process.env.NODE_ENV&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;"production"&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;extensions&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.ts&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.json&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;output&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;libraryTarget&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;commonjs&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;path&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;__dirname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;lib&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="na"&gt;filename&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;[name].js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let's quickly go over the contents of this file. We have imported &lt;code&gt;path&lt;/code&gt; module to make it easy to do some path manipulation in the output section of the config. We have also imported webpack to define a plugin in the &lt;code&gt;plugins&lt;/code&gt; section. Let's not worry about this just yet. &lt;/p&gt;

&lt;p&gt;The file is basically just exporting a JSON object which webpack uses as configuration. Webpack has a large number of configuration options but the ones we have configured here are minimal ones needed for a typescript project. Let's look into each of the configuration we have defined in this object&lt;/p&gt;

&lt;h2&gt;
  
  
  entry
&lt;/h2&gt;

&lt;p&gt;This tells webpack where to begin transpiling. Webpack will start with the files specified in &lt;code&gt;entry&lt;/code&gt;, converts them into JS (see &lt;code&gt;module&lt;/code&gt; section next) and then goes through every module that these modules import till it has reached the end of the tree. We do not have to have a single entry point. We can provide any number of entry points we want here. We have specified &lt;code&gt;index.ts&lt;/code&gt; as our entry point. This file does not exist yet. We will eventually convert our entry module &lt;code&gt;index.js&lt;/code&gt; into &lt;code&gt;index.ts&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  target
&lt;/h2&gt;

&lt;p&gt;Target tells webpack where you want to run the final Javascript code. This is important because the code that gets generated to be run on server side is different from the code that gets generated to be run in a browser. For this example we specify &lt;code&gt;node&lt;/code&gt; which is for the code that gets run on the server side&lt;/p&gt;

&lt;h2&gt;
  
  
  module
&lt;/h2&gt;

&lt;p&gt;This is where the most of the magic happens. We have specified on the &lt;code&gt;loaders&lt;/code&gt; part of this object. Webpack uses different loaders to transpile files. In our case, we have a &lt;code&gt;ts-loader&lt;/code&gt; to transpile any Typescript files and a &lt;code&gt;json-loader&lt;/code&gt; which I have left there in case we add a json file later on.  Loaders need to be installed separately and they come as their own NPM packages. For our config, we need to install &lt;code&gt;ts-loader&lt;/code&gt; and &lt;code&gt;json-loader&lt;/code&gt; usin the following command.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install --save-dev ts-loader json-loader
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  plugins
&lt;/h2&gt;

&lt;p&gt;Let's ignore that for a moment&lt;/p&gt;

&lt;h2&gt;
  
  
  resolve
&lt;/h2&gt;

&lt;p&gt;This is where you tell webpack which file extensions to scan during its transpilation process. We have added &lt;code&gt;.ts&lt;/code&gt; and &lt;code&gt;.js&lt;/code&gt; both as we want to convert one js file to ts at a time. This means, we will have a mix of js and ts files in our project and we want webpack to consider both&lt;/p&gt;

&lt;h2&gt;
  
  
  output
&lt;/h2&gt;

&lt;p&gt;This is where we tell webpack how do we want the output of the transpilation to appear. We are saying that we want the output files to be named after the key name we used for the file in the &lt;code&gt;entry&lt;/code&gt; section. We want the output files to be copied into a folder named &lt;code&gt;lib&lt;/code&gt; under the current directory. And we want webpack to use &lt;code&gt;commonjs&lt;/code&gt; module system. &lt;/p&gt;

&lt;p&gt;Again, if this is the first time you are using webpack, then do not worry too much about the content of this file. This is a minimal config that just works for any server side code. &lt;/p&gt;

&lt;p&gt;Next we need a Typescript config. Add a file named &lt;code&gt;tsconfig.json&lt;/code&gt; to the project. Again, the minimal contents for this file are as below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"compilerOptions"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"target"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"es5"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"module"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"commonjs"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"noImplicitAny"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"lib"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"es5"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="s2"&gt;"es2015"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"es6"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dom"&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is telling the Typescript compiler that we want the resulting JS to be ES5 compliant and we want to use &lt;code&gt;commonjs&lt;/code&gt; as our module system. We have also added a &lt;code&gt;noImplicitAny&lt;/code&gt; which is set to &lt;code&gt;true&lt;/code&gt;. This forces you to declare any variable of type &lt;code&gt;any&lt;/code&gt; instead of leaving the type declaration out and compiler marking the variable as &lt;code&gt;any&lt;/code&gt;. This helps to catch cases where we forget to declare type for a variable. &lt;/p&gt;

&lt;p&gt;Next we need a way to invoke webpack. There are two ways you can do this. The webpack npm package that we installed earlier, you can install that globally and just run &lt;code&gt;webpack&lt;/code&gt; from the console at the root directory of the project. Or you can add an NPM script in your &lt;code&gt;package.json&lt;/code&gt;  that uses the locally installed webpack version like below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"node_modules/.bin/webpack --config webpack.config.js"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note that I have padded a &lt;code&gt;--config&lt;/code&gt; flag which is not really needed because webpack looks for a file named &lt;code&gt;webpack.config.js&lt;/code&gt; by default. But if you prefer to name your webpack config file differently then make sure you pass the &lt;code&gt;--config&lt;/code&gt; flag.&lt;/p&gt;

&lt;p&gt;The source code at the end of this section is in &lt;a href="https://github.com/schatekar/js-to-ts/tree/add-webpack"&gt;add-webpack&lt;/a&gt; branch.&lt;/p&gt;

&lt;h1&gt;
  
  
  2. Add Type declaration files
&lt;/h1&gt;

&lt;p&gt;We need to find the first module that we can safely convert to Typescript. This is usually the entry module of our project. In our example, that would be &lt;code&gt;index.js&lt;/code&gt;. To use the full power of Typescript in our converted module, we need to have type declaration files for other modules that this module is dependent on. &lt;br&gt;
There are two concepts around type declaration files that we need to understand. I am assuming that you know what type declaration files are, if not, I would recommend reading the &lt;a href="https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html"&gt;official guidance on this topic&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;We need to explicitly install type declaration files for any external module. In our example, we have an external module called &lt;code&gt;prompt-sync&lt;/code&gt; for which we will need to install type declaration files&lt;/li&gt;
&lt;li&gt;For our own modules that we have not converted into Typescript yet, we need to write type declaration files ourselves as a stop-gap arrangement till the time we convert that module into Typescript&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  Installing type declaration files for external modules
&lt;/h2&gt;

&lt;p&gt;Type declaration files for most NPM packages are already made available by the community. We can run the following command to install the Type declaration files for our &lt;code&gt;prompt-sync&lt;/code&gt; package&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install --save-dev @types/prompt-sync
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If the type declaration file is available, it will get installed. If not, you will see an error. You will need to create the necessary type declaration files yourselves. &lt;/p&gt;

&lt;h2&gt;
  
  
  Creating type declaration files for own modules
&lt;/h2&gt;

&lt;p&gt;Type declaration files for a module contain interface, function and type declarations for the bits that the module exports. They are declared in a file with extension&lt;code&gt;d.ts&lt;/code&gt; and named after the module name or &lt;code&gt;index.d.ts&lt;/code&gt;. For instance, the type declaration file for the &lt;code&gt;prompt-sync&lt;/code&gt; module that we just installed is named &lt;code&gt;index.d.ts&lt;/code&gt; and you can find it in &lt;code&gt;node_modules/@types/prompt-sync&lt;/code&gt; folder. That is one of the known location that typescript compiler searches during module resolution. You can read more about the module resolution process that typescript compiler follows in the &lt;a href="https://www.typescriptlang.org/docs/handbook/module-resolution.html"&gt;Typescript Handbook&lt;/a&gt;. One of the strategies used by the compiler to resolve modules is to look for a type declaration file matching the module name at the same location as the imported module. For instance, if we import a module like below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;calc&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./calculator&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;then typescript compiler will look for a &lt;code&gt;calculator.ts&lt;/code&gt; or &lt;code&gt;calculator.d.ts&lt;/code&gt; file in the current directory. We can use this mechanism to put our existing &lt;code&gt;calculator.js&lt;/code&gt; file behind a type declaration by creating a file &lt;code&gt;calculator.d.ts&lt;/code&gt; like below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kr"&gt;declare&lt;/span&gt; &lt;span class="kr"&gt;module&lt;/span&gt; &lt;span class="nx"&gt;calculator&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;
    &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;subtract&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;
    &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;multiply&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;
    &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;divide&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;calculator&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Notice that this is exposing the same methods as our calculator module but has annotated arguments and return values with a &lt;code&gt;number&lt;/code&gt; type. This file needs to be placed next to &lt;code&gt;calculator.js&lt;/code&gt;. &lt;/p&gt;

&lt;h2&gt;
  
  
  Creating Type declaration files for external modules
&lt;/h2&gt;

&lt;p&gt;We do not have any external module in this example that does not have Type declaration files available. But if that were the case with you, you can combine the knowledge from the above two points. First you build your own type declaration file and name it &lt;code&gt;index.d.ts&lt;/code&gt;. This can include only the methods/interfaces from the external module that you are using in your code. This type declaration file file needs to be kept under the folder &lt;code&gt;node_modules/@types/{module_name}/&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;I have never personally tried this so cannot vouch for reliability but this is what community defined Type declaration files are doing under the hood. &lt;br&gt;
The source code at the end of this section is in &lt;a href="https://github.com/schatekar/js-to-ts/tree/add-types"&gt;add-types&lt;/a&gt; branch.&lt;/p&gt;
&lt;h1&gt;
  
  
  3. Convert the entry module into TypeScript
&lt;/h1&gt;

&lt;p&gt;Finally we are ready to convert our first module into TypeScript. There is not much really in this step. Rename &lt;code&gt;index.js&lt;/code&gt; to &lt;code&gt;index.ts&lt;/code&gt; and start rewriting the module in typescript. If you use the &lt;code&gt;import&lt;/code&gt; syntax for bringing in the dependent modules then TypeScript compiler will look at the type declaration files of the target module and enforce type checking in addition to usual Javascript compiler checks. Here is how my converted &lt;code&gt;index.ts&lt;/code&gt; file looks like&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;p&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;prompt-sync&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;calc&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./calculator&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;prompt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;readInput&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Welcome to the calculator. Choose one of the following options&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1. add&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2. subtract&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;3. multiply&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;4. divide&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;5. exit&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;option&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;gt;&amp;gt; &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;option&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;5&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Enter the first number&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;parseInt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;gt;&amp;gt; &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Enter the second number&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;parseInt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;gt;&amp;gt; &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;switch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;option&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
      &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;calc&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`a + b = &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

      &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;calc&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;subtract&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`a - b = &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

      &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;3&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;calc&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;multiply&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`a * b = &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

      &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;4&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;calc&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;divide&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`a / b = &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;    

    &lt;span class="nx"&gt;readInput&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;readInput&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Thank you for using calculator. Good Bye&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Yeyy. We converted our first module from javascript to typescript. If you run &lt;code&gt;npn run build&lt;/code&gt; at this point, you will notice the webpack successfully gives us a packaged bundle in &lt;code&gt;lib/index.js&lt;/code&gt; that is ready to use. &lt;/p&gt;

&lt;p&gt;The source code at the end of this section is in &lt;a href="https://github.com/schatekar/js-to-ts/tree/convert-entry-module"&gt;convert-entry-module&lt;/a&gt; branch.&lt;/p&gt;

&lt;h1&gt;
  
  
  4. Keep going
&lt;/h1&gt;

&lt;p&gt;Converting the first javascript file is a big win. You have basic plumbing in place now to take on the bigger task. You may want to expand your webpack configuration to include other types of files you may have in your project, add production build steps like minification, uglification etc. At the same time, you also need to keep converting more and more files from javascript to typescript. The next logical step is to get rid of our own type declaration files by converting the javascript modules into typescript. Let's change the &lt;code&gt;calculator&lt;/code&gt; module to get rid of &lt;code&gt;calculator.d.ts&lt;/code&gt;. There are a number of ways, you can rewrite calculator module using typescript. The simplest is to just export the four methods in the module like below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;subtract&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;multiply&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;divide&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Delete the &lt;code&gt;calculator.d.ts&lt;/code&gt; file and re-run &lt;code&gt;npm run build&lt;/code&gt; you would get your packaged bundle in &lt;code&gt;lib/index.js&lt;/code&gt;. &lt;/p&gt;

&lt;p&gt;That's it. We have converted everything in this project from javascript to typescript. The source code at the end of this section is in &lt;a href="https://github.com/schatekar/js-to-ts/tree/keep-going"&gt;keep-going&lt;/a&gt; branch.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Return well-formed error responses from your REST APIs</title>
      <dc:creator>Suhas Chatekar</dc:creator>
      <pubDate>Fri, 18 Aug 2017 14:00:58 +0000</pubDate>
      <link>https://dev.to/suhas_chatekar/return-well-formed-error-responses-from-your-rest-apis</link>
      <guid>https://dev.to/suhas_chatekar/return-well-formed-error-responses-from-your-rest-apis</guid>
      <description>

&lt;p&gt;REST recommends using standard HTTP status codes to indicate what has happened on the server in response to a request. Errors from 4xx and 5xx family are used to indicate that request is not processed and there is some error either on the client side or on the server side e.g. 401 Unauthorised is used to indicate that the request cannot be processed because it does not anything to prove the identity of the sender. Standard HTTP status codes are a good starting point to indicate error condition but they are not enough. Especially if you are developing APIs that are consumed by large number of developers or are open to access by anyone then you may want to return well formed error responses that provide more details around the error. Initial inspiration for this idea comes from &lt;a href="https://geemus.gitbooks.io/http-api-design/content/en/responses/generate-structured-errors.html" rel="noopener noreferrer"&gt;Generate Structured Errors&lt;/a&gt; chapter of the &lt;a href="https://geemus.gitbooks.io/http-api-design/content/en/index.html" rel="noopener noreferrer"&gt;GitBook HTTP API Design Guide&lt;/a&gt;. I personally recommend this book to anyone who wants practical advice on building REST APIs.&lt;br&gt;
At &lt;a href="http://collinsongroup.com" rel="noopener noreferrer"&gt;Collinson Group&lt;/a&gt; we have started returning JSON similar to the one below in some &lt;code&gt;4xx/5xx&lt;/code&gt; responses&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[{ 
  "errorCode": "BAD_FORMAT", 
  "field": "email", 
  "originalValue": "suhas.chatekar", 
  "mesage": "{email} is not in correct format",
  "helpUrl": "/help/BAD_FORMAT#email" 
  }]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above JSON is returned in response body whenever we believe that the standard HTTP status is not enough for the calling application to know what has gone wrong. Let’s quickly see what purpose each of these fields fulfil and what values they may contain.&lt;/p&gt;

&lt;h2&gt;
  
  
  errorCode
&lt;/h2&gt;

&lt;p&gt;As the name suggests this field holds an unique error code. We decided to use string based error codes as they are easy to read. People also use numbers for this. I personally feel that numbers are cryptic for this kind of information.&lt;/p&gt;

&lt;h2&gt;
  
  
  field
&lt;/h2&gt;

&lt;p&gt;Name of the field which has this error. This is the same name that appeared in the incoming request.&lt;/p&gt;

&lt;h2&gt;
  
  
  originalValue
&lt;/h2&gt;

&lt;p&gt;This field contains the original value from the request. This is optional in most cases. While the client can make use of this information if they need to, there is one situation where we found returning this information to be useful. We had a POST API that accepted an array of the same resources. If more than one resource fails the same validation on the same field then we end up returning same error response twice. How will the client know which resource was in error? Adding original value in the response helps track the client which resource in the request had an error.&lt;/p&gt;

&lt;h2&gt;
  
  
  message
&lt;/h2&gt;

&lt;p&gt;This field contains a user-friendly message. If the consumer of the API is a front end application then it may choose to use this message directly to convey details of the error to the end user. There are two things to note around this field. One, the example above shows the message as tokenised with &lt;code&gt;{email}&lt;/code&gt; as a token in the message. The API should replace this token with the original value from the request before returning the response. Two, this message should be localised in a language that client prefers. This assumes that you have got a mechanism in your API for your clients to specify a preferred language.&lt;/p&gt;

&lt;h2&gt;
  
  
  helpUrl
&lt;/h2&gt;

&lt;p&gt;This field contains URL to a page that describes this particular error in more detail. The help page may answer the following questions (in addition to any other details you may want to include)&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;What causes this error? Examples will help here.&lt;/li&gt;
&lt;li&gt;How to fix this error?&lt;/li&gt;
&lt;li&gt;If you continue to get the error, how do you get help?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I call this mechanism &lt;strong&gt;discover-able documentation&lt;/strong&gt; because developers of the client applications do not have to know where to find this documentation when they encounter an error, they automatically discover appropriate documentation instantly.&lt;/p&gt;

&lt;h2&gt;
  
  
  Error codes that weÂ use
&lt;/h2&gt;

&lt;p&gt;The following list of error codes satisfies most common field level errors.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fq7hn1zn1rjcqog0ph2iw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fq7hn1zn1rjcqog0ph2iw.png" title="Error codes that we use" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are some domain-specific error codes we use that I have omitted. You can define as granular error codes as possible. Are you using well-formed error responses in your APIs? Do you find this approach useful?&lt;/p&gt;




</description>
      <category>rest</category>
      <category>api</category>
    </item>
    <item>
      <title>How do you choose between an interface and abstract class?</title>
      <dc:creator>Suhas Chatekar</dc:creator>
      <pubDate>Sat, 25 Feb 2017 18:37:36 +0000</pubDate>
      <link>https://dev.to/suhas_chatekar/how-do-you-choose-between-an-interface-and-abstract-class</link>
      <guid>https://dev.to/suhas_chatekar/how-do-you-choose-between-an-interface-and-abstract-class</guid>
      <description>&lt;p&gt;I have been asking this question in interviews for some years now. I get to hear a lot of interesting answers from folks. All these answers have helped me make a great addition to my knowledge. If you google this topic you would find a lot of interesting articles. &lt;a href="https://msdn.microsoft.com/en-gb/library/ms229013(v=vs.100).aspx"&gt;This article on MSDN&lt;/a&gt; offers a good discussion on the topic. To summarise the recommendations from there and few other articles I have come across, here are the reasons in favour of abstract classes&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Use abstract class if you have a default implementation of some behaviour that child classes do not have to implement&lt;/li&gt;
&lt;li&gt;Prefer abstract classes if your contract has a possibility of changing over time. So if you are using an abstract class and need to add a new method to your abstract class, you can happily add that without breaking any code using that class. The same is not true for interfaces.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;And these are the reasons in favour of interfaces&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Since multiple inheritance is not supported in C#, you cannot inherit your class from two abstract classes. An interface is your only option in such situations.&lt;/li&gt;
&lt;li&gt;If there is no default or common behaviour among all the classes that are inheriting from abstract class then interface may be a better choice.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I personally do not believe that these give a complete picture.&lt;/p&gt;

&lt;h1&gt;
  
  
  What is wrong with this reasoning?
&lt;/h1&gt;

&lt;p&gt;First, above recommendations are mostly around syntax a particular language supports and not around semantics (e.g. use interfaces if you need multiple inheritance). By semantics I mean, what definition of an interface fundamentally differentiates it from an abstract class?&lt;br&gt;
Second, I feel the above criteria are too futuristic. By that I mean, they all depend on you knowing how your design is going to take shape in future. At times, I may have some idea of how my design is going to take shape in future but most of the times I do not have enough clarity to know in advance&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Whether I am going to need to inherit from multiple abstract classes or not&lt;/li&gt;
&lt;li&gt;Whether there is going to be a default implementation of some contract or not&lt;/li&gt;
&lt;li&gt;Whether I would add a new method to a contract or define a new contract entirely in order to implement a change&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;So, if you do not know which way your software is going to go, there is no way you can base your decision of interface or abstract class on these reasons.&lt;/p&gt;
&lt;h1&gt;
  
  
  So how do we decide?
&lt;/h1&gt;

&lt;p&gt;Lately, I have been using below heuristic to determine when to use interfaces/abstract classes and I feel quite excited about it as it works most of the time.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Interfaces represent capabilities and abstract classes represent type&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;in other words&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Implementing interfaces represents can-do relationship and inheriting from (abstract) class represents an is-a relationship&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;To elaborate this point, let's consider following two classes&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Camera&lt;/span&gt; 
&lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;Shoot&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; 
  &lt;span class="p"&gt;{&lt;/span&gt; 
    &lt;span class="c1"&gt;//Take a picture here &lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt; 

&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Gun&lt;/span&gt; 
&lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;Shoot&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; 
  &lt;span class="p"&gt;{&lt;/span&gt; 
    &lt;span class="c1"&gt;//Hit the target &lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Both &lt;code&gt;Camera&lt;/code&gt; and &lt;code&gt;Gun&lt;/code&gt; can Shoot, that is their capability. But they are both not the same type of things, they are completely different. So an interface like below would make more sense here&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;interface&lt;/span&gt; &lt;span class="nc"&gt;IShootable&lt;/span&gt; 
&lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;Shoot&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt; 

&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Camera&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;IShootable&lt;/span&gt; 
&lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;Shoot&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; 
  &lt;span class="p"&gt;{&lt;/span&gt; 
    &lt;span class="c1"&gt;//Take a picture here &lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt; 

&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Gun&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;IShootable&lt;/span&gt; 
&lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;Shoot&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; 
  &lt;span class="p"&gt;{&lt;/span&gt; 
    &lt;span class="c1"&gt;//Hit the target &lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you have learned OO programming the same way I did, then you would remember the classic shape example as below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;abstract&lt;/span&gt; &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Shape&lt;/span&gt; 
&lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;Draw&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt; 

&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Rectangle&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Shape&lt;/span&gt; 
&lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;Draw&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; 
  &lt;span class="p"&gt;{&lt;/span&gt; 
    &lt;span class="c1"&gt;//Draw a rectangle here &lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt; 

&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Circle&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Shape&lt;/span&gt; 
&lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;Draw&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; 
  &lt;span class="p"&gt;{&lt;/span&gt; 
    &lt;span class="c1"&gt;//Draw a circle here &lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;Rectangle&lt;/code&gt; and &lt;code&gt;Circle&lt;/code&gt; inheriting from &lt;code&gt;Shape&lt;/code&gt; makes perfect sense here because &lt;code&gt;Rectangle&lt;/code&gt;/&lt;code&gt;Circle&lt;/code&gt; are a type of &lt;code&gt;Shape&lt;/code&gt;.&lt;/p&gt;

&lt;h1&gt;
  
  
  In closing
&lt;/h1&gt;

&lt;p&gt;As your software grows and new features start pouring in, old features keep changing, you would hit a point where you would say to yourself “Oh God, I should not have used an abstract class here”. Instead of trying to predict feature about who will reuse which code, focus on determining whether it is a capability that you are abstracting away or a common type. If you find that line of thinking difficult, then work out if it is a can-do relationship that you are trying to model or an is-a relationship.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>csharp</category>
      <category>java</category>
      <category>oop</category>
    </item>
    <item>
      <title>Why you should use standard HTTP methods when designing REST APIs</title>
      <dc:creator>Suhas Chatekar</dc:creator>
      <pubDate>Thu, 23 Feb 2017 21:25:00 +0000</pubDate>
      <link>https://dev.to/suhas_chatekar/why-should-you-use-standard-http-methods-while-designing-rest-apis</link>
      <guid>https://dev.to/suhas_chatekar/why-should-you-use-standard-http-methods-while-designing-rest-apis</guid>
      <description>&lt;p&gt;One of the characteristics of a good REST API is that it uses the standard HTTP methods in a way they are supposed to be used. We hear this all the time and this is the most fundamental guideline of REST. As generally understood, we use the following HTTP methods while designing REST APIs&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;GET&lt;/code&gt;&lt;/strong&gt; – For returning resources&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;POST&lt;/code&gt;&lt;/strong&gt; – For creating a new resource&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;PUT&lt;/code&gt;&lt;/strong&gt; – For updating a resource&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;PATCH&lt;/code&gt;&lt;/strong&gt; – For updating a resource&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;DELETE&lt;/code&gt;&lt;/strong&gt; – For deleting a resource&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But beyond the basics, why is it like that? Isn't use of two methods, &lt;code&gt;PUT&lt;/code&gt; and &lt;code&gt;PATCH&lt;/code&gt; for an update operation confusing?&lt;/p&gt;

&lt;h1&gt;
  
  
  What do the specs say?
&lt;/h1&gt;

&lt;p&gt;Let's first get the obvious out of the way. Let's see what the specs say&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="http://httpwg.org/specs/rfc7231.html#GET"&gt;GET&lt;/a&gt;
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;The &lt;code&gt;GET&lt;/code&gt; method requests transfer of a current selected representation for the target resource.&lt;code&gt;GET&lt;/code&gt; is the primary mechanism of information retrieval&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;What this really means is that you should use &lt;code&gt;GET&lt;/code&gt; for an API method that returns the latest version of the resource identified by the API URL.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="http://httpwg.org/specs/rfc7231.html#POST"&gt;POST&lt;/a&gt;
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;The &lt;code&gt;POST&lt;/code&gt; method requests that the target resource process the representation enclosed in the request according to the resource's own specific semantics.&lt;br&gt;
This is slightly confusing but that is because &lt;code&gt;POST&lt;/code&gt; can be used to do more than one thingâ€Š–â€Šone of which is creating a new resource. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This is confusing because if the server can perform more than one operations in response to a request then how do consumers find out what happened exactly? The specification says that the server should make use of one of the 2xx family of status codes to indicate to the client what happened on the server.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="http://httpwg.org/specs/rfc7231.html#PUT"&gt;PUT&lt;/a&gt;
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;The &lt;code&gt;PUT&lt;/code&gt; method requests that the state of the target resource be created or replaced with the state defined by the representation enclosed in the request message payload.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So &lt;code&gt;PUT&lt;/code&gt; can be used to update a resource as well as to create a new resource. That may sound strange at first, but let's keep things simple for now and trust we should use &lt;code&gt;PUT&lt;/code&gt; for an API method that lets consumers update the resource identified by the API URL.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="http://httpwg.org/specs/rfc7231.html#DELETE"&gt;DELETE&lt;/a&gt;
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;The DELETE method requests that the origin server remove the association between the target resource and its current functionality.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Again, like &lt;code&gt;POST&lt;/code&gt;, &lt;code&gt;DELETE&lt;/code&gt; can be used for more than one operations that eventually result in something being removed. Let's trust we should use &lt;code&gt;DELETE&lt;/code&gt; for an API method that let's consumers delete the resource identified by the API URL.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://tools.ietf.org/html/rfc5789#page-3"&gt;PATCH&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;The difference between the &lt;code&gt;PUT&lt;/code&gt; and &lt;code&gt;PATCH&lt;/code&gt; requests is reflected in the way the server processes the enclosed entity to modify the resource identified by the Request-URI. In a &lt;code&gt;PUT&lt;/code&gt; request, the enclosed entity is considered to be a modified version of the resource stored on the origin server, and the client is requesting that the stored version be replaced. With &lt;code&gt;PATCH&lt;/code&gt;, however, the enclosed entity contains a set of instructions describing how a resource currently residing on the origin server should be modified to produce a new version.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;PATCH&lt;/code&gt;, like &lt;code&gt;PUT&lt;/code&gt;, should be used for modifying a resource, however, the semantics of modification is performed as slightly different. We will get to this difference in the next section.&lt;/p&gt;

&lt;p&gt;So our original understanding of what each of the HTTP verbs means is in line with what the specifications say what they mean. So far so good. Specification tells us in which situations we should we use each verb, but it's still just a specification. Our implementation can still disregard what the specification tells us to do and have the creation of new resources implemented behind a &lt;code&gt;GET&lt;/code&gt; operation and deletions implemented a POST operation. However, there are two big benefits to respecting the specification.&lt;/p&gt;

&lt;h1&gt;
  
  
  Idempotence is not limited to mathematics
&lt;/h1&gt;

&lt;p&gt;In mathematics, an idempotent operation is one which produces the same result every time it's performed on the same input. A counter is a good example of this. The operation to “set the counter to 6” is idempotent but the operation to “increment the counter by 1” is not. You see the difference? In the first case, no matter how many times you set the counter to 6, it's still set to 6 in the end. Whereas, in the second case, if the counter had an initial value of 4 and every time you increment it by 1, the counter gets set to different value.&lt;/p&gt;

&lt;p&gt;Applied to REST, an idempotent operation is the one which does not change the target state of the server. On the other hand, a non-idempotent operation would always change the target state of the server. Notice that we are not talking about state change here but rather the target state of the server. HTTP specification states that &lt;code&gt;GET&lt;/code&gt;, &lt;code&gt;PUT&lt;/code&gt; and &lt;code&gt;DELETE&lt;/code&gt; are idempotent operations. &lt;code&gt;POST&lt;/code&gt;, and &lt;code&gt;PATCH&lt;/code&gt; are non-idempotent operations. “Like earlier, this is just a specification. Why do you need to follow it?” you might ask. Well, there is a reason and a very good one.&lt;/p&gt;

&lt;p&gt;An idempotent operation gives the consumer of the API a guarantee that the state of the server will be the same no matter how many times they call the API. This guarantee is very useful. Imagine that server executes the API method that consumer called successfully but there is an error while sending the response back to the consumer. The consumer ends up getting an error even though the operation has completed successfully on the server. What should the consumer do? Now, if the operation server performed was advertised as idempotent, then A consumer can send the request to execute the operation one more time. It can keep doing that as long as it sees a success response without causing the server to perform any unwanted state change. On the other hand, if the operation was not advertised as idempotent then the consumer would know that it need to check with the server before performing the operation again.&lt;/p&gt;

&lt;p&gt;Creation of a new resource is one operation which changes the target state of the server every time it is run with the same inputs leading to a different target state after each execution. Same may apply to deletion of a resource depending on the implementation. Imagine what would happen if we put these operations behind a &lt;code&gt;GET&lt;/code&gt; or a &lt;code&gt;PUT&lt;/code&gt; verb? A consumer may end up executing these operations multiple times inadvertently affecting the target state of the server negatively. Returning value of a resource, on the other hand, has no impact on the target state of the server and hence should be implemented behind an idempotent verb &lt;code&gt;GET&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;There still is a difference between a &lt;code&gt;PUT&lt;/code&gt; and a &lt;code&gt;PATCH&lt;/code&gt;. Both are used to modify an existing resource. If you go back to what specification says about &lt;code&gt;PUT&lt;/code&gt; you would notice that its similar to saying “set the counter to 6”. &lt;code&gt;PUT&lt;/code&gt; is modifications where the consumer provides the target state for the complete resource and instructs the server to replace whatever value the resource has currently with the new value the consumer is sending. No matter how many times the consumer performs this operation, the end state of the resource is never going to change. &lt;code&gt;PATCH&lt;/code&gt;, on the other hand, is similar to “increment the counter by 1”. &lt;code&gt;PUT&lt;/code&gt; can be chunky for resources that are large in size and eats away a lot of bandwidth. &lt;code&gt;PATCH&lt;/code&gt; was introduced to let consumers issue an instruction to the server that tells it how to change a part of the resource. This instruction if executed multiple times could result in an unwanted end state.&lt;/p&gt;

&lt;p&gt;In the end, it's all down to the implementation but if your implementation respects the specification then the life of your API clients would be a lot easier. While we are talking about respecting the specification, there is another interesting characteristic that the specification says all HTTP servers and proxies should build when dealing with HTTP request. Your REST API that respects the specification can make good use of this.&lt;/p&gt;

&lt;h1&gt;
  
  
  Web is fast because of caching
&lt;/h1&gt;

&lt;p&gt;The web is probably one of the heaviest users of cache. It not only makes loading of websites faster, it also works so reliably that not making use of it when it's at our disposal would be foolish. REST uses HTTP and so it should make use of its caching characteristics where possible. The HTTP cache specification is quite detailed about how it should be implemented by HTTP servers and proxies but I would like to pick two things from the specification that directly apply to REST.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;An operation behind a &lt;code&gt;GET&lt;/code&gt; endpoint does not change the target state of the server, therefore, the response of a &lt;code&gt;GET&lt;/code&gt; endpoint can be cached resulting in further requests to the same endpoint being returned faster from the cache&lt;/li&gt;
&lt;li&gt;An endpoint behind &lt;code&gt;PUT&lt;/code&gt;, &lt;code&gt;POST&lt;/code&gt;, &lt;code&gt;PATCH&lt;/code&gt; and &lt;code&gt;DELETE&lt;/code&gt; changes the target state of the server, therefore, a successful response out of any of these endpoints can be used to bust the previously cached responses.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I know that I am overly simplifying the caching specification of HTTP but this is one of the most elegant caching specification I have come across. And all it takes to take full advantage of this to respect the HTTP specification.&lt;/p&gt;

&lt;p&gt;One last thing about caching that impacts the consumers of an API more than the developers of the API. An API that follows HTTP Cache specification is the most useful to a consumer as long as the consumer uses an HTTP client library that supports caching. I am sure there is at least one such library available for every leading programming platform. So encourage your consumers to use one of those libraries. Having said that, API developers should still make use of caching as HTTP and proxy servers will still cache the responses.&lt;/p&gt;

&lt;h1&gt;
  
  
  In closing
&lt;/h1&gt;

&lt;p&gt;The Beauty of the HTTP API (and I am intentionally avoiding the word REST here) is that it provides a lot of flexibility to the API developer. Any flexibility is a good thing as long as it's not misused. I have seen many HTTP APIs that either does not make use of recommended HTTP methods or if they do, the developer has little knowledge of why he made those choices. I hope this post throws some light on why we should use recommended HTTP methods.&lt;/p&gt;

</description>
      <category>rest</category>
      <category>http</category>
      <category>api</category>
    </item>
  </channel>
</rss>
