This tutorial is aimed for newcomers to TypeScript and VS Code. It’s contents resembles some sort of a spreadsheet format. You won’t find here deep programming concepts or challenges as I tried to come up with the simplest possible solution. Originally it was written just for myself, but then I decided to share it. Also, it’s for Windows platform, but if you use another OS it’s not difficult to make a switch.
I won’t go into much detail about what TypeScript is as all the relevant info can easily be found on wiki, but rather how to start using it from within Visual Studio Code.
- Get the latest Node.js
npmpackage manager. Open command prompt (
Win+X-> Command Prompt) and run the following command to install the latest stable version of TypeScript
npm install -g typescript
To check installed packages
npm list -g --depth=0
Create an empty folder, open Visual Studio Code and move to that folder.
First thing we need to do is to create
tsconfig.jsonfile. In order to do so we'll execute this command in terminal (
Ctrl+`to open terminal)
- Create source code. For example
- Now we want to setup a convenient build process in order to run the project with a couple of buttons. Press
Ctrl+Shift+Pand type Configure Task Runner, press Enter to select it then TypeScript - tsconfig.json. This will create a file named
.vscodefolder. It contains all needed commands and arguments for our build.
This is our project structure after all the steps.
It’s time to finally run the build task. Press
Ctrl+Shift+Band if all went well a new file will be created (
main.js). In order to see the output we need to feed it into
Let’s see it in action!
Alrighty! We had fun with command line and eager to try something new. Let’s create a minimal
html and change some DOM properties of the page through
Working with DOM
Create a new file named
index.html. It’s so minimalist that I’m even embarassed a little bit.
main.ts file and modify
<p>element inner text using
TypeScript. The main part here is
<script src=”main.js”> element.
main.js is a transplied code from
TypeScript and will run naturally.
WARNING!!! Another minimalist example!
Final project structure after all the changes.
Ctrl+Shift+B and check
main.js file (just for curiosity). Next, open
index.html and observe the result. Wow! So easy!
Awesome, but there is something strange in this example. What is
! symbol doing here? It’s called the non-null assertion operator, or simply bang operator in other languages. Compiler forces us to check for
null/undefined values if source code is compiled with
— strictNullChecks flag. More info can be found here. If we try to omit it the compiler will yell at me.
We must explicitly check for
null/undefined in order to safely use the return value from
.getElementById. But in this example it’s redundant because I’m 100% sure that it won’t return any
null/undefined. So I just use