Typescript, JQuery and Browserify

So far we have seen how to develop simple web page using Typescript. To develop a big website, you must use libraries like JQuery, Backbone etc. These libraries help reduce the time required to develop some of the common requirements. But as we have seen, while importing references from other files, we use import statement in Typescript. This effectively gets translated into a call to require function. Unfortunately, require function is not built-in feature of browsers. Consider below example

import { UserRepository } from './user';

gets transpiled into

var user_1 = require("./user");

There is no definition of require function available. If you load these files into the browser using script tag, it will simply fail. Does that mean we should write all the logic within one single file and never create modular code? OR Typescript is not meant for applications targeting browser and it can only be executed in the server.

Polyfill

Fortunately, there is still a way to use Typescript for client-side application development. To be able to leverage Typescript transpiled Javascript in a web browser you must make use of tools like Browserify or Webpack.

These libraries fill the gap by providing features that are not present in the given environment. In our case, we need the ability to use require function in Browser.

Project Configuration

We begin with the sample Typescript project which is already configured with few sets of libraries – Copyfiles, nodemon, Browserify, jQuery. I have also installed JQuery typescript definition. The jQuery definition is useful at the development time. VS code can provide hints about jQuery functions using the definition file. The command to install definition is 

npm install --save-dev @types/jquery

Note that the definition is required only at the time of development. We are using –save-dev flag to indicate the dependency is required only for development and not runtime.

Browserify in Action

You will notice in the video, that we have created files dedicated to one single use.

• UserRepository.ts is responsible to interact with the REST API and return User details.
• index.ts is responsible to invoke API and render the data.

Each of these file gets translated into corresponding Javascript definition. The import statements are converted to require function which works in NodeJS but not in browser. Browserify helps to bridge that gap by combining all the JS files into one single JS and providing implementation for require function.

Under the hood

If you go through, package.json file, you will realize that I have created a special script in scripts section.

“bundlejs”: “browserify dist/scripts/index.js -o dist/bundle.js”

The command references index.js file which acts as a starting point for the application. Browserify will go through all the references in the file. It will then combine all the code into one single file named as bundle.js (check the -o argument). The final step is to include the script tag in index.html and refer to the bundle.js file.

This was prettyhttps://github.com/carbonrider/tutorial_typescript simple example, but it will make you aware of the preliminary steps required to integrate third-party libraries. You can find the source code of this article at Github.