- Visual Studio Code https://code.visualstudio.com/
(Any IDE will work but I’ll be setting this up with VS Code)
- 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)
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:
- Click ‘File’
- Click ‘Open Folder…’
- Navigate to folder
- 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.
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:
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
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.
Save the file and open it in a browser, then open the browser’s developer tools to see the log!
Properties, Constructors, Variables
Look over this next block of code, would you kindly.
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.