Duck Typing

In this post I will describe Duck Typing in regards to dynamic languages (JavaScript, PHP, Python, Ruby).

If you ever read or heard about Duck Typing, you have probably seen the following quote:

If it walks like a duck and quacks like a duck, it must be a duck.

Without context, this quote doesn’t mean much.  Hopefully at the end of this post the previous quote will make much more sense.

Below is an excerpt from Wikipedia.  Without understanding Duck Typing, the following excerpt doesn’t make much sense either.

Duck Typing requires that type checking is deferred to runtime, and is implemented by means of dynamic typing or reflection.

Duck typing is concerned with establishing the suitability of an object for some purpose. With normal typing, suitability is assumed to be determined by an object’s type only. In duck typing, an object’s suitability is determined by the presence of certain methods and properties (with appropriate meaning), rather than the actual type of the object.

https://en.wikipedia.org/wiki/Duck_typing

Duck Typing in JavaScript – Dynamic Language

In the following examples, we are going to create following 3 different objects in JavaScript

  • point2D
  • point3D 
  • me

All three objects  will include properties: name,  x and y, they  also include a calculate() function.  The Me object will include the properties occupation and birthDate. See image below for a visualization for object model.

image

In the code below, I created the three object (point2D, point3d, me).  I also created a function called calculate() for each object.  The calculate() function for all the objects returns a string. 

There is a displayPoint() function defined.  This function could just have been called display().  The function displayPoint() has one parameter called “point”.   The function signature looks like this:

function displayPoint(point)

The parameter name “point” doesn’t mean anything.  I could have called it “obj”.  I called the function “displayPoint” and the parameter “point” because contextually the function is created to work with points.  Even though I created the function displayPoint(point) to work with points, but I can pass any type of object as a parameter in to the function.

In function displayPoint(point) the code accesses the property “name” and the method “calculate()” of the object “point”. It doesn’t matter what type of object is passed in to the function “displayPoint”, but the object must have the property “name” and the method “calculate()” to run without an error.

This is Duck Typing.

What is the “me” object? Is it a person or a point – both, neither?  What do the properties x and y represents.  The properties x and y could represent a point, but they could also be pointers (reference) to XY chromosomes.  But in this context of the method “displayPoint”, the object “me”, and the properties x and y are points and treated like points.

Now, the following quote has context. I hope it makes more sense now.

If it walks like a duck and quacks like a duck, it must be a duck.

Resources

Visual Studio Code, AngularJs, & Intellisense

My primary goal is to get VSCode intellisense to work with AngularJs.

I’m working on a new application and I’m developing it with AngularJS (Angular 1). I’m also using VSCode (Visual Studio Code) as the IDE. My understanding is that VSCode should provide intellisense for JavaScript code, which it does. In the following image, you can see that VSCode provides intellisense for the variable “d”. VSCode is smart enough to see that this is a string and displays a list of string functions to select from.

image

Since I’m developing with AngularJS, I would like to have intellisense here also.  In the index.html page, I have reference to my AngularJs library, but in my JavaScript file intellisense is not working as expected.

image

To get intellisense working for AngularJS in VSCode.  The following steps need to occur

  1. Install node.js typings package globally
  2. Run typings and install AngularJS types
  3. Create a jsconfig.json file

Assumptions of reader

  • Have knowledge of node.js and npm

Tools and version

  • node.js 6.2.1
  • npm 3.9.5
  • Visual Studio Code 1.2
  • Windows

1. The Situation

I’m creating an AngularJS application.  I have two files index.html and module.js.  The index.html file references angular.js library and module.js. The module.js file is where the JavaScript and Angular 1.5 component will live.

image

image

By default, VSCode provides intellisense for JavaScript.  In the following image you will notice that the variable “d” is a string and that VSCode provides intellisense  based on the context of “d” being a string.

image

In module.js, when I enter “angular.” I expect that intellisense to display a list of AngularJS methods and properties, but as you can see in the image below, this does not occur.  My goal in this blog post is to have intellisense display AngularJS methods and properties.

image

2. Install typings package

The typings package needs to be installed.  Since this package will be used for this solution and others.  I want to install it globally.  First lets’ see what packages are installed currently on the computer.

To figure out what packages are installed globally, run the following command.

npm list -g –depth=0

This command will return all packages at a root depth and not include any children or dependencies of the base packages.

image

As we can see the typings package has not been install. Let’s install it globally.

npm install -g typings

SNAGHTML75b4fe

Now that we installed typings it should now be available to use.  Notice the version of typing is 1.3.0.

image

3. Install AngularJS types

When I initially attempted to install angular typings, I received the following error (see image). This worked just a few days ago. But I install typings 1.3.0. and my typing install didn’t use the same format as pre typings 1.0 used.  You can read more about that here Updating Typings From 0.x to 1.0?

image

To install angular typings, I had to enter the following command:

typings install dt~angular –save –global

image

When the angular typing is installed the typings.json file and a folder called typings should be created.  See image below for more information .

image

4. Create a jsconfig.json file

Now create an empty jsconfig.json file.

image

If we were using TypeScript and transpiling code, then this file would contain configuration. But since we are only need intellisense to work, this file can remain empty

5. Validate if Intellisense is working for Angular

Go back to the module.js file. Enter “angular.”.  The intellisense should now display AngularJS methods and properties.

image

Resources