Getting Started with TypeScript in Visual Studio Code

 

TypeScript lets you write JavaScript the way you really want to.
TypeScript is a typed superset of JavaScript that compiles to plain 
JavaScript. Any browser. Any host. Any OS. Open Source
--typescriptlang.org

 

TypeScript brings classes, types, constructors, interfaces, and a whole bunch of other shenanigans to JavaScript. Learn more @ http://www.typescriptlang.org/ because they know all the stuff and things.

Prerequisites

  1. Visual Studio Code https://code.visualstudio.com/
    (Any IDE will work but I’ll be setting this up with VS Code)
  2. TypeScript installed (npm install -g typescript)
    This installs the compiler that converts the .ts to .js
    (go to https://nodejs.org/en/ for npm to work in cmd)

Getting Started

Visual Studio Code allows you to work on a single file or in a directory. Navigate to a folder on your drive and select it to be the folder you work in.Some steps if you need help:

  1. Click ‘File’
  2. Click ‘Open Folder…’
  3. Navigate to folder
  4. Click ‘Select Folder’

The folder will now open in Visual Studio. Click it in the explorer so the the little drop down arrow triggers and then select new file.

2016-03-01_23-51-33

A prompt appears to name the file, give a name with a .ts extension (like typeScript.ts).

When the file has been created, it will open in the right pane as an empty file. If you’re used to using a language like C#, this will be a breeze for you. We can start filling this file up by creating a new class. Place the following, or something similar, into the file:

2016-03-04_aClass.png

A class is defined by prefixing it’s name with the keyword ‘class’ and then two curly braces for all the code to go in. We can then put a function inside that’ll do some work for us, you may notice some familiar keywords like ‘public’, ‘static’, and ‘void’. These all do exactly what you think they do if you’re familiar with them. The public keyword sets the accessibility level on the function, the static keyword means it doesn’t have to be newed up, and the void represents the nothingness that the function returns… deep. Inside the function is a normal console.log() with a string.

 

Compile/Transpile… gimme the .js

Now that we’ve got some TypeScript down… how is it actually used? Visual Studio Code comes with a built-in Task Runner that will need to be configured to compile the TypeScript file down to a JavaScript file that’ll actually be used in your view.  Press F1 to open Visual Studio Code’s command prompt and put in Configure Task Runner as the command, press Enter when done. This will have created a .vscode folder in your working directory with a tasks.json file in it.

2016-03-04_TASKSdotJSON.png

Scroll down until you see something familiar to what’s above. the “args” value should be the location of your .ts file in your working directory. When you compile the .ts file it creates a .js file, so I have my .ts in a scripts folder inside my working directory.(TYPESCRIPTLEARNING is my working directory, .vscode and scripts are two folders inside my TYPESCRIPTLEARNING folder). After your change the args to your .ts file’s location save the file. You should now be able to compile the file by pressing CTRL + SHIFT + B which is the shortcut for Run Build Task. A little spinny thingy appears at the bottom left of Visual Studio Code to let you know the task runner is working in the background. When it stops you’ll have .js inside the same directory as your .ts file.

 

So as you can now see, the TypeScript has compiled/transpiled down to JavaScript and now that we’ve got the JavaScript we can attach it to a view. By the way – doing things in TypeScript and reviewing what it compiles down to is actually a pretty neat way to learn some new tricks in JavaScript. Create an index.html in the root of your working directory and add a script reference to the JavaScript file that was generated.

2016-03-04_scriptReference

Save the file and open it in a browser, then open the browser’s developer tools to see the log!

2016-03-04_weveStartedUp.png

So now that we know how to create a TypeScript file, fill it with a class, get some output, and how to generate the JavaScript for it. Just a heads up, if this was a full fledge version of Visual Studio the JavaScript would be auto-generated and we wouldn’t have to compile this every time.

 

Properties, Constructors, Variables

Look over this next block of code, would you kindly.

2016-03-04_propertiesConstructorsVariables

I’m going to guess you can tell what this code does just by looking at it. Lets run through it though just in case.

main() on (lines 2-6) now creates an instance of the Greeter class on Line 4 passing in a string “HULK”. The string passed in is used by the constructor on line 12 to set the value passed in equal to the name property on the Greeter class. You may notice the syntax used to create the variables in the constructor and property, you define the name of the variable and you can declare its type by adding ‘: typeName’ where typeName can be ‘number’, ‘string’, or ‘any’. The property is also referred to throughout the class using the this keyword, this.myProperty,  which may be a little new to you if you’re coming from C# where property names don’t require the keyword to use.

Continuing on, line 5 invokes the greet function of the Greeter class and also passes in a string. Line 16 defines what the greet function does, it takes a variable of type string, has a return type of void just like main(), and then logs a message that uses the name property and the string passed into the function.

If you build this using the task runner, the same way as before using CTRL + SHIFT + B and open up the view, you’ll see the new message appear in the log.

2016-03-05_HulkSmash

So we’ve now got at least and understand of how the basic building blocks work in TypeScript, nothing fancy as of yet. We know how to set up Visual Studio Code to be able to read and compile/transpile ( I’m really still not sure which term I’m supposed to use, I feel like transpile is a better word for it than compile ) and how to use the generated JavaScript file in a view. I’m probably going to be doing some follow up posts with TypeScript and eventually with Angular 2 so if this interests you, stick around for more posts 😀

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s