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/.

comments powered by Disqus

Featured

  • Telerik UI for Blazor Updated

    Progress announced an update to its Telerik UI for Blazor components, targeting Microsoft's open source Blazor framework that lets C# coders create web apps without having to rely upon JavaScript.

  • Infragistics Unveils UI Components for Blazor

    Infragistics, specializing in third-party UI/UX controls and tools, unveiled a new offering targeting Blazor, Microsoft's red-hot open source framework that allows for C#-based web development instead of traditional mainstay JavaScript.

  • AWS Open Sources Tool for Porting .NET Framework Apps to .NET Core

    Leading cloud computing platform Amazon Web Services open sourced the it announced in July for helping users port old .NET Framework applications to the new .NET Core framework.

  • Uno Platform Ports Windows Calculator to Linux

    Uno Platform has ported the famed Windows Calculator, open sourced last year, to Linux as part of a continuing "proof point" effort to demonstrate the reach of what it describes as the sole UI offering available to target Windows, WebAssembly, iOS, macOS, Android and Linux with single-codebase applications coded in C# and XAML.

  • ASP.NET Core OData 8 Preview Supports .NET 5, but with Breaking Changes

    ASP.NET Core OData, which debuted in July 2018, is out in a v8.0 preview that for the first time supports the upcoming .NET 5 milestone release.

Upcoming Events