The Practical Client
Build Your First TypeScript Application (2018)
Here's what a real-world "Hello, World" TypeScript application looks like (beginning with a discussion of whether you need TypeScript at all).
In this column, I'm going to look at what a modern "Hello, World" equivalent of a TypeScript application looks like. For my case study, I have a page where the user chooses an entry from a dropdown list, the code retrieves the related object from the server, and then updates the page with the returned data (if you want to configure Visual Studio to support your project, read my previous column for that topic).
Setting Up the Page
The first step in using TypeScript is to add a TypeScript file to your project's Scripts folder. In a real application I'd probably nest the file in a subfolder, but for this example I'll add my TypeScript file directly to my project's Scripts folder.
Once that empty file is added, I open the View (or WebForms or HTML page) where I want to use the code in the file, click on my TypeScript file in Solution Explorer and then drag and drop the file near the top of my page. Depending on the version of Visual Studio I'll either get a <script> element that references my .ts file (in which case, change the filetype to .js) or a <script> element with a file type automatically changed to reference the .js file my TypeScript is compiled into. Since my case study is going to use jQuery (as any modern application does), I also add a reference to that file also using the same technique.
After using a <select> element to generate my dropdown list and inserting some <input> elements to display my customer data, the top of the HTML page that's going to be delivered to the browser is going to look something like this:
<!DOCTYPE html>
<html>>
<head>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/GetCustomer.js"></script>
</head>
<body>>
<<h2>Display Customer</h2>
<select id="CustomerSelect">
<option value="N/A">Pick a customer</option>
<option value="A123">Peter Vogel</option>
<option value="B456">Jan Vogel</option>
</select>
<p>
Id: <div id="Id" /> <br/>
Name: <input type="text" id="Name" />
...more input tags to hold customer information...
Writing TypeScript
The first thing I'll want to do in my TypeScript code is wire up a function to the change event of the CustomerSelect dropdown list during the page's ready event. Leveraging jQuery, that code looks pretty much the same in TypeScript as it does in JavaScript:
$(
function () {
$("#CustomerSelect").change(getCustomer);
}
);
While the code looks the same, the experience of writing that code will, however, be very different from doing it in JavaScript: I'll get lots of IntelliSense support. More importantly, I'll get lots of
relevant IntelliSense support. The IntelliSense list for a jQuery selector like ("#CustomerSelect") is very different from the IntelliSense list for a string or the IntelliSense list for a number (the list for a number has only a half-dozen items on it). Because TypeScript is datatyped, IntelliSense can take that information into account when generating support.
The start of the getCustomer method (where I'll retrieve the current value of the CustomerSelect dropdown list) can look very different from the JavaScript version. My getCustomer method will be passed a jQuery.Event object as a parameter that I can choose to accept. If I do accept that Event object, I'll cast its currentTarget property to the HTMLSelectElement object that represents my dropdown list. Once I've done that, I can retrieve the value for the currently selected item from the HTMLSelectElement's value property:
function getCustomer(evt: JQuery.Event) {
let sec: HTMLSelectElement;
sec = <HTMLSelectElement>evt.currentTarget;
let custId: string;
custId = sec.value;
Again, because TypeScript knows the datatype of each object I'm working with, I'll get IntelliSense guidance through the whole process. And, if I try to write something stupid, TypeScript will give me a relevant message and will refuse to compile (let alone run) my mistaken code.
Enabling Ajax
I'm now ready to write the Ajax call to the Web Service that will supply my Customer object. To catch the data returned from the server, I'll define a Customer object whose properties match those of the server-side object (I might event use a tool like TypeScriptSyntaxPaste to generate my TypeScript class from the original C# class):
class Customer {
Id: string
Name: string
...additional properties...
}
Now that I can retrieve the selected CustomerId from my dropdown list and hold the corresponding Customer object returned from the server, I'll marry the two together with an Ajax call using jQuery's getJSON method.
However, rather than pass a method name or a function as the success parameter for the getJSON method, I'll use a TypeScript arrow expression (something like a .NET lambda expression). I know that the server will pass my arrow expression a Customer object, so I'll declare my arrow expression's parameter accordingly. In the body of my expression, I'll move the data from my object and into my page:
$.getJSON("api/Customers/",
{ id: sec.value },
(cust: Customer) => {
$("#Name").val(cust.Name)
$("#Id").text(cust.Id)
...more data to the page...
});
There's a great deal more to do with this page, of course (and to say about TypeScript). But there's a modern "Hello, World" application and, potentially, the start of your migration from JavaScript to TypeScript.
About the Author
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/.