During the last two months or so I have writen several entrances related to Typescript, the language of Microsoft to put some order into kaos, I mean, Javascript (Typescript is gaining every day gains more and more followers). Today let’s melt many of the concepts seen in previous entries, until having a template to use with typescript, RequireJS, jQuery and Bootstrap, ready to go.
The code you have it available on GitHub, and now we begin to detail it. The uploaded project is ready for use with CATS, which is the IDE software I use for programming in Typescript and I have already introduced you.
File organization
In order to setup a project, there is nothing better that having a good file organization, specially if you are going to build a large app. So, put order into your files. Here you have the organization file in my template:
Typescript Template dirs
The .settings dir is build for CATS and in it, there is a file named config.json where all configuration of the project is saved there.
The app dir
The whole app is inside the app dir, that also is divided into several dirs, each one with its function:
- css: for the style sheets
- fonts: are the Bootstrap fonts
- js: for the Javascript libraries
- scripts: where you can save the generated Javascript files by the TypeScript compiler
- templates: where you can store the HandleBars templates.
- ts: Typescript files
- typings: is for the TypeScript definition, based on Definitely Typed.
This is my organization, but you can modify it in order to satisfy your needs.
This template is ready to use several Javascript libraries (also you have their correspondan definition files .d.ts includes in typings) such us jQuery, Bootstrap and RequireJS.
RequireJS configuration
In order to work with HandleBars using RequireJS, you need to use some RequireJs plugins that you need to setup in the configuration file for RequireJS.
Config.ts
The file config.ts is where you define all configuration options, you define where the libraries are (defined with baseUrl). In the previous image, Javascript files are loaded if they are in the ts directory, because this is the path where the compiler generated them.
In the config gile you can find also the requireJS plugins to be used, and one of them is HandleBars, a cool plugin in order to use templates.
App.ts
This is the file where the app starts, defined at the end of the config.ts, with the instruction require[“app”].
app.ts
You need to reference to jquery, requireJs and Bootstrap, and use them correctly. It is also important the reference to menu.ts, where the app has the funcionality (I name menu.ts because apps normally have a menu with several options and to give some order!).
Menu.ts
This is the file where you have to start coding with Typescript. The class MenuApp is where you start writting functions of your app, becuase the template is ready to go!!
Menu.app
I would like to mention the import of jQuery using require, and after that, you can start using jquery. Also, a variable (at a module level) is defined to put our starting values for the app.
once you load the template in the browser, you will see the message in the console that Template has been loaded!
Last, the HTML
The last file is the index.html with the HTML code. The most important part is at the end of the file, where RequireJS and the config file are loaded!
index.html
Inside the HEAD tags, you declare the use of CSS, and the scripts are at the end.
Typescript Template in action
This is the first version of the template, and I bet there will be modifications and improvements in the next months, but untl now, you have a nice template ready to go using TypeScript, HTML, CSS, jQuery and RequireJS.
In the next entrance I will put the template in action!
Happy coding!