PLAY: Typescript

CORE KNOWLEDGE

When working with Protractor projects, it’s common for them to be written in TypeScript as this is the language that the Angular framework supports. It’s worth knowing the differences, however as TypeScript is compiled to JavaScript and Protractor accepts either, it’s not essential.

Ultimately, TypeScript differs from JavaScript in two key areas:

TypeScript is strongly typed

This means that when you intend to pass a variable through to a function, you should state what type of variable will be passed through (e.g. a String, function, integer or an Object).

TypeScript is an object-oriented language

While JavaScript is a functional language, TypeScript relies on Objects.

You can find a more detailed comparison here:

https://www.educba.com/typescript-vs-javascript/

And we’ve included a 5 minute tutorial below.

You can convert your Protractor tests to TypeScript by following one of the examples in the Protractor GitHub repository:

https://github.com/angular/protractor/tree/5.4.1/exampleTypescript

TypeScript in 5 minutes

Let’s get started by building a simple web application with TypeScript.

Installing TypeScript

TypeScript is installed through npm.

1. Create a new project in GitHub called play-with-typescript and clone it onto your computer.

2. Then run the following command in your terminal:

   npm install -g typescript

Now let’s create a TypeScript file.

1. In your project, create a new file called greeter.ts. Then add the following code to the file:

   greeter.ts

   function greeter(person) {
       return "Hello, " + person;
   }
   
   let user = "Jane User";
   
   document.body.innerHTML = greeter(user);

Compiling your code

We used a .ts extension, but this code is just JavaScript. You could have copy/pasted this straight out of an existing JavaScript app.

1. In the Terminal, run the TypeScript compiler:

   tsc greeter.ts

The result will be a file greeter.js which contains the same JavaScript that you fed in. We’re up and running using TypeScript in our JavaScript app!

Now we can start taking advantage of some of the new tools TypeScript offers.

1. Add a : string type annotation to the ‘person’ function argument as shown here:

   greeter.ts

   function greeter(person: string) {
       return "Hello, " + person;
   }
   
   let user = "Jane User";
   
   document.body.innerHTML = greeter(user);

Type annotations

Type annotations in TypeScript are lightweight ways to record the intended contract of the function or variable. In this case, we intend the greeter function to be called with a single string parameter. We can try changing the call greeter to pass an array instead:

1. Change your user variable to an array:

   greeter.ts

   function greeter(person: string) {
       return "Hello, " + person;
   }
   
   // Change this variable to an array
   let user = [0, 1, 2];
   
   document.body.innerHTML = greeter(user);

2. Recompile using the tsc greeter.ts command in the terminal and see the following error:

   error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

Also try removing all the arguments to the greeter call. TypeScript will let you know that you have called this function with an unexpected number of parameters. In both cases, TypeScript can offer static analysis based on both the structure of your code, and the type annotations you provide.

Note	although there were errors, the greeter.js file is still created. You can use TypeScript even if there are errors in your code. But in this case, TypeScript is warning that your code will likely not run as expected.

Interfaces

Let’s develop our sample further. Here we use an interface that describes objects that have a firstName and lastName field. In TypeScript, two types are compatible if their internal structure is compatible. This allows us to implement an interface just by having the shape the interface requires, without an explicit implements clause.

1. Update your greeter.ts file with an interface and change your user so it has a firstName and a lastName then update your greeter function to use the interface:

   greeter.ts

   // Add this interface
   interface Person {
       firstName: string;
       lastName: string;
   }
   
   // Update this function to use the interface and new variable which is now a `Person` object
   function greeter(person: Person) {
       return "Hello, " + person.firstName + " " + person.lastName;
   }
   
   // Update our user variable to have firstName and lastName data
   let user = { firstName: "Jane", lastName: "User" };
   
   document.body.innerHTML = greeter(user);

Classes

Finally, let’s extend the example one last time with classes. TypeScript supports new features in JavaScript, like support for class-based object-oriented programming.

Here we’re going to create a Student class with a constructor and a few public fields. Notice that classes and interfaces play well together, letting the programmer decide on the right level of abstraction.

Also of note, the use of public on arguments to the constructor is a shorthand that allows us to automatically create properties with that name.

1. Add a class to your greeter:

   greeter.ts

   // Add this class to your `greeter` code
   class Student {
       fullName: string;
       constructor(public firstName: string, public lastName: string) {
           this.fullName = firstName + " " + lastName;
       }
   }
   
   interface Person {
       firstName: string;
       lastName: string;
   }
   
   function greeter(person : Person) {
       return "Hello, " + person.firstName + " " + person.lastName;
   }
   
   // Now change our `user` so it becomes an object of our `Student` class
   let user = new Student("Jane", "User");
   
   document.body.innerHTML = greeter(user);

2. Recompile using the tsc greeter.ts command in the terminal and you’ll see the generated JavaScript is the same as the earlier code. Classes in TypeScript are just a shorthand for the same prototype-based OO that is frequently used in JavaScript.

Running your TypeScript web app

1. Create a greeter.html file in the root directory of your project and add the following code:

   greeter.html

   <!DOCTYPE html>
   <html>
       <head><title>TypeScript Greeter</title></head>
       <body>
           <script src="greeter.js"></script>
       </body>
   </html>

2. Right-click on the file and choose 'Open in Default Browser' to run your first simple TypeScript web application.