A minimal web application structure with technologies like node.js, typescript, express

Recently, I have been working the lot with Node.js and TypeScript. And I absolutely love TypeScript due to its features. I was actually looking for a boilerplate code to start which should be very easy to understand. But there was no code there. So I decided to create a minimum web application structure. I have used it in some project and I was quite happy with it.

So I thought why should I make it open source so that people can also get benefited by this. So here I am presenting A minimal Web Application Structure with technologies like Node.js, TypeScript, and Express.

You can find the complete source code on Github at following location - https://github.com/dotnetjalps/minimum-nodejs-typescript-express

How to Run this Project:

To run this project you need to first install all the NPM packages via the following command.

npm install 

Then you can run this project with the following command.

npm start

Directory Structure Of Project:

• App.ts – Typescript file for creating express application class and where we have initialized the application.
• routes.ts - Typescript files for creating all the routes under Init() Method.
• package.json - Contains all the packages and dev dependencies required for this application. You can add more as your requirement.
• tsconfig.json - Where all the typescript configuration is there and we converting typescript into ES5.
• Controller Folder - Contains all the classes for the controller of the express application
• tsconfig.josn  - Contains all the rules for TypeScript linting.

I’m looking for constructive feedback on this and I’m hoping that I will get it.

Continue Reading

TypeScript configurations in Visual Studio Code

Before sometime I have blogged about - Why It's the right time to learn Typescript and It does get lot of buzz. Typescript getting every day more popular due to reason I have mentioned in above blog post.  So now in this blog we are going to learn how we can use TypeScript with new Visual Studio Code editor.

TypeScript support in Visual Studio Code:

As you know Visual Studio Code is in beta now and provide great support for typescript. Here you can operate TypeScript in two modes.

1) File Scope:

In this mode Visual Studio Code will treat each typescript file as separate unit. So if you don't reference the typescript files manually with reference or external modules it will not provide intellisense as well as there will not common project context for this.

2) Explicit Scope:

In this scope we are going to create a tsconfig.json which will indicate that folder in which this file exist is a root of TypeScript project. Now you will get full intellisense as well as other common configurations on tsconfig.json file.

You can create a new file via File->New file from Visual Studio Code and add following code about TypeScript configuration under compiler operations.

{
    "compilerOptions": {
        "target": "ES5",
        "module": "amd",
        "sourceMap": true
    }
}

Converting TypeScript into JavaScript files automatically(Transpiling ):

Now as we all know that TypeScript is a super set of JavaScript and this files we can not directly put into html page. As browser will not understand the typescript itself. So we have to convert it into JavaScript. So to convert TypeScript file into JavaScript file we need to configure a in built task runner which will automatically convert all the TypeScript files into JavaScript.

To configure Task Runner you can either press F1 or Ctrl+Shift+P and type task runner. Configure Task runner will popup.



Once you press enter it will create a .vscode folder and create file called task.json which will have following code.

{
    "version": "0.1.0",

    // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
    "command": "tsc",

    // The command is a shell script
    "isShellCommand": true,

    // Show the output window only if unrecognized errors occur.
    "showOutput": "silent",

    // args is the HelloWorld program to compile.
    "args": ["HelloWorld.ts"],

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

Now when you build your project it will create a JavaScript file automatically. Now Let's create a TypeScript file like following.

class HelloWorld{
     PrintMessage(name:string){
        console.log("Hello world:" + name);
    }
}

Here you can right now there is only one file there in explore section.



Now when you build the project with Ctrl+Shift+B. It will create a JavaScript file.



and Following is a code for the same.

var HelloWorld = (function () {
    function HelloWorld() {
    }
    HelloWorld.prototype.PrintMessage = function (name) {
        console.log("Hello world:" + name);
    };
    return HelloWorld;
})();

Hiding JavaScript File from explore area in Visual Studio Code:

I don't like my JavaScript file to show in explore area as we already have TypeScript file. So we don't have to worry about JavaScript file. There is a way to hide JavaScript file and I have to add following code in my user settings file. Which you can get it via File->Preferences->UserSetting

"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/*.js":{
    "when": "$(basename).ts"
}

Here in above I have written custom filter for excluding JavaScript file when TypeScript file is present. Now it will not JavaScript file even if they exists on disk.




That's it. Hope you like it. Stay tuned for more!!. In forthcoming post we are going learn a lot of TypeScript.

Continue Reading

Why it's the right time to learn TypeScript.

In Today's world, If you are an web developer and you don't know JavaScript then you will feel left behind. It's never been a good time to be a JavaScript developer than now. With the rise of Node.js  JavaScript is everywhere now. But as you know when Size and Complexity of your JavaScript is Increased it's very difficult to maintain and mange. That's where TypeScript comes into picture. It is a life saver some times. So in this blog post we will see Why It's the right time to learn TypeScript.

What is TypeScript?

TypeScript is a free and open sourced programming language developed and Maintained by Microsoft. It works as a super set of JavaScript. As we all know that JavaScript is very liberal language by nature. So that we tend to make more mistakes and we does not know all the errors at run time. TypeScript is a strict super set of JavaScript so that you can get most of errors at compile time only.  As per official website of TypeScript it's a language that lets you write JavaScript in the way you really want to. TypeScript offers all the features that you need for Object oriented programming. You can find more information about TypeScript on it's official web site on below link.

http://www.typescriptlang.org/

ECMAScript and TypeScript:

ECMAScript is the specification standard of the JavaScript. So right not standard stable version if ECMAScript 5 and some of the browsers support ECMAScript 6. ECMAScript 6 features are being adopted by latest browsers.While TypeScript follows most of syntax of ECMAScript 6 so that you don't have a feel of the learning new language. As per official road map of Typescript 1.6 comes with ES6 Generator so you can convert your script code into ECMAScript6. Your can find more about that on following blog post.

http://blogs.msdn.com/b/typescript/archive/2015/09/16/announcing-typescript-1-6.aspx

TypeScript is everywhere:

As we know TypeScript is a fully Object Oriented language, It's provide great productivity boosts than JavaScript and it's super set of JavaScript so it will be compiled into JavaScript itself. So because of this lots of great framework started using TypeScript like following.

1. Angular JS
2. Iconic Framework for creating frond end mobile App
3. Native Script from Telerik is also completely written TypeScript itself.

Take a example of AngularJs, It is one of the most popular JavaScript Framework on earth. With Angular.js 2.0 it will be fully written with TypeScript.

Tooling:

Most of Web Development editor whether it's paid or free are having TypeScript tooling.  Most popular editors like Visual Studio, Visual Studio Code, WebStorm, Atom, Sublime text and Eclipse are having great tooling for TypeScript.

Why to use TypeScript:

Followings are reason why we should use TypeScript instead of JavaScript.

1. Fully Object Oriented support with classes and interfaces. So It's a great productivity boost for any developer and easily maintainable and understandable.
2. It's provide most of the errors compile time while JavaScript is more liberal than this. So less run time error means less bugs for your application.
3. Refactoring is very easy in TypeScript compare to JavaScript.

So it's never been late. It is the right time to learn TypeScript. Hope you like it. Stay tuned for more!.

Continue Reading