Simplest TypeScript project using Visual Studio Code

equisept
equisept
May 31, 2017 · 3 min read

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.

Preface

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.

Installation

  • Get the latest Node.js
  • Node.js comes with npm package 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

Configuration

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)

tsc --init
  • Create source code. For example main.ts file
Simple TypeScript
  • Now we want to setup a convenient build process in order to run the project with a couple of buttons. Press Ctrl+Shift+P and type Configure Task Runner, press Enter to select it then TypeScript - tsconfig.json. This will create a file named tasks.json in .vscodefolder. It contains all needed commands and arguments for our build.

This is our project structure after all the steps.

Project structure

Run

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 node command.

node main.js

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 TypeScript.

Working with DOM

Create a new file named index.html. It’s so minimalist that I’m even embarassed a little bit.

Let’s change 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.

Final project structure

Press Ctrl+Shift+B and checkmain.js file (just for curiosity). Next, open index.html and observe the result. Wow! So easy!

index.html page

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.

Compiler error with -strictNullChecks flag

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 !.

That’s it!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade