In Visual Studio Code (VSC) compile TypeScript to JavaScript on „save“

Visual Studio Code is written in TypeScript and TypeScript was developed together with Visual Studio Code, it was the first major use case. There is a nice video about the story here:

TypeScript the Origins

It is therefore surprising that Visual Studio Code does not have a built-in process to directly compile TypeScript in JavaScript. You have to go through several steps and start the process each time you open a VSC project.

Here is the solution step by step:

1. Install node.js

First „node.js“ must be installed.

On a Debian or Linux Mint machine it is quite simple using the default package:

sudo apt update && sudo apt upgrade
sudo apt install nodejs
node --version

2. Install TypeScript and the Type Script Compiler „tsc“

To install TypeScript (that includes the compiler tsc) we now use node.js:

npm i -g typescript
tsc --version

The last command should show the version of tsc.

3. What is included in the TypeScript installation?

The TypeScript programming language
Typechecker
Compiler
Language service to help development tools like VSC (IntelliSense) to give hints and other functions to make coding more easy and helps to avoid mistakes

The command to use in the terminal for all functions is: „tsc“.

4. The project setup

Lets assume the following folder structure inside your VSC project:

 Public
    JavaScript
        Src
            project.js
        TypeScript
            project.ts
            tsconfig.json

As soon as there is a „tsconfig.json“ file, VSC will be able to deal with the TypeScript files. So, first generate the default file:

cd /to/your/directory/TypeScript
tsc --init

Now we have to change some settings inside „tsconfig.json“:

{
    "compilerOptions": {
    "target": "es2019", /*works in all modern browsers*/
    "outDir": "../Src",

    /*other settings*/
    },
    "exclude": ["node_modules"],
    "include": ["*.ts"]  
}

In 2024 the default target is „es2016“ but this means the compiler is generating quite complicated code to support older systems, using „es2019“ means less complicated JavaScript code, since the compiler can use some commands as they are.

HInt: chatGPT suggest to add a setting „watch“, but „watch“ is not part of the settings that tsc is understanding!

5. Do it by hand

To compile on save a TypeScript file you now have to open the terminal and „cd“ into the TypeScript folder with your files and then start the watch mode of „tsc“:

cd Resources/Public/JavaScript/TypeScript
tsc -w

You can close the VSC build in terminal and work on the TypeScript files and every time you save, tsc will compile the corresponding JavaScript file into the „Src“ folder. After closing VSC code and reopen it again, you have to do the „tsc -w“ again.

6. VSC also offers „tasks“

To shorten the process a bit one can create a VSC „task“ inside a „tasks.json“ file that sits inside the folder „.vscode“ in your VSC project.

There are default tasks under „Terminal -> Configure Default Build Task …“ („tsc: watch“ and „tsc: build“) but the settings didn’t work in my case. If there are no other tasks already set, everything inside „tasks.json“ can be deleted and replaced by the following code:

{
	"version": "2.0.0",
	"tasks": [
	  {
		"label": "watch TypeScript",
		"type": "shell",
		"command": "cd Resources/Public/JavaScript/TypeScript; tsc -w",
		"isBackground": true,
		"problemMatcher": "$tsc-watch"
	  }
	]
  }

The name of the task is „watch TypeScript“ and the terminal commands are moving (cd) into the TypeScript folder and then start „tsc -w“.

Hint: chatGPT is giving a solution with [args] that didn’t work on my machine.

Under „Terminal -> Run Task …“ the „watch TypeScript“ task can now be started.

7. Problem: Type hinting not working in VSC

In the bottom right of VSC you see in the blue ribbon which programming language is associated with the file you are currently in. I’m having a TYPO3 extension installed so „.ts“ was associated with TYPO3 and not with TypeScript. This can be changed by clicking on the bottom right icon „{}“ in VSC and change the setting.

Type hinting is done in VSC by IntelliSense.
Settings inside VSCs „settings.json“ like „editor.parameterHints.enabled“ or „editor.hover.enabled“ must be on „true“ for TypeScript hints to work.

8. Read the VSC docs

https://code.visualstudio.com/Docs/languages/typescrip t

Author:
Thomas Hezel
email: info@zazu.berlin