7 days of WordPress plugins, themes & templates - for free! Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.2 Compile TypeScript to JS

TypeScript is a statically typed version of JavaScript ES6 (ECMAScript 2015), and it's becoming more and more popular. Not only that, but anyone working with Angular 2 will probably need a TypeScript compiler. So let's see how to get one set up and integrated into a Gulp build pipeline.

3.2 Compile TypeScript to JS

Hi folks in this lesson we're going to see how we can compile TypeScript down to JavaScript ready to be used in a browser. So we'll do the same as before. We'll need a test TypeScript file to test our setup. So let's create a new directory in our src folder called ts. And inside this folder we can add a basic TypeScript file called app.ts. Okay, so let's just add a small bit of TypeScript. Let's just add a Person class. So we've got a basic Person class with a couple of private properties, which are strings. And we have a constructor that creates a new Person instance. The parameters of the constructor have enforced types, they should both be strings. Last of all we create an instance of a new Person object. Great, so now we need to install a few things that we'll want for our task. We'll need TypeScript itself as well as the Gulp TypeScript package. And once these are installed we can add our new Gulp task. In the Gulp_tasks directory, let's create a new file called typescript. So let's set up the basic compilation first. We can start out by loading the packages that we need. So we need to load Gulp and the Gulp TypeScript package. And we can use the same Gulp source maps package that we used in the last lesson. So first of all our task will need to collect the source files that it needs to compile. And this pattern will match any .ts file inside any folder inside the ts folder. Now we need to pipe the source files to the Gulp TypeScript package. We invoke the TS package and parse a configuration object in. Most TypeScript options are supported. In this case we just need to specify the name of the compiled file which we do using the out option. And last of all we just need to write the output file to disk. And we passed the path that we'd like the file written to to the test method. And in this case we're saying that we want the generated JavaScript file, app.js, to be saved in the js build directory. So a similar pattern as the generated CSS file that we compiled from SASS in the last lesson. Great, okay, so let's get the source map generation set up now as well. So we need to do this in the same way that we did before. We need to initialize the source maps before starting the compilation. Then we need to write the source map before the final output files are written to disk. And again we can just write the source maps to the same directory that the JavaScript files will get written to. With some of our other tasks we were able to use a separate configuration file. Rather than placing all of the configuration into the Gulp task. And this can help keep tasks nice and small if there's a lot of configuration. TypeScript supports configuration via a tsconfig.json file. And although we're only using a single configuration property, let's set this up so we can see how it's done. So first of all let's create a tsconfig.json file. And we can put that with our other configuration files in the config directory. We need to make a few changes to our code now because we've used a configuration file with the Gulp TypeScript package. So instead of just piping some files to the package, we need to create a project. So we can create a TypeScript project using the create project method of the TypeScript module. And we need to tell our project where the configuration file that we've just created is. We do that by passing the path to the configuration file to the Create project method. So this needs to be added outside of the fat arrow function. So next we can create a results object. So the tsResult object is going to need the TypeScript source files. So let's move the gulp.src method up where this results object gets created. And at this point, we also need to initialize the source maps. And now we need to invoke the TS project that we just created. So back in the fat-arrow function now, we need to change how we're using that. And we need to use the tsResult objects that we've just created and that object will have a JS method and that has its own pipe method. So the JS method of the TS results object has its own pipe method. So we can then pipe the results of that to the source maps module. And we can then write the destination files as we were doing before. And it's complaining that something is missing but looks like I've lost closing parentheses from here somehow. Okay, great, so let's run the Gulp TypeScript task now. And we should find that there's now a generated JavaScript file in the built folder inside the js folder. And as you can see we have our generated app.js and map file. This has been compiled from TypeScripts into regular JavaScript. So now everything's hooked up and working as we want. Let's take a moment to look at what happens when there are errors in our TypeScript. So let's go back to the TS file now. And when we create the instance of our new person. Let's just change the second parameter so that it's not a string which it should be. And let's change it to some other value like, I don't know, Boolean. So now let's try running the task once again. And this time we see an error and it tells us that the argument of type Boolean is not assignable to the parameter of type String. So this is great. This is really the purpose of TypeScript after all, to provide these kinds of warnings when we don't use the code correctly. And it's nice that this just works out of the box without any special configuration or anything. The whole process doesn't end, the JavaScript won't get generated. But if there are other tasks that we want to run after this one those tasks should still run because the error is being handled. So let's just fix that quickly again. I put that back to how it was and let's close the generated file. And now that we have our clean task, we can update that so that it cleans the JS build directory as well as the CSS one. So we just need to change this first argument into an array and now we can add the path to the JS built. Let's just run the clean task again to check that it's working. Perfect, so, in this lesson we saw how to install and configure TypeScript. And add a new task to compile TypeScript down into JavaScript. We saw how to make use of a tsconfig.json configuration file, and how to generate sourcemaps as part of the compilation. In the next lesson, we'll move on to look at concatenation and minification of our built files. Thanks for watching.

Back to the top