Contents tagged with TypeScript

  • Creating a TypeScript Workflow with Gulp

    TypeScript provides a lot of great functionality that lets you leverage many of the features available in ES6 today but how do you get started using it in your favorite editor? If you’re using Visual Studio or WebStorm then TypeScript support can be used directly and everything happens magically without much work on your part. But, if you’re using Sublime Text, Brackets, Atom, or another editor you’ll have to find a plugin to compile .ts files to JavaScript or create your own custom workflow.

    While several plugins exist to compile TypeScript and even provide code help as you’re writing TypeScript code in different editors, I generally prefer to use my own custom workflow. There are multiple benefits associated with going with this approach including the ability to standardize and share tasks across team members as well as being able to tie the workflow into a custom build process used in continuous integration scenarios. In this post I’ll walk through the process of creating a custom TypeScript workflow using Gulp (a JavaScript task manager). It’s a workflow setup that my friend Andrew Connell and I created when we recently converted an application to TypeScript. Throughout the post you’ll learn how to setup a file named gulpfile.js to compile TypeScript to JavaScript and also see how you can “lint” your TypeScript code to make sure it’s as clean and tidy as possible.

    Getting Started Creating a Custom TypeScript Workflow

    I talked about using Gulp to automate the process of transpiling ES6 to ES5 in a previous post. The general process shown there is going to be used here as well although I’ll be providing additional details related to TypeScript. If you’re new to Gulp, it’s a JavaScript task manager that can be used to compile .ts files to .js files, lint your TypeScript, minify and concatenate scripts, and much more. You can find additional details at

    Here’s a step-by-step walk-through that shows how to get started creating a TypeScript workflow with Gulp. Although there are several steps to perform, it’s a one-time setup that can be re-used across projects. If you’d prefer to use a starter project rather than walking through the steps that are provided in this post then see the project at or download the project associated with the exact steps shown in this post here.

    Creating the Application Folders and Files

    1. Create a new folder where your project code will live. You can name it anything you’d like but I’ll call it typescriptDemo in this post.
    2. Create the following folders inside of typescriptDemo:
      • src
      • src/app
      • src/js

    3. Open a command-prompt in the root of the typescriptDemo folder and run the following npm command (you’ll need to have Node.js installed) to create a file named package.json.

    4. npm init

    5. Answer the questions that are asked. For this example you can go with all of the defaults it provides. After completing the wizard a new file named package.json will be added to the root of the folder.
    6. Create the following files in the typescriptDemo folder:
      • gulpfile.js
      • gulpfile.config.js
      • tslint.json

    Installing Gulp, Gulp Modules and TSDimage

    1. Now let’s get Gulp installed globally on your machine. Open a command-prompt and run the following command:

    2. npm install gulp –g

    3. Open package.json and add the following devDependencies property into it. The location of the property in the file doesn’t really matter but I normally put it at the bottom. A sample package.json file with the dependencies already in it can be found at

      Note: The module versions shown here will certainly change over time. You can visit to find the latest version of a given module.
    4. "devDependencies": { 
          "gulp": "^3.8.11", 
          "gulp-debug": "^2.0.1", 
          "gulp-inject": "^1.2.0", 
          "gulp-sourcemaps": "^1.5.1", 
          "gulp-tslint": "^1.4.4", 
          "gulp-typescript": "^2.5.0", 
          "gulp-rimraf": "^0.1.1" 

    5. Ensure that your command window path is at the root of the typescriptDemo folder and run the following command to install the dependencies:

      npm install

    6. The site provides a Node.js module named tsd that can be used to install TypeScript type definition files that are used to provide enhanced code help in various editors. Install the tsd module globally by running the following command:

      npm install tsd@next -g

    7. Run the following command:

      tsd init

    8. Open the tsd.json file that is generated in the root of typescriptDemo and change the following properties to include “tools” in the path as shown next:

      "path": "tools/typings",
      "bundle": "tools/typings/tsd.d.ts"

    9. Let’s use tsd to install a TypeScript definition file for Angular (an angular.d.ts file) and update the tsd.json file with the Angular file details as well. Run the following command:

    10. tsd install angular --save

      Note: You can install additional type definition files for other JavaScript libraries/frameworks by running the same command but changing the name from “angular” to the appropriate library/framework. See for a list of the type definition files that are available.

  • Getting Started with TypeScript – Classes, Types and Interfaces

    One of the big announcements at ng-conf this week was the collaborative work that the Angular and TypeScript teams have been doing. Angular 2 will leverage TypeScript heavily and you can as well in any type of JavaScript application (client-side or even server-side with Node.js). You can also use ES6 or ES5 with Angular 2 if you decide that TypeScript isn't for you. Andrew Connell and I gave a talk on TypeScript at ng-conf that you can view here if interested:

  • TypeScript Fundamentals Course Released on

    Over the past few months I’ve have been digging into TypeScript and learning the ins and outs of the language. If you’re new to TypeScript, it’s a language that provides a way to write modular code that includes support for types (string, number, bool, etc.) and compiles down to JavaScript. It’s definitely interesting especially if you’d like to catch issues upfront rather than after the fact. For more information on TypeScript check out my Getting Started with TypeScript – Classes, Static Types and Interfaces post.

  • What's Hot in the World of JavaScript and SPAs?

    Client-side development continues to be more and more popular which is both good and bad for developers. It's good (great!) because we have more power than ever at our fingertips. It's bad because it can be challenging to stay up-to-speed with all of the libraries and frameworks being released (I call that job security). I hear some developers complaining about Web development and all of the script libraries being released but I personally think it provides us with a lot of choice and flexibility, not to mention enhanced productivity. I’d rather have the flexibility of choosing from a variety of scripts as opposed to only a handful.

  • The Role of Interfaces in TypeScript

    In my last post I talked about how classes and interfaces could be extended in the TypeScript language. By using TypeScript’s extends keyword you can easily create derived classes that inherit functionality from a base class. You can also use the extends keyword to extend existing interfaces and create new ones. In the previous post I showed an example of an ITruckOptions interface that extends IAutoOptions. An example of the interfaces is shown next:

  • Extending Classes and Interfaces using TypeScript

    imageIn a previous post I discussed the fundamentals of the TypeScript language and how it can be used to build JavaScript applications. John Papa has also started a nice series of posts on the subject that go along with the new TypeScript Fundamentals course that he and I co-authored for Pluralsight. TypeScript is all about strongly-typed variables and function parameters, encapsulation of code, and catching issues upfront as opposed to after the fact to provide more maintainable code bases. One of the great features it offers is the ability to take advantage of inheritance without having to be an expert in JavaScript prototypes, constructors, and other language features (although I certainly recommend learning about those features regardless if you use TypeScript or not).

comments powered by Disqus