Tim Cooke

Exercises for Programmers (TypeScript): 1 of 57 - Saying Hello

8th November 2020

My team are working a lot in TypeScript and I know nothing about it, so I've chosen this book by Brian P. Hogan as a way to learn. Exercises for Programmers: 57 Challenges to Develop Your Coding Skills.

Create a program that prompts for your name and prints a greeting using your name.

Example Output

What is your name? Brian
Hello, Brian, nice to meet you!

Oh boy, where do I start? This is TypeScript, which is a superset of JavaScript, so why not have it run on this browser, wouldn't that be fun! I'm going to need some way of getting user input, some way of indicating that I've finished user input, and some way of displaying output. That very much sounds like a form, so I'd better brush off my HTML skills.

Output:

If you've tried out the form already you'll have noticed that I've skipped to the end. Let's recap and see how I got there.

First I had to install the TypeScript compiler

$ sudo npm install -g typescript

Handily I already had node installed, but can be gotten from nodejs.org if not.

Unlike JavaScript, TypeScript is a compiled language which really takes a lot of the guesswork out of writing JS code since any syntax errors can be identified up front at compile time rather than at run time which is typical when working with JS. Even if you simply wrote JavaScript and used the TypeScript compiler for syntax validation there's value in that. For this exercise, this is the TypeScript code:

const form = document.getElementById("greeting");

form.addEventListener("submit", function ( event ) {
    event.preventDefault();
    var nameInput = document.getElementById("name") as HTMLInputElement
    var person = new Person(nameInput.value);
            
    var outputSpan = document.getElementById("output") as HTMLSpanElement
    outputSpan.innerText = generateGreeting(person)
})
            
function generateGreeting(person: Person) {
    return "Hello, " + person.name + ", nice to meet you!"
}
            
class Person {
    constructor(public name: string) {
    }
}

Which compiles with

$ tsc greeting.ts

creating file greeting.js that contains

var form = document.getElementById("greeting");
form.addEventListener("submit", function (event) {
    event.preventDefault();
    var nameInput = document.getElementById("name");
    var person = new Person(nameInput.value);
    var outputSpan = document.getElementById("output");
    outputSpan.innerText = generateGreeting(person);
});
function generateGreeting(person) {
    return "Hello, " + person.name + ", nice to meet you!";
}
var Person = /** @class */ (function () {
    function Person(name) {
        this.name = name;
    }
    return Person;
}());

That was pretty interesting being able to use the class construct to create custom types which is familiar to me coming from Java. It was also really useful to be able to cast/coerce the DOM element that would be fairly generic in JS into a HTMLInputElement which then gave my IDE guidance on what functions are available for it and compile time validation that those functions are valid. In comparison to vanilla JS that's a big advantage.

For this example I wrote a single .ts file and compiled it to a .js file and my initial research determined that in order to set up unit tests for TypeScript code it would need a bit more of a convoluted setup, so I'll keep that in mind for the next example.

Learning review

Source Code

greeting.ts