There are three reasons why TypeScript is my favorite programming language:
- Its low barrier to entry — due to gradual typing and type inference.
- 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.
- Go to https://nodejs.org/en/ and download the LTS version.
- Go through the installer.
- Verify the installation by opening PowerShell (or another console) and running the command
- Open Powershell and run the command
npm install -g typescript.
This uses NodeJS’s Package Manager (
typescriptcompiler, globally (
2. Verify the installation by running the command:
Visual Studio Code
- Go to https://code.visualstudio.com/ and download the installer.
- 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.
- Go to https://git-scm.com/downloads and download the installer.
- Go through the installer.
- Verify the installation by opening PowerShell and running the command
Two ways to run TypeScript programs
- Create a folder. Note: you cannot have spaces in this folder name or step 4 will fail.
- 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 (
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:
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
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
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:
<title>My first TypeScript program</title>
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!
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:
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: