Check out our Angular Book Series.

Create your first TypeScript Class - - Part 6

I'm writing a series of articles about Typescript as extra material to support my upcoming Angular 4 book. This is the sixth part of that series. Check out part 1, part 2, Part 3, Part 4, and Part 5.

This entry will teach you about creating your own classes. A class is like your own variable type with data and functions to process that data.

Create a Class

Create your class stub:


class Echo {
}

This creates a class named Echo. The purpose of this class is to create and store our welcome message. Let's start by creating some properties on the class:


static readonly messageIntro : string = "Hello"
subject : string;
private message : string;

The subject is a relatively normal variable. It is a string that contains the subject of our welcome message. The message is similar, but has the private distinguisher. This means that the message variable is private to the local message. It will contain the final message once it is put together, but is only accessible inside the class, not from code accessing an instance of the class.

The messageIntro is a bit different. We are not able to define constants inside of a TypeScript class, so instead I used the readonly keyword. This means the value will not be changeable, just like a constant. I also define the messageIntro as a static property, which means it exists on the class and not on an instance of the class.

Every class needs a constructor, so create one:


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

The constructor will be called automatically when we create a new instance of the class with the new keyword. This constructor accepts one argument, the subject. The code just saves the subject argument into the subject variable.

Now, add a createMessage() function:


createMessage():void{
this.message = Echo.messageIntro + " " + this.subject + "<br/>";
}

This concatenates the read only messageIntro variable with the subject and a line break. We had similar code in previous samples, but not encapsulated into a function. The return type of this function is void, meaning nothing is returned.

We'll add one final function to our class:


echo():string{
return this.message;
}

This function returns the complete message. The message value could be blank if the createMessage() function as not called yet, however this will still work.

Now, create an instance of the Echo class:


var echoInstance : Echo = new Echo('World')

This uses the new keyword to create the new instance. You may have seen this in other languages. You can output the subject for testing purposes:


console.log(echoInstance.subject);

You can also try to output the message:


console.log(echoInstance.message);

Since the message is a private variable, you'll see a compile error:

By the same token, we can access the messageIntro static value:


console.log(echoInstance.messageIntro);
console.log(Echo.messageIntro);

Can you guess which line works before trying to compile the code? The second one is the proper way to access static variables. The first one will throw an error:

Our final code is to output the value to the screen:


document.body.innerHTML = echoInstance.echo();

Compile the code--you should see no errors--and load it in a browser:

In a non-sample application, I might try to make my classes more discrete. Since this one adds a line break at the end of the message, it is conflating data processing and display code, something which is undesirable in real world applications.

Review the Generated Code

This is the generated code:


var Echo = (function () {
function Echo(subject) {
this.subject = subject;
}
Echo.prototype.createMessage = function () {
this.message = Echo.messageIntro + " " + this.subject + "<br/>";
};
Echo.prototype.echo = function () {
return this.message;
};
Echo.messageIntro = "Hello";
return Echo;
}());
var echoInstance = new Echo('World');
echoInstance.createMessage();
document.body.innerHTML = echoInstance.echo();

The Echo class is created using an immediately invoked function expression. The static class property is created as an instance variable inside the class--remember that JavaScript doesn't have the concept of readonly or static properties. The subject and message variables are not defined since they do not have default values. They'll be created on the class when they are needed, which is inside the function.

Although beyond the scope of this tutorial, inheritance is supported with TypeScript, so one class can inherit from another.

Keep up to date by reading DotComIt's Monthly Technical Newsletter

Loops and Arrays in TypeScript - Part 5

I'm writing a longer series of articles about Typescript. This will be extra material to support my upcoming Angular 4 book. This is the fifth part of that series. Check out part 1, part 2, Part 3, and Part 4.

This entry will focus on loops and arrays. We'll create an array of strings, and then loop over them with our echo function to welcome multiple people in our HTML page.

Create an Array

The first step is to create an array. You can use this sytnax:


let personArray : string[] = ["Jeffry", "Tom", "John"];

This creates a variable just like other variables we had seen. The key differentiator is that after the type, I added square brackets. This is what tells the compiler we are creating an array of strings. You can define arrays with any of the native types, such as numbers or Boolean, or with your own custom types.

For-in Loop

The very first time I wanted to loop over an array, I used a for-in loop, like this:


let bodyString : string = "";
for (let person in personArray){
bodyString += echo(messageIntro + " " + person + "<br/>");
}
document.body.innerHTML = bodyString ;

I had used for-in loops in other languages, such as ActionScript so this was my natural impulse.

Let's look at the results:

Instead of outputting the data in the array, it outputted the index. The proper way to use a for-in loop in TypeScript would be like this:


for (let person in personArray){
bodyString += echo(messageIntro + " " + personArray[person] + "<br/>");
}

This isn't much different than a generic for loop that uses a counter, although the syntax is a bit nicer:

All version of ECMAScript after 2015 support for-in loops the same way that TypeScript does. This is supported by most browsers and in fact that generated JS Code uses for-in loops:


for (var person in personArray) {
bodyString += echo(messageIntro + " " + person + "<br/>");
}

But, this result wasn't quite what I was after. Thankfully TypeScript includes another option, the for-of loop.

For-Of Loops

A for-of loop makes one syntactical difference than a for-in loop. Instead of using the keyword in, it uses the keyword on:


for (let person of personArray){
bodyString += echo(messageIntro + " " + person + "<br/>");
}

This type of loop the loop counter, person, will match the value of the personArray instead of the index. After the compilation this is turned into a for loop with an explicit counter:


for (var _i = 0, personArray_1 = personArray; _i < personArray_1.length; _i++) {
var person = personArray_1[_i];
bodyString += echo(messageIntro + " " + person + "<br/>");
}

Compile this code and load it in the browser to see the expected results:

Looping in TypeScript is not much different than looping in other languages.

The next entry in this series will focus on creating classes.

Keep up to date by reading DotComIt's Monthly Technical Newsletter

String Enums in TypeScript - Part 4

I'm writing a longer series of articles about Typescript. This will be extra material to support my upcoming Angular 4 book. This is the fourth part of that series. Check out part 1, part 2, and Part 3. This article will focus on creating String based Enums.

What is an Enum?

Enums are a data type I have not come across in most other languages, but they are inspired by C#. An enum is a way to give friendly names to numerical or string values. They are like an array with indexes, but more specific. I can envision using something like this with a view stack style component and using an enum to handle which view is currently displayed. Or, I might use it with an event class instance to determine what type of event occurred. Or it could be used to determine what color style to apply to certain text.

Create a String based Enum

It is interesting that Enum's can be used to represent textual values too. Look at this:


enum MyColors {
Blue = "#0000FF",
Red = "#FF0000",
Green = "#00FF00",
};

The value of the color name represents the hex value of the actual color. I recently could have used something similar when dynamically applying colors to the header of a site based on which section the user was viewing. Get the individual colors, and output them:


let myColor1 :MyColors = MyColors.Blue;
let myColor2 :MyColors = MyColors.Red;
let myColor3 :MyColors = MyColors.Green;

console.log(myColor1);
console.log(myColor2);
console.log(myColor3);

You'll see something like this:

Enums are an interesting data type, caught somewhere between an array and a class.

Keep up to date by reading DotComIt's Monthly Technical Newsletter

Enums in TypeScript - Part 3

I'm writing a longer series of articles about Typescript. This will be extra material to support my upcoming Angular 4 book. This is the third part of that series. Check out part 1 and part 2. This article will focus on Enums, a TypeScript data type that does not exist in JavaScript.

What is an Enum?

Enums are a data type I have not come across in most other languages, but they are inspired by C#. An enum is a way to give friendly names to numerical values. They are like an array with indexes, but more specific. I can envision using something like this with a view stack style component and using an enum to handle which view is currently displayed. Or, I might use it with an event class instance to determine what type of event occurred. Or it could be used to determine what color style to apply to certain text.

Create a Number based Enum

I'm going to start by creating a simple sample with a number based enum:


enum MyNumbers {
First,
Second,
Third
}

The MyNumbers enum contains four values each one representing a number. Since enums are sort of like arrays, the First item is at the 0 index, the second item will have the value of 1, and so on. We can use MyNumbers like it was it's own variable type:


let myNum :MyNumbers = MyNumbers.First;

Output this value.


console.log(myNum);

What do you think you'll get? Since it is the value of MyNumbers.First and that is the first element of the zero-based index, you'll get number 0:

A benefit of enums is that we can control the number scheme:


enum MyNumbers {
First = 1,
Second,
Third
}

We specified the First item is equal to the number 1. Turn each element into a variable:


let myNum1 :MyNumbers = MyNumbers.First;
let myNum2 :MyNumbers = MyNumbers.Second;
let myNum3 :MyNumbers = MyNumbers.Third;

Then output them:


console.log(myNum1);
console.log(myNum2);
console.log(myNum3);

You'll see:

Now our text numbers match up with the actual text index. We can control the numbers even if they aren't in sequential order. Add a new entry to the MyNumbers enum:


enum MyNumbers {
First = 1,
Second,
Third,
Ten = 10,
}

This is number 10, skipping four through 9. Grab it as a variable and output it:


let myNum10 :MyNumbers = MyNumbers.Ten;
console.log(myNum10);

Combined with our other outputs, you'll see something like this:

Enums provide a lot of flexibility.

Enums can also be created to use a string based index, and we'll discuss that in the next article.

Keep up to date by reading DotComIt's Monthly Technical Newsletter

Creating Variables in TypeScript - Part 2

I'm working on a longer series of articles about Typescript. This will be extra material to support my upcoming Angular 4 book. This is the second part of that series. Check out part 1.

An important part of programming is the ability to create variables. Let's turn our "Hello World" Variable into a variable. First, we'll do it the Javascript way and then we'll modify it with some TypeScript.

Create a Variable

This is the original demo from the previous section:


function echo(message) {
return message;
}
document.body.innerHTML = echo("Hello World");

We can easily add a variable in here. First, create the variable:


var message ="Hello World"

The var keyword is the normal way to create a variable in JavaScript. Now, modify the echo() call to pass the variable instead of the string:


document.body.innerHTML = echo(message);

Recompile the code and it will work just as the previous sample:

Define the Variable with Let instead of Var

TypeScript includes a secondary way to create a variable, using the let keyword instead of the var keyword:


let message ="Hello World";

This simple replaces the var command with the let command. Recompile and you'll see the same results. Let is part of the ECMAScript 6 standard, but for maximum compatibility, you probably want to stick to ECMAScript 5 or lower compatibility.

The reason to use the let command instead of var is because the two scope differently. When you use var the new variable is created as part of the function block. If the variable is not part of the function block it is added to the global scope of the page. This is why it is considered a best practice for a lot of code to be included in an IIFE. This can cause unexpected results in some cases, such as when you access loop counters inside nested for loops, or have one function embedded in another. The let keyword always scopes at the block level, so each for loop would be considered its' own block.

Consider this code:


function scopedemovar(){
for(var i = 0; i <10; i++){
console.log('outer i: ' + i);
for(var i = 0; i <10; i++){
console.log('inner i: ' + i);
}
}
}
scopedemovar();

Although this might be considered nonstandard code because the counter variable for both loops is defined twice and identical it is still perfectly valid. What would you expect the output to be? Try it and run it:

You may expect the outer loop to loop 10 times, but it only loops once. That is because the inner loop changes the value of the counter variable and the stop condition triggers the second time the outer loop tries to run.

Change the var to let:


function scopedemolet(){
for(let i = 0; i <10; i++){
console.log('outer i: ' + i);
for(let i = 0; i <10; i++){
console.log('inner i: ' + i);
}
}
}

Now, each i variable is scoped to its own for block and they do not interfere with each other:

I cut off the full output since it was very long, but you can run the code to see that both the inner and outer loop both execute a full 10 times using the let value.

Add Typing to Variables

An important decision for using TypeScript is to make variables statically typed instead of dynamically typed. We can add a type to the variable definition, like this:


let message : string ="Hello World";

We can change the function definition too:


function echo(message:string ):string {
return message;
}

The function now includes a typed argument and an explicit return type. When we send in the message variable the compiler checks to make sure that we are sending in a string. Recompile the code and run it. You'll see no differences in the output:

Open up the JavaScript file created by the TypeScript compiler for a bit of a surprise:


function echo(message) {
return message;
}
var message = "Hello World";
document.body.innerHTML = echo(message);

All your type statements were stripped out. That is because these types are part of TypeScript, but not JavaScript. They allow for compile time checking of values, but do not change the underlying language or how things run in the browser. This is an important distinction to remember as you learn TypeScript. The language is all about improved tooling and compile time validation; not about a new language in the browser.

Keep up to date by reading DotComIt's Monthly Technical Newsletter

Introduction to TypeScript - Part 1

I'm working on a longer series of articles about Typescript. This will be extra material to support my upcoming Angular 2 book. This is the first part of that series.

What is TypeScript?

TypeScript is a strongly typed language which can be used to build web applications. It come with a special compiler that converts the strongly typed language into JavaScript so it can run in a web browser. Since TypeScript is strongly typed, it can offer better tooling than can be used with simple JavaScript. Angular 2 was built using TypeScript and I use it heavily in my Angular 4 book. This article is intended to give you an introduction to TypeScript.

Setup the Project

The first step to creating a TypeScript application is to install the compiler. I'm going to use the Node compiler. First, you'll need to set up the node project. Run this command:


npm init

And follow the instructions. You'll see something like this:

This will create a package.json file that will look something like this:


{
"name": "01helloworld",
"version": "1.0.0",
"description": "Sample TypeScript Project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jeffry Houser",
"license": "ISC"
}

Now install the TypeScript compiler:


npm install -g typescript

You'll see this:

With TypeScript installed, you're ready to write your first Typescript application.

Create Your First TypeScript File

Create a file named hello.ts:


function echo(message) {
return message;
}
document.body.innerHTML = echo("Hello World");

The purpose of this code is to echo a Hello Word message. The function accepts a string, and returns it. The innerHTML of the document's body tag is set to the results of the function call.

This file would be valid JavaScript, but it works fine since TypeScript is a Superset of JavaScript. We can use JavaScript inside of TypeScript easily. We'll improve on this throughout the article as we introduce more TypeScript specific concepts.

You can compile this file by running this command line:


tsc hello

You'll see something like this:

You aren't given a lot of feedback, but if you check the directory, you'll see a hello.js file:


function echo(message) {
return message;
}
document.body.innerHTML = echo("Hello World");

There isn't a lot of difference between the original file and the compiled file, that is because our main TypeScript file is primarily JavaScript. This is a place to start and over the series we'll expand our TypeScript knowledge.

Test the Application in a Browser

Now it is time to test the application in a browser. Create a page named Index.html:


<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="hello.js"></script>
</body>
</html>

This index file loads the hello.js file, which will cause the document.body.innerHTML assignment to be called, which will run function and return the results:

Congratulations! You've created your first TypeScript application.

Keep up to date by reading DotComIt's Monthly Technical Newsletter

How do I Extend a Background Color the Full Height of a Div with CSS?

Last week I used CSS to tile a graphic across the whole width of a page. The purpose was to extend a header bar's color when the page scrolled right beyond the iniital viewport.

Now, with the same project I wanted to extend the left nav to the full height of the page. I couldn't use the same trick as you can't tile two separate background images.

This is still doable with some CSS. First, start the HTML Body:


<body>
</body>

We want the body to be the height of the view area:


body {
height : 100vh;
}

This sets the body to 100% height of the view area.

Now create our content wrapper div inside the body:


<div class="flex">
</div>

This code uses FlexBox for display:


.flex {
display : flex;
height : auto;
min-height : 100%;
}

It also contains a trick. The height is set to auto and the min-height is set to 100%. That, combined with the body's height of 100vh will extend this div through the full height of the page.

Finally, create our left nav bar inside our Flex div:


<div class="somebar">
Some Text and other things
</div>

This is styled with a specific width, but no specific height. I also specified the color


.somebar{
width : 150px;
background-color:blue;
color : white;
}

Check out the code here.

I've been doing a lot of HTML CSS work for a client, but I'm working on some longer programming based articles which will be coming out soon.

Can I create an HTML Background with an inline Image?

I'm working on a site for some clients, and one of their complaints was that the left nav bar was not extending the full height of the page. The nav div was set to expand to its content, which meant it stopped when it ran out of content. On some pages it looked fine, on others the nav bar ended too early. As a programmer, I don't often deal with design issues like this, so I pulled in the project's designer and we put our heads together to find a solution.

First, the problem was very generically like this:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin : 0px;
}
.nav{
background-color : #0000FF;
width : 200px;
height : 50%;
color : #ffffff;
}
.nav a {
color : #ffffff;
}
</style>
</head>
<body>
<div class="nav">
Some info in the nav bar<br/>
<A href="">Some Link</A>
</div>
</body>
</html>

Our code was much more complicated, using Flexbox for complicated layouts, but this is simple enough example to demonstrate the problem. We were not able to use a simple height:100% in CSS because some parent containers used Flexbox styling and did not stretch the full height of the page.

My designer friend recommended tiling a background image. We can change the CSS for the body tag to something like this:


body {
margin : 0px;
background: top left url(blue1x200.png) repeat-y;
}

The blue1x200.png is an image with just the color blue in it which has a height of 1 pixel and a width of 200 pixels. The repeat-y clarification tells the browser to repeat this image on the y axis, meaning up and down.

This solved our issue, so whatever was happening to the page nav or the page content it would not prevent the left 200 pixels on the page from showing up the same color as the background.

Using the url attribute to the background CSS will force the page to spawn another HTTP request to load the image. My designer had a trick for that too. He converted the image to a Base64 string representation and replaced the URL:


background: top left url('data:image/png;base64,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') repeat-y;

The encoded image looks like a lot of gobblygook, but the browser treats it as an image without having to make a new request to load something from the server. Check out the code.

You can use a site like this to convert your image toBase64.

If you've been doing Web Development for a long time, this sort of technique is probably not new to you, however I had never seen someone encode the images and include it in-line before. It's a cool technique.

Goodbye Flash

Adobe announced an End of Life for the Flash Player. I've written things in defense of Flash in the past and thought it would be worth it to revisit those statements today.

Who Am I?

If you came across this without knowing me, I am arguably one of the best Flex Developers in the world. I tied my business and professional life to the Flash Platform, and Flex, more than a decade ago. Here are some of my credentials:

  • I produced two Flex podcasts. a href="http://www.theflexshow.com">The Flex Show presented highly edited community interviews. and The Flextras Friday Lunch was a live demo with Q&A.
  • I created Flextras, a business selling Flex components.
  • I was editor in chief of the short-lived Flex Authority magazine.
  • I spoke at dozens of Flash based user groups and conferences.
  • I answered a ton of questions on StackOverflow and still retain the top spot in the Flex user charts.
  • I became an Adobe Community Professional due to my work in the Flash community.
  • I was one of the founding PMC members of the Apache Flex team.

Back then, I bet that Flex would provide a better application building experience than anything HTML could offer. I thought it would rule the world. I wanted to get in early and ride the wave to success. I took a calculated risk that turned out to be wrong.

Why Does Adobe's Decision Makes Sense?

Browsers have slowly been shutting down their plugin APIs and Flash Player was a plugin. Flash was able to get around this because it is widely used and Adobe was able to negotiate to add Flash directly into the browser. Both Microsoft Edge and Google Chrome are distributed with Flash. These APIS have slowly become more restrictive over time and the future of the web will be plugin-free.

Since HTML is finally adding a native form of DRM, the bulk of the major content providers no longer need Flash's proprietary nature to protect their content. This removes the last commercial obstacle which I suspect has been keeping the Flash player alive.

Jeffry, How does this Affect You?

Personally, I spent a couple hours last night playing Bloon Tower Defense one of my favorite casual browser games. I hadn't touched it in years, but I'll miss it when it is finally gone.

Professionally, this doesn't affect me all that much. I refactored my business more than five years ago to focus on alternate technologies. In the HTML world, I really like Angular, but I've touched on a lot of different technologies.

I never turn down the Flex work that comes my way, and people still find me based on my past history. But, I am not actively pursuing it. If you need help migrating your Flex applications to an HTML5 platform, I'd be glad to help, so reach out and we can discuss.

How does this Affect you?

Adobe will stop distributing the Flash Player in 2020, but the Adobe Flash Platform will live on through Adobe AIR. Given AIR's use as a cross platform mobile app development platform I expect that to be around for a long time.

If you still have Flash applications in production, now is the time to start planning a migration of sorts. You have, roughly, 2 years to plan your strategy.

What migration strategies can you use?

  • Distribute to the Desktop as an Adobe AIR application. You can use all your existing code and the migration will not take long.
  • Distribute as a Mobile Application with Adobe AIR. This has the benefit of using the same code base, but you'll probably need some UI rework to accommodate for the different screen sizes.
  • Rework to HTML5: You can rework your application into an HTML5 application. You should be able to reuse a lot of your services and database code, which means you'll just be writing a new UI. Some technologies such as FlexJS or Haxe allow you to use your ActionScript skills in the process

I'll be more than happy to help you with any of these tasks, so give me a call.

What Next?

I had a fun ride with the Flex community and met some new lifetime friends. I'm sorry to see Flash go, but the world has moved on. This is just a last reminder that we all have to move on.

What do you think? What do you remember most about Flash or Flex?

How can I revert a Git directory without affecting all changes?

I have been working on a specific code change with a client for about two weeks. This included about a dozen commits to the git repository before making a pull request. The client reviewed the pull request before merging, and requested I roll back a few changes. I had made these commit 8 commits ago, and from the dozens of files changed I only had to roll back two.

How do you do it?

I didn't see an obvious way to roll back just those files using SmartGit, my tool of choice, so I had to drop back to the command line. This did it:


git checkout SHA-Value /c/path/to/repo/root/path/to/subdirectory/with/rejected/changes

The SHA is the unique identifier for each commit. I opened up SmartGit, viewed a change log, found out which commit I changed these files, went to the commit before that, clicked 'details' and the SHA value is listed right there. You can also get the SHA value from GitHub if you prefer. Go into the Pull Request, and select commits. The value is in the table, to the right of the commit message.

The path to the directory is your local system path. I had to use the absolute path. Since I'm a Windows user that started with the C drive, drilled down into my project folder, to the repository. And then I drilled down deeper into the repository to find the specific subdirectory I wanted to revert. Reverting the subdirectory is easier than reverting all the files individually.

I executed the line inside of GitShell. Everything worked.

I found a bunch of posts covering this topic, but most of them confused me. Hopefully this helps someone. Let me know!

More Entries

All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.