The Practical Client

Setting Up Your TypeScript Application – 2018 Version

If you're wondering how to start integrating TypeScript into your development practices, here's both when to do it and how to do it.

• By Peter Vogel
• 04/10/2018

As TypeScript and its Visual Studio ecosystem continues to evolve, it's worthwhile to revisit what "getting started" with TypeScript looks like. But it's equally important to decide if TypeScript makes sense for you.

The 'When'
For example, if you prefer to keep your client-side code in the same files as your HTML, then you can't use TypeScript. You must put your TypeScript code in *.ts files which are then compiled into the *.js files that your application uses.

If your client-side code consists of a few standalone functions that pull data from elements on the page and use that to update/modify other elements on the page then you probably don't need to use TypeScript. The type checking and additional compiler support probably aren't all that useful to you. There's a cost associated with learning a new technology that you don't want to incur unless there's a real-world payoff in improved productivity or reduction in errors.

On the other hand, if you're working with Angular then you probably have to work with TypeScript. It's not so much that Angular demands but that all the "examples and samples" available for Angular developers seem to be in TypeScript.

Which actually leads to another key point: If you're not working with Angular but are working with a set of JavaScript libraries (other than the ubiquitous jQuery library) then moving to TypeScript is going to make it harder to find "examples and samples." I've written about how to use TypeScript with the Knockout, Breeze, Backbone and React, but I'd be lying to you if I suggested that there's as much support on Stack Overflow for TypeScript as there is for JavaScript for any library.

However, if you're working on a team that shares client-side code, if you're looking to build some reusable libraries for your projects, and if you're writing a lot of complex client-side code ... well, in that case you probably need TypeScript. TypeScript will give you access to all the things you like about JavaScript while adding in better IntelliSense support and better compile time checking of your code. Those two features not only make your code better they facilitate integration between your code and code from other teammates.

Getting Started with TypeScript
If you do decide to start using TypeScript, you'll need to get Visual Studio to support it. TypeScript comes with the latest versions of Visual Studio, but the TypeScript team is always putting out new versions. So, as with Entity Framework, it probably makes sense to download the latest version. As I was writing this column, TypeScript 2.8 came out so I downloaded it for reference.

You also need to add support for TypeScript to your project. To use TypeScript you will, of course, need some Visual Studio Web project (I'll assume an ASP.NET MVC project, but it doesn't make any difference). I'll also assume that you'll be using jQuery in your client-side code and that you'll be using the latest version of that (I'm using 3.3.1, but, again, it doesn't make any difference).

What does make a difference is getting the type description files for whatever version of the JavaScript libraries you're using (these type description files support TypeScript's type checking and IntelliSense support when working with JavaScript code).

Integrating NPM
Lately, I've found using NuGet Package Management console is the easiest way to do this (which is unusual because my preference is for GUIs over command-line tools). To use NPM with your project you need to add a package.json file to your project. Here's a typical example:

{
  "name": "...project name...",
  "version": "...project version...",
  "description": "...some description...",
  "main": "...startup JavaScript file...",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "...your name...",
  "license": "ISC"
}

However, it's probably safer (though more awkward) to use NPM's init command to set up this file -- among other benefits, doing it this way will allow you to buy into any further setup that NPM needs.

You can't run NPM's init command from within Visual Studio, though, so you have to use PowerShell. Here's what I do:

1. In Visual Studio, I select my Project in Solution Explorer then, in the Properties List, double click on the Project Folder property and copy the folder path


2. Start PowerShell


3. In PowerShell, type cd, a space, and then use <Control>_V to paste my copied folder path


4. Press the Enter key to make my project folder the current folder


5. To make sure I have the latest version of NPM I then type

   npm install

   As a point of interest, as I was working through these steps I discovered a new version was available.


6. To initialize my project I then type

   npm init

   I then have to answer some questions (mostly by hitting the Enter key)

Now you're ready to leverage NPM to get any type description files you need -- jQuery, for example. Fortunately, you can get the relevant type description files from within Visual Studio.

After returning to Visual Studio, open the NPM console by selecting Tools | NuGet Package Manager | Package Manager Console. When the Package Manager Console window opens, type this in the window to get the jQuery type descriptions (it's case sensitive so resist the urge to uppercase the q in jquery):

npm install @types/jquery

Don't panic at the red error messages you get -- they're reporting the absence of some optional fields in the typing package. As long as your output finishes with some version of this, you're cool:

+ @types/[email protected]
added 1 package from 21 contributors in 2.122s

OK: You're ready to start writing TypeScript code. I'll walk through what "your first TypeScript application" looks like in my next column.