Is it TypeScript Yet?

Photo by Helloquence on Unsplash

Before you start, the requirements of this quick introduction to TypeScript is that you are running Windows 10 and have setup a development environment. Most commonly you should have NodeJS installed, since it will also come with NPM which will also be used to install the TypeScript compiler below.

1. Install NodeJS from https://nodejs.org/en/download/
   Choose the LTS (Long Term Support) tab and select your operating system. Most likely it will be 64 bit Windows.
2. Optionally you can also install VSCode, which is a great IDE for developing TypeScript. https://code.visualstudio.com/
   I use VSCode, it’s now my favourite and It appears in the some of the screen grabs in this article.

Ok,

So, open a Command Prompt, by typing CMD into the Windows 10 search box.

Then type mkdir TypeScriptTutorial and then CD into the new folder.

If you have VSCode installed with defaults, simply type code . and it should open the VSCode interface.

Or,

you can open notepad by typing notepad

I will use VSCode for the remainder of this Tutorial.

Create a new file, in VSCode called foo.js

If you opened notepad instead, then just remember to save your file as foo.js to your new folder we created a few moments ago.

In the foo.js file, add this text below and save.

function foo(bar) {     
	return "Hello, " + bar; 
}
  
let baz = "ABC";  
console.log(foo(baz));

We can now run this file directly in Nodejs or include it in a web page, and it will run inside the browser.

Test it by typing,

node foo.js

Or you can use the terminal option inside VSCode.

In my terminal, I have selected Git Bash as the default. This is my personal preference, but your default will most likely be PowerShell. It doesn’t matter, the commands will run the same, just the colours of the output will be different.

Now,

If your script worked, then that’s great,

But,

This is not TypeScript,

yet.

We need to now install the TypeScript compiler.

Type

npm install -g typescript

And then type,

tsc -v

To verify that it was installed correctly.

Now,

Rename your foo.js to foo.ts

And then compile it using tsc foo.ts

You will now have 2 files, foo.ts and foo.js.

You can now re execute the JavaScript code using node foo.js just like before.

foo.js was just recreated from the foo.ts source code.

The tsc (TypeScript Compiler) program read the foo.ts and created us a default ES3 compatible foo.js equivalent file. We can configure TSC to output other ES (EcmaScript) version files if we choose.

And now, for the anti climax,

Photo by rob walsh on Unsplash

The foo.ts file contains, 100% JavaScript compatible code. So, the compiler didn’t do anything, really. Check the output of foo.js versus foo.ts and you will see that they are identical.

TypeScript is really just an extension to JavaScript so the TSC program also supports all of JavaScript. Using TypeScript though, will give us more options, and especially in the way of Type safety which is very important for writing robust code, which is checked for errors at design time.

Now lets add some TypeScript specific syntax called Type Annotations.

function foo(bar: string) {
	return "Hello, " + bar;  
}  
let baz = "ABC";   
console.log(foo(baz));

The addition of the type : string to the parameter in the foo function above is TypeScript. This is telling the TSC compiler, that the foo function must be provided a string. If you call the foo function with anything else, the TypeScript compiler will raise an error.

Example, I will try to call foo with an integer. See line 5 below.

This error is bought to my attention at design time, by the VSCode IDE underlining the error with a red squiggly, and the also the error tool tip,

and also finally the TSC compiler, if I choose to ignore the error and try to compile it anyway.

The foo function needs a string.

Note : TypeScript additions to JavaScript won’t run by default in NodeJS or in the browser, so that’s why we use TSC to compile it to JavaScript.

So, in conclusion,

Using Typescript is a much more robust option, than simply just using JavaScript instead and maybe missing my potential error. Maybe, I absolutely need my foo function to accept a string, at all times, and never any other variations. And then maybe not. It’s up to you.

When typing code, you should be explicit in your function parameters, and elsewhere and JavaScript by default doesn’t enforce explicit typing, but a concept known as Duck Typing, which is not enforced typing, which also means the type can be anything you like, it’s decided at runtime, and can be changed at runtime. If it quacks like a duck, then it must be a duck, but it might not be. Maybe you have a dog that quacks like a duck, and that would be an error, but you wouldn’t know until runtime, and then that would to late.

Example,

function showPassword(show) {
	if(show) {
		return 'secret';
	}else{
		return '********';
	}
}
console.log(showPassword('false'));

Try to guess what the above code prints out. It’s either secret or ********

I’ll tell you then answer,

It prints secret . You’d be forgiven if you thought the answer was ******* The presence of false in the function call is a trick, since it’s written as 'false' (a string) and not as the Boolean false.
If the code was written in TypeScript, with the Type Annotation in the function signature, see image below, then the problem would have been detected much earlier while writing the code.

TypeScript helps us to make sure we got our intentions right at design time.

So, this quick tutorial is part of my larger TypeScript course where I also teach Socket.IO. Please check it out at https://sbcode.net/tssock/

Thanks

Sean