Tutorial

Your first TypeScript program

There are three reasons why TypeScript is my favorite programming language:

1. Its low barrier to entry — due to gradual typing and type inference.
2. Its versatility — compiling to JavaScript, means it can run on almost anything.
3. Its high ceiling — there is virtually no skill-cap to TypeScript’s type system. Even after using it for years, I am still learning and inventing awesome tricks to increase the quality of my software. (eg. 7 type tricks in 7 minutes, and CLI Architecture in NodeJS)

For these reasons, I recommend that people getting into programming start with TypeScript. In this post, I describe how I help people start using TypeScript. This is not an introduction to programming, rather it describes the steps to take before you start learning to program. I detail how to install the necessary tools, and two ways to run a TypeScript program.

I have written this assuming you have no prior knowledge of programming, but I do assume you know how to open a console. My examples are from Windows, but I imagine the process would be identical in other operating systems.

Getting the tools of the trade

We use NodeJS’s Package Manager to install TypeScript, so we first need to install that.

NodeJS

1. Go to https://nodejs.org/en/ and download the LTS version.
2. Go through the installer.
3. Verify the installation by opening PowerShell (or another console) and running the command npm —version:

Typescript

1. Open Powershell and run the command npm install -g typescript.
   This uses NodeJS’s Package Manager (npm) to install the typescript compiler, globally (-g).

2. Verify the installation by running the command:

3. If you get an error about Execution-Policy you need to:

3.1 Open a Powershell as Administrator

3.2 Run the command Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

3.3 Now you should be able to run tsc --version

Visual Studio Code

1. Go to https://code.visualstudio.com/ and download the installer.
2. Go through the installer. Note: When given the choice, I recommend checking these options. They allow us to open a folder or file in Visual Studio Code simply by right-clicking it.

• Add “Open with code” to Windows Explorer file context menu.
• Add “Open with code” to Windows Explorer directory context menu.

Git

1. Go to https://git-scm.com/downloads and download the installer.
2. Go through the installer.
3. Verify the installation by opening PowerShell and running the command git --version:

Two ways to run TypeScript programs

Actually, we cannot run TypeScript, however it compiles to JavaScript, which we can run. Traditionally JavaScript is run in a browser, for which it was invented. However, using NodeJS which we installed above we can also run it as a standalone application. Here we discuss how to set up a project, and run it in both ways.

Common beginning

1. Create a folder. Note: you cannot have spaces in this folder name or step 4 will fail.
2. Right-click it and open it in Visual Studio Code.

3. In the top click “Terminal” then “New Terminal”.

4. In the terminal run the commands:

git init — makes the directory into a git repository, so we have version control.

npm init -y —creates a package.json file to track when we install packages.

tsc —init — creates a tsconfig.json file, where we can configure how TypeScript should compile this project.

tsc -w — starts the TypeScript compiler and keeps it going in the background; watching (-w).

Currently, it is failing because we have no code yet. So let’s fix that.

5. Create a new file called index.ts. With the content:

console.log("Hello, World!");

From here the steps depend on whether you want to run in a console, or in a browser.

In a console

6. The TypeScript compiler looks for .ts files and automatically compiles them into .js (JavaScript) files. So we should now have a index.js file in the folder; this is the file we can run. To run it open another new terminal like in step 3 and run node index.js.

Congratulations! You have just written and run your first TypeScript program.

In a browser

6. To run in a browser we need another file, an HTML file to tell the browser to load our code. Create a new file called index.html with this content:

<html>
<head>
  <title>My first TypeScript program</title>
</head>
<body>
  <script src="index.js"></script>
</body>
</html>

7. Now to run the program simply open index.html in a browser. Currently, it will only display an empty page, so to see the message we put in index.ts we need to open the developer console. In most browsers, we simply hit the F12 key, and click “Console”.

Woohoo! Again we have code running!

Finishing up

The final part of my routine TypeScript project setup has more to do with Git than TypeScript, but doesn’t hurt to mention. When we install packages through npm a reference is put in package.json and the source code is put into a folder called node_modules. We typically don’t want this source code in our repository, so we tell git to ignore them by making a file called .gitignore with the content:

node_modules

Finally, we commit it to version control with the commands git add . then git commit -m "Initial commit". Now we are ready to start coding!

If you want to learn more about programming or TypeScript you should check out my book: