Object Oriented Programming with TypeScript Tutorial (JavaScript OOP)
Posted by robert | Filed under TypeScript
Update: New and better Boilerplate that uses ES6 Modules in TypeScript check it out.
I was excited when I heard about TypeScript because I love typed variables, interfaces, calling super in your methods and extending classes without all the mess of JavaScript’s native prototype. I know there is a lot of haters already of TypeScript and I haven’t made up my mind yet if TypeScript is awesome or not. Right now I am just playing around and wanted to share. If you don’t have TypeScript installed and you are using a mac. You can check out how I did it: Installing TypeScript on a Mac
One cool thing about TypeScript compiler is how you can import other classes that are required by using <reference path/>. This is done by: ///<reference path=’path/to/Class.ts’/> . TypeScript’s compiler will concatenate the files into one file and remove all comments.
This is not a tutorial but more of an example on how to setup some classes in TypeScript. Below is our Main class that makes use of our Car and Truck class. I am not going to go into details about each class. You can download the classes and folder structure below.
///<reference path='components/vehicles/Car.ts'/>
///<reference path='components/vehicles/Truck.ts'/>
class Main {
private _compact:Car;
private _pickup:Truck;
constructor()
{
this._compact = new Car(21, 18);
this._compact.changeGear();
this._compact.useAccessory();
this._pickup = new Truck(16, 23);
this._pickup.changeGear();
this._pickup.useAccessory();
this._compact.soundSystem.turnOn();
this._compact.soundSystem.playSelection(2);
this._pickup.soundSystem.turnOn();
this._compact.drive();
this._pickup.drive();
}
}
Here we have our Car class and below that we have the Truck class they both extends the Vehicle class. Take note of the Tire class where we pass in an Static property that is located in the TireType class. Also look at “this.soundSystem”. This property accepts a interface class called IAudible which CDPlayer implements.
///<reference path='Vehicle.ts'/>
///<reference path='../accessories/Tire.ts'/>
///<reference path='../../constants/TireType.ts'/>
///<reference path='../accessories/soundsystems/CDPlayer.ts'/>
class Car extends Vehicle {
private _tires:Tire;
constructor(mpg:number, fuel:number)
{
super(mpg, fuel);
this.name = "Car";
this._tires = new Tire(TireType.HIGH_PERFORMANCE);
this.soundSystem = new CDPlayer();
console.log(this.name, "has", this._tires.getType(), "tires");
}
public useAccessory():void
{
this.openSunroof();
}
private openSunroof():void
{
console.log(this.name, "opened sunroof");
}
}
Our Truck class is similar to our Car class but take note of the “this.soundSystem” property where a Radio class is used. The Radio class also implements the IAudible interface.
///<reference path='Vehicle.ts'/>
///<reference path='../accessories/Tire.ts'/>
///<reference path='../../constants/TireType.ts'/>
///<reference path='../accessories/soundsystems/Radio.ts'/>
class Truck extends Vehicle {
private _tires:Tire;
constructor(mpg:number, fuel:number)
{
super(mpg, fuel);
this.name = "Truck";
this._tires = new Tire(TireType.SNOW);
this.soundSystem = new Radio();
console.log(this.name, "has", this._tires.getType(), "tires");
}
public useAccessory():void
{
super.useAccessory();
this.lowerTailgate();
}
private lowerTailgate():void
{
console.log(this.name, "lowered tailgate");
}
}
The TireType is simple class that has static constants. I like using classes like this in my applications because it is easy to know what types are available to you. These classes are very useful when you have an IDE that has code intelligence.
class TireType {
static SNOW:string = "snow";
static HIGH_PERFORMANCE:string = "highPerformance";
static ECONOMICAL:string = "economical";
}
The Tire class just sets the type description from what was passed into the constructor.
///<reference path='../../constants/TireType.ts'/>
class Tire {
private _type:string;
constructor(tire:string)
{
switch (tire) {
case TireType.SNOW :
this._type = "storm-ready snow";
break;
case TireType.HIGH_PERFORMANCE :
this._type = "high-performance radial";
break;
case TireType.ECONOMICAL :
default :
this._type = "economical bias-ply";
}
}
public getType():string
{
return this._type;
}
public setType(tire:string):void
{
this._type = tire;
}
}
The Vehicle class is the base class for the Car and Truck class. I love how you can set default value right in the function parameter. In this case we have default values in our constructor.
///<reference path='../../interfaces/IAudible.ts'/>
class Vehicle {
private _gasMileage:number;
private _fuelAvailable:number;
private _milesTraveled:number;
private _moving:boolean = false;
public name:string;
public soundSystem:IAudible;
constructor(mpg:number=21, fuel:number=18.5)
{
this._gasMileage = mpg;
this._fuelAvailable = fuel;
this._milesTraveled = 0;
}
public useAccessory():void
{
console.log(this.name, "turned on lights");
}
public changeGear():void
{
console.log(this.name, "changed gear");
}
public drive():void
{
this._fuelAvailable--;
this._milesTraveled += this._gasMileage;
if (this._fuelAvailable > 0) {
this.drive();
} else {
console.log("The", this.name, "has a gas mileage of", this._gasMileage, "and traveled", this._milesTraveled, "miles.");
}
}
public getGasMileage():number
{
return this._gasMileage;
}
public setGasMileage(mpg:number):void
{
this._gasMileage = mpg;
}
public getFuelAvailable():number
{
return this._fuelAvailable;
}
public setFuelAvailable(fuel:number):void
{
this._fuelAvailable = fuel;
}
public getMilesTraveled():number
{
return this._milesTraveled;
}
}
The IAudible interface class allows us to swap in a CDPlayer or Radio class to our vehicles and the vehicle class knows what methods and properties are available. We could easly add a TapeDeck or an EightTrackPlayer and we would only have to change one line in our code.
interface IAudible
{
isPlaying:boolean;
turnOn():void;
playSelection(preset:number):void;
turnOff():void;
}
The CDPlayer implements the IAudible interface class.
///<reference path='../../../interfaces/IAudible.ts'/>
class CDPlayer implements IAudible {
public isPlaying:boolean;
constructor()
{
this.isPlaying = false;
}
public turnOn():void
{
console.log("cd player on");
this.isPlaying = true;
}
public playSelection(preset:number):void
{
console.log("cd player selection play: track", preset);
}
public turnOff():void
{
console.log("cd player off");
this.isPlaying = false;
}
public eject():void
{
console.log("cd player eject");
}
}
The Radio implements the IAudible interface class.
///<reference path='../../../interfaces/IAudible.ts'/>
class Radio implements IAudible {
public isPlaying:boolean;
constructor()
{
this.isPlaying = false;
}
public turnOn():void
{
console.log("radio on");
this.isPlaying = false;
}
public playSelection(preset:number):void
{
console.log("radio selection play: channel preset", preset);
}
public turnOff():void
{
console.log("radio off");
this.isPlaying = false;
}
}
To compile all the classes into one file I use a terminal command on the mac. Here is the command:
tsc Main.ts -out ../bin/main.js
That will save a javascript file called main.js into a folder called bin one directory up from the Main.ts file.
One thing I don’t like about TypeScript is the lowercase types (string, number, boolean, etc.) I would prefer them to be uppercase(String, Number, Boolean, etc.) because they do represent Classes. Since Microsoft developed it, I guess they wanted to add some of there C Sharp syntax.
Also if you like this tutorial please provide a link back to this page or my site.
Hello, my name is Robert and I am an interactive developer at
October 10, 2012 at 10:12 am
WOW!! This was SUPER helpful!!
Thank you so much!
November 7, 2012 at 11:49 am
Thank you so much for this detailed sample. This is exactly what I was look for.
December 18, 2012 at 5:01 am
I don’t get what are the main differences between java and type script .
need some information regarding to the working of type script and
what are the key features of type script
how it works
Mainly how it reduces the CODE
December 18, 2012 at 7:42 am
The main difference I see is how easy it is to create classes that can extend other classes. Then you are just writing JavaScript after that.
class Truck extends Vehicle {
//Now write normal JavaScript
}
You also don’t have to type out prototype on all your class functions which makes you source code smaller and cleaner to read.
TypeScript is not a new language it just adds some conventions to JavaScript like how to create a class and the ability to add types to your variables and functions. This will help in error checking and refactoring when you have an IDE that supports TypeScript.
You don’t need to use types such as (private, :number, :void, etc) but these will help with code completion with an IDE like WebStorm 6 or Visual Studio.
Download the example code and compare the typescript code to the outputted JavaScript code.
December 20, 2012 at 3:49 am
Thank you Robert ….
It help me a lot…
December 21, 2012 at 8:28 am
Can u provide me a a seminar report on Type script…
it can help me in my studies…
December 21, 2012 at 3:49 pm
Sorry I don’t have the time to do that.
April 30, 2013 at 6:52 am
This page is excellent. Everything I pump into google relating to my typescript woes comes back here like an old friend. Thanks Robert.
I have done almost what you have done, but used modules as package names.
module com.codebelt.robert
{
export class Vehicle extends FooBar()
}
This is causing me all kinds of problems. If I am reading this correctly, there is no need for modules in this way. I can package my classes into individual TS simply reference them with the /// ?
April 30, 2013 at 8:44 pm
Hey, thanks for the feedback.
This is true you can have all your classes as single TS files and just reference them with ///<reference path=’folder/MyClass.ts’/>. Then type “tsc –out main.js Main.ts” which would be your top level class (Main.ts) and it will concatenate all your TypeScript files that are referenced in your classes into a single JavaScript file (main.js). Check out my HTML5 Canvas Ad with TypeScript Tutorial and download the example files.
Sounds like there is going to be a lot of changes with TypeScript version 0.9.0. I am hoping they changed how modules are imported/referenced.
May 4, 2013 at 2:42 pm
Finally have time to start looking through you website typescript articles. Sorry if I spam you in advance! I refactored my project to use your structure but I am getting problems with “this” scoping. For example I would get an error that window.turnOn does not exist. Therefor this appears to not reference the car but the window. I have no idea why this occurs but it appears to have something to do with lambda =>. As I have just realised during this post, I am using a global setInterval function to start the car. Thus turnOn becomes window.turnOn……. And does not refer to the car class method. I currently do not understand scope here.
May 5, 2013 at 7:22 am
I think your are having scoping issues but can’t tell if I don’t see the code but check out my TypeScript Arrow Function Tutorial it will help.
December 5, 2013 at 11:32 am
Awesome!
The syntax is closer to Java than C# with keywords like ‘extends’ and ‘implements’. I worked with Script# and Saltarelle (C# to Javascript translators) and would like to know if there are any ways to translate C# to typescript.
Thanks Robert!
December 5, 2013 at 8:36 pm
I never new about Script# and Saltarelle but I don’t know if there is a compiler from C# to TypeScript. The syntax is very close to ActionScript 3 and that is why I like it.
January 6, 2014 at 5:43 am
Would be awesome if you could write a new tutorial or add a section that the describes the whole build process. We want to compile our project into one JS file yes, but we also want to minify that file and have a working source map to go with the minified file. Moreover, we want a declaration file. This is requirements all serious programmers should have. Yet I keep reading tutorials all over internet covering all kinds of topics yet only describing the first few baby steps one need to take.
Making the compiler output one single file with his source map and create a declaration file can be done from the GUI in latest Visual Studio. The tuff problem is to minify the file. How that affects the source map file, I don’t know.
Thank you for sharing!
January 7, 2014 at 6:07 pm
Ya, I didn’t have luck creating a single declaration file from my code in My TypeScript Workflow. Talking about baby steps I was able to create TypeScript Source Maps After Minifying my code. If I have time I may look to see how I can add it to my TypeScript workflow.
July 12, 2014 at 12:44 pm
if you want to modify your csproj to create a single js file as part of build process (rather than running tsc.exe), insert following code in csproj file:
app.js
i got this tip from http://stackoverflow.com/questions/15864584/what-are-the-typescript-project-build-configuration-options
i also inserted this code in the csproj to nuke out all the old js files before every build:
del ..\*.js
i also set this to false in debug mode as i don’t know what use it is:
false
March 25, 2015 at 8:48 am
Great! thank you a lot, really helpful
September 18, 2015 at 11:01 pm
This was really superb and i enjoyed it.
Please is there a way to can show me how to create a slickGrid or a Grid using Typescript.
March 3, 2016 at 11:48 pm
Hi,
It’s really help full to start learn typescript.
Can you please help how to use typescript in angular structure?
March 4, 2016 at 6:34 pm
Sorry, I don’t use Angular.
March 30, 2016 at 4:51 am
Hi,
Thanks for your reply. Do you have any idea in angular js and require js.
March 15, 2016 at 7:20 am
Hi, Robert.
Thanks for this helpful post.
Are you using “bool” instead of “boolean” in several places of your source code? I get an error when I try to compile :S
March 15, 2016 at 11:39 am
Ya, “bool” was the old way TypeScript did it. It is now “boolean”. I will change that. Thanks.
Check out my new and better Boilerplate that uses ES6 Modules in TypeScript.