TypeScript Classes

Welcome to this tutorial covering the basics of TypeScript Classes. In this series we’ll walk through classes and the accompanying concepts, and show how they are used in TypeScript.

TypeScript Classes Part I – A New Hope (For structured JavaScript)

  1. Classes
  2. Constructors
  3. Scope Modifiers
  4. Parameter Shorthand

TypeScript Classes Part II – C# Strikes Back

  1. Accessors
  2. Static Properties

TypeScript Classes Part III – Return of the Object Hierarchy

  1. Inheritance
  2. Interfaces
  3. Abstract Classes

TypeScript Classes Tutorial for Beginners How-To Constructor Scope Modifier Parameter Shorthand

Disclaimer

This post was written using Visual Studio Code, using TypeScript v1.6.2 and gulp-typescript v2.9.2. The project was setup to be compiled with gulp. If you want to replicate this setup. just download the code from my GitHub repository, link is at the end of the post. If you want to read more about how to setup a TypeScript project in VS Code using ASP.Net 5, read this post.

Developing using TypeScript

Before we start, just a quick tip if you are new to TypeScript and need help getting started. I recommend either using Visual Studio Code or Visual Studio Community Edition. Both are free and excellent development tools. Which one you should select depends on your preferences. VS Code is more of an editor, fast and light weight, but it won’t really hold your hand during learning.
Download Visual Studio Code.

Visual Studio is a full fledged IDE, it has pretty much everything you need to develop web, Windows applications, apps, etc. And if the functionality isn’t available out of the box, there’s a great extensibility API, enabling loads of excellent third party extensions that are often free and available for download.
Download Visual Studio Community Edition.

TypeScript Classes

In the OO paradigm, Classes are used to encapsulate an object’s state and functionality. The state is declared as properties and the functionality as methods.
Let’s start with some code and see how a simple class is defined.

class SimpleDroid {
	private expression: string = "Bee-BEEP!";

	public speak(): string {
		return this.expression;
	}
}

Here we see that a class is always declared starting with the class keyword, followed by a name and then the body of the class.
On the second row a private member is declared representing state of the class.
On the fourth row a method is declared representing functionality of the class.

The resulting JavaScript after transpilation results in a closure that encapsulates the private and exposes the public members. Let’s have a look at what our code transpiled to as ES5 code:

var SimpleDroid = (function () {
    function SimpleDroid() {
        this.expression = "Bee-BEEP!";
    }
    SimpleDroid.prototype.speak = function () {
        return this.expression;
    };
    return SimpleDroid;
})();

Constructors

Setting an objects initial state is done with a constructor. The constructor is a method that’s executed every time an object is created from a class using the new keyword. Let’s look at a simple constructor:

class LessSimpleDroid {
	private expression: string = "";

	constructor(expression: string){
		this.expression = expression;
	}

	public speak(): string {
		return this.expression;
	}
}

Here is an example of a constructor taking a variable and using this to initialize the private member _expression. Constructors can not only set parameter, but contain logic and execute methods. This is the resulting JavaScript of the LessSimpleDroid class.

var LessSimpleDroid = (function () {
    function LessSimpleDroid(expression) {
        this.expression = "";
        this.expression = expression;
    }
    LessSimpleDroid.prototype.speak = function () {
        return this.expression;
    };
    return LessSimpleDroid;
})();

If you do not implement a constructor, there is still an empty constructor created for every class. If we look at the transpiled JavaScript for both SimpleDroid and LessSimpleDroid, we see that the function with the name of the class initializes both initial state as well as sets any parameters entered into the constructor.

Scope Modifiers

All members declared without a scope modifier is assumed public and thus accessible on any instantiated object. If you wish to keep members accessible only form within an object, use the private modifier.

When comparing two types that has private members, they will only be evaluated as compatible if their private state originates from the same declaration. This is important to remember as it might throw you for a loop the first time you need to compare classes.

Parameter Shorthand

When declaring the constructor, it’s possible to use a shorthand for creating parameters. This means that any parameters declared as an input parameter in the constructor will also be instantiated on the object, without having to be declared on the type. Let’s see an example where we use a few input parameters and see how it works.

class ForceUser {
	constructor(public midichlorianCount: number, private lightSaberColor: string, test: string) {
	}

	public toString(): string {
		return "ForceUser has " + this.midichlorianCount + " midichlorians and wields a " + this.lightSaberColor + " lightsaber";
	}
}

In example 3 we introduce three new parameters in the constructor signature. One public, one private and one without any access modifier set on it. This will make the transpiler create two parameter instances on the type – guess which!
If you guessed that the two parameters with access modifier would be created, you are right 🙂 The third parameter, “test”, won’t be instantiated on the object by the transpiler. Let’s see what the transpiled code looks like!

var ForceUser = (function () {
    function ForceUser(midichlorianCount, lightSaberColor, test) {
        this.midichlorianCount = midichlorianCount;
        this.lightSaberColor = lightSaberColor;
    }
    ForceUser.prototype.toString = function () {
        return "ForceUser has " + this.midichlorianCount + " midichlorians and wields a " + this.lightSaberColor + " lightsaber";
    };
    return ForceUser;
})();

LightSaber Color?

Looking at the ES5 transpiled code we see that both members, midichlorianCount and lightSaberColor, are exposed in exactly the same way. Let’s write some tests and see if we can access both the members when instantiated.

var forceUserTest1 = (function() {
	var forceUser: ForceUser;
	forceUser = new ForceUser(10, "blue", "test");
	console.log(forceUser.toString());
})();

var forceUserTest2 = (function() {
	var forceUser: ForceUser;
	forceUser = new ForceUser(10, "blue", "test");
	console.log(forceUser.lightSaberColor);
})();

If we are using an editor with basic understanding of TypeScript, like Visual Studio or VS Code, there will be a squiggly on row 10. Since lightSaberColor is private, there will be a warning. But how does the editor know this? The JavaScript didn’t show any difference in code!
The reason is that the transpiler knows the type and isn’t looking at the JavaScript. If choosing to emit declaration files (d.ts) on build from the TypeScript transpiler, we see how the transpiler reasons about our type.

declare class ForceUser {
    midichlorianCount: number;
    private lightSaberColor;
    constructor(midichlorianCount: number, lightSaberColor: string, test: string);
    toString(): string;
}

So, the warning is just tooling helping us. Actually transpiling the code is still possible but gives an error:
[00:43:26] Using gulpfile C:\Source\Repos\TypeScript_Classes\gulpfile.js
[00:43:26] Starting 'ts-compile'...
[00:43:26] Finished 'ts-compile' after 7.51 ms
TypeScript\ForceUser.ts(19,14): error TS2341: Property 'lightSaberColor' is private and only accessible within class 'ForceUser'.
[00:43:27] TypeScript: 1 semantic error
[00:43:27] TypeScript: emit succeeded (with errors)

This is something to be aware of, it’s not a big issue when developing smaller applications, but when you got big solutions containing several modules being built it’s very easy that a build error “slips by” during the build.

Get The Code!

All the code from this post is available on my GitHub account in the repository called: TypeScript_Classes. The code was tested in Microsoft Edge.

More TypeScript projects

Tutorial on TypeScript functions: TypeScript Functions

Setting up an Aurelia project in Visual Studio Code with TypeScript: Aurelia and TypeScript from VS Code

Tutorial for setting up a TypeScript – MVC 6 app in VS2015: Getting started: TypeScript 1.5 in Visual Studio 2015

Tutorial for setting uo a TypeScript – MVC 6 app in VS Code: Getting started: TypeScript 1.5 in Visual Studio Code

If you are interested in a more advanced setup of a TypeScript – MVC 6 app that uses RequireJS in VS2015, check out this post: Setting up a TypeScript – RequireJS – Gulp – MVC 6 Web Project in Visual Studio 2015 RC

Happy coding! 🙂

TypeScript Classes
Tagged on:                     

5 thoughts on “TypeScript Classes

Leave a Reply

Your email address will not be published. Required fields are marked *