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.
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.
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.
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).
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...",
"test": "echo \"Error: no test specified\" && exit 1"
"author": "...your name...",
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:
- 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
- Start PowerShell
- In PowerShell, type cd, a space, and then use <Control>_V to paste my copied folder path
- Press the Enter key to make my project folder the current folder
- To make sure I have the latest version of NPM I then type
As a point of interest, as I was working through these steps I discovered a new version was available.
- To initialize my project I then type
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.
Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His blog posts on user experience design can be found at http://blog.learningtree.com/tag/ui/.