Hello World! Example in TypeScript
Got everything? Great. Let’s get started!
- Create a new folder and give it a good creative name like “HelloWorld”.
- Launch VS Code
File > Open Folder...from the main menu and navigate to the folder that you just created.
- Click the New File icon in the EXPLORER.
That will bring up an input field in which to assign the file name.
- Give it a name of “helloworld.ts”:
The empty file will immediately load in the Editor.
- Type the following code into the file:
const message: string = 'Hello World'; console.log(message);
It will print “Hello World” in the console.
Transpiling and Running the Script
The easiest way to install the TypeScript compiler is through npm, the Node.js Package Manager. If you have npm installed, you can install TypeScript globally (-g) on your computer by opening VS Code’s Integrated Terminal by selecting Terminal > New Terminal from the main menu and issuing the following command:
npm install -g typescript
You can test your install by checking the version.
To compile your TypeScript code, type
To run the generated JS file, enter
node helloworld.js in the terminal. Here’s what the terminal console should like at this point:
PS I:\My Documents\TypeScript> npm install -g typescript C:\Program Files\nodejs\tsserver -> C:\Program Files\nodejs\node_modules\
typescript\bin\tsserver C:\Program Files\nodejs\tsc -> C:\Program Files\nodejs\node_modules\ typescript\bin\tsc + [email protected] added 1 package from 1 contributor in 1.843s PS I:\My Documents\TypeScript> tsc --version Version 4.1.5 PS I:\My Documents\TypeScript> tsc helloworld.ts PS I:\My Documents\TypeScript> node helloworld.js Hello World
If you open helloworld.js in the editor, you’ll see that it doesn’t look all that different from helloworld.ts. The type information has been removed and let has been changed to var.
var message = 'Hello World'; console.log(message);
Configuring TypeScript Compiler Options
Sometimes, you may want to override the default compiler settings, in order to set the JS version, or output folder, etc. There are a couple of ways to go about it. The first is to include the corresponding flags via the command line. Here’s one that sets the JS version (target) to ES6 and the module specification to CommonJS. It’s the standard used in Node.js for working with modules. It lets you do things like add modules via the require function, i.e.
const package = require('module-name').
tsc helloworld.ts --target es6 --module commonjs
If you find yourself using the same settings a lot, a better approach is to add them to a tsconfig.json file. Here’s one that sets the target to es5:
Debugging Your Scripts
- You can supply the
--sourceMapflag to the compiler:
tsc helloworld.ts --sourceMap
- or, you can add
"sourceMap": trueto your tsconfig.json file.
By doing so, the tsc command will generate a helloworld.js.map file in the same directory as the helloworld.js file.
To run the script in debug mode, either:
- Click the Run and Debug icon on the vertical button bar on the far left and click the Run and Debug button:
- Alternatively, the F5 key starts the script in debug mode with one key stroke!
If you set a breakpoint by clicking in the margin on the left of the line number in the Code Editor and then run in debug mode, you’ll see the script execution stop:
All the usual debug information will appear in the left-hand pane, including Variables, Call Stack, and Watches.
Give yourself a pat on the back; you’re now officially a TypeScript developer. As such, you can now enforce strict typing in all your scripts. You’ll also get variable scoping, proper classes, and many other benefits for free. TypeScript is a language that is constantly evolving, so you’ll be plenty busy keeping up with the latest features.