In this blog, I will create a small program showing how TypeScript language can be used to write great javascript code.
If I can learn or already know javascript why should I bother? For me, there were only two reasons to get sold - one, writing structured javascript is tough. Its tough to understand, tough to debug and tough to maintain. Implementing classes, inheritance, interfaces etc that I am so used to using C# doesn't come naturally in javascript. And any code that is not simple is not easily maintainable. Second, static type checking avoids so many of those wild runtime errors that take up just too much time to debug. That too with proper intellisense!
Does TypeScript solves all these issues - YES! Moreover, its output is a js file so there are no compatibility issues with browsers. So, let's start learning. First, some basic theory -
If I can learn or already know javascript why should I bother? For me, there were only two reasons to get sold - one, writing structured javascript is tough. Its tough to understand, tough to debug and tough to maintain. Implementing classes, inheritance, interfaces etc that I am so used to using C# doesn't come naturally in javascript. And any code that is not simple is not easily maintainable. Second, static type checking avoids so many of those wild runtime errors that take up just too much time to debug. That too with proper intellisense!
Does TypeScript solves all these issues - YES! Moreover, its output is a js file so there are no compatibility issues with browsers. So, let's start learning. First, some basic theory -
- The base type (like object in c#) is any.
- Types are - string, number, bool, any.
- Undefined type is a sub type of primitive types. So var num:number; is of type number but is also undefined. Similarly, var company=undefined; if of type any but is also undefined.
- Same case for null.
- Class members are public by default. You can make them private by using the private keyword.
- All methods in the class are virtual by default.
- module is just a container that helps in scoping.
- import keyword is used to bring in an external module.
- export keyword is used to show that in a module this particular number will be accessible when imported.
- TypeScript compiler can be run from command line using command tsc.exe
Now, let's take a look at the code. We will create 5 main files besides the usual in a VisualStudio project. Let's start with the html file first.
Only thing worth noting here is that although we are using jquery and toastr js libraries, we don't have them referenced. That is because, we are using require js to load modules. The data-main attribute tells require js to first read the main.ts file and from there start figuring out the dependencies. So, lets take a look at main.ts file.
Here, in the require js config we are just setting the base url to find all other js files and also providing some path relative to base url to find the toastr and jquery libraries. The second line is saying that once the bootstrapper, toastr and jquery libraries are loaded, run the function which calls boostrapper.run method.
In bootstrapper js, we first specify using the import keyword that we need sample module. require js will make sure that sample js is loaded. In there, we are creating the base and derived objects for person and employee and then calling methods on them. In the end we cast the employee derived object to base person object and call its method which is virtual as all methods are virtual by default in TypeScript. We have the run method with keyword export which is the reason why the bootstrapper module was able to call the run method.
In sample js, we define the classes Person and Employee. In Person class we have a private variable which can be accessed through properties, public variables, constructors and few methods. It also implements an interface. In the constructor, we show how we can use another interface just to make sure that parameters are according to a contract that we want. Similarly in the Employee class we show inheritance by extending the Person class.
Finally the contract definitions for interfaces is defined in the common.js file which is a dependency for sample js. It also has an assert utility function to output the messages in a list on UI.
When we run this page, we see the above output.
Only thing worth noting here is that although we are using jquery and toastr js libraries, we don't have them referenced. That is because, we are using require js to load modules. The data-main attribute tells require js to first read the main.ts file and from there start figuring out the dependencies. So, lets take a look at main.ts file.
Here, in the require js config we are just setting the base url to find all other js files and also providing some path relative to base url to find the toastr and jquery libraries. The second line is saying that once the bootstrapper, toastr and jquery libraries are loaded, run the function which calls boostrapper.run method.
In bootstrapper js, we first specify using the import keyword that we need sample module. require js will make sure that sample js is loaded. In there, we are creating the base and derived objects for person and employee and then calling methods on them. In the end we cast the employee derived object to base person object and call its method which is virtual as all methods are virtual by default in TypeScript. We have the run method with keyword export which is the reason why the bootstrapper module was able to call the run method.
In sample js, we define the classes Person and Employee. In Person class we have a private variable which can be accessed through properties, public variables, constructors and few methods. It also implements an interface. In the constructor, we show how we can use another interface just to make sure that parameters are according to a contract that we want. Similarly in the Employee class we show inheritance by extending the Person class.
Finally the contract definitions for interfaces is defined in the common.js file which is a dependency for sample js. It also has an assert utility function to output the messages in a list on UI.
When we run this page, we see the above output.