Now let's see how can we bring TypeScript into the mix. I have been playing around with TypeScript for a while now and here is my basic development workflow:
1) Create a main app.ts file which will contain the primary code for my application or "WebPart". In addition, app.ts will also have import references to any custom or third party modules e.g. jQuery
3) Use tslint to check the quality of my TypeScript
5) Minify my app.js using gulp-uglify and rename it to app.min.js using gulp-rename
6) Upload the debug and minified files to the Style Library in SharePoint using gulp-spsave
Before we begin, if you are using Visual Studio 2015 like me, make sure you have the latest version of Node installed and Visual Studio is configured to use it. Here is an excellent tutorial on how to do this: How to configure Visual Studio 2015 with the latest version of Node.js and NPM
Now let us have a look at the important bits of my solution. I have uploaded the entire solution on GitHub here: https://github.com/vman/MyTypeScript
1) app.ts file:
Here is a list of all npm packages used in my solution. Notice the jQuery package, browserify and tsify use it to include jQuery in the final bundle as it is requested by my app.
5) Gulp tasks:
The watch-ts-upload-to-sp task looks for any changes in the .ts files (app.ts and User.ts). If any changes are noticed, it runs the upload-to-sp task.
The upload-to-sp task has dependencies chained up so that the tasks are run in the following order:
1) lint-ts to check the code quality of TypeScript
2) browserify to import all the required modules and create a single app.js bundle file
3) minify-js to create a minified file.
4) Finally, the upload-to-sp task runs to upload the app.js and app.min.js files to the Style Library.
(click to zoom)
A note on Typings:
I have included typings as an NPM package in my solution (have a look my package.json file) and then used the following commands to get the required typings in my project:
Thanks for reading!