Getting Started: TypeScript

Introduction

TypeScript is a programming language based on JavaScript. That means regular JavaScript is valid TypeScript, but TypeScript adds extra features on top of it. The main feature TypeScript adds is type safety. Type safety allows a developer to clearly describe intent by specifying that a value should be a certain type, such as a string or a number.

Before we start writing TypeScript, we need to set up a small working environment. This means installing a code editor where we can write our files and a runtime that can run our code. For this guide, we will use Visual Studio Code as the editor and Bun as the runtime. Bun allows us to natively run, or execute, TypeScript files directly. Other runtimes may require you to convert TypeScript files (.ts) to JavaScript files (.js) before you can execute any code.

There is a quick reference for reserved words at the end of the guide.

TL;DR

1. Install Visual Studio Code.
2. Install the Bun for Visual Studio Code extension.
3. Install the Prettier extension.
4. Install Bun.
5. Open a new terminal and run bun --version.
6. Open Visual Studio Code.
7. Create a new file that ends with .ts.
8. Add console.log('Hello, World!'); to the file.
9. Save the file.
10. Open the Command Palette with cmd + shift + p or ctrl + shift + p.
11. Search for Bun: Run File and press enter.

Setup

Installing VS Code

Start by downloading and installing Visual Studio Code.

Once Visual Studio Code is installed, there is not much extra setup needed for TypeScript. VS Code already includes TypeScript support, which means it can understand .ts files, show helpful errors, and provide autocomplete while we write code.

To run a TypeScript file with Bun from inside VS Code, install the Bun for Visual Studio Code extension.

For this guide, the only extension I recommend installing right away is Prettier. Prettier formats code automatically, which provides opinions for tabs and curly braces. We, as developers, have various opinions about tabs vs spaces and braces.

Installing Bun

Once Visual Studio Code has been installed, we need to install a runtime. To do so we need to open a terminal window. That can be done by searching for terminal in either the Windows Start Menu or using spotlight on Mac.

Installation scripts can be found on Bun's installation page. There you will find a command to run which will download and execute an install script. Once installed, open a new terminal window and execute the command bun --version which will print out a version number to the screen, indicating that Bun has been successfully installed.

Execution

We now need to create a TypeScript file which can be done by opening Visual Studio Code on your machine. Then, like with other editors, click File -> New File, enter in a file name, ensuring that it ends with the proper .ts extension.

Once the file has been created enter the following text into the editor and then save your changes via clicking File -> Save or using the same keyboard shortcut you would use in any other editor (i.e. ctrl + s or cmd + s).

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

Then, to run the file, open the Command Palette.

On Mac, use cmd + shift + p.

On Windows or Linux, use ctrl + shift + p.

Search for Bun: Run File and press enter. That will execute the script and present a terminal window at the bottom of Visual Studio Code with the text Hello, World! displayed as output.

Alternatively, you can run the file through the debugger. You may be presented with an option to select a debugger from a dropdown menu. Be sure to click Bun if you do.

In the image below the debug pane appears to have a bug as the icon. You may be presented with a play icon.

Reserved Keyword Reference

This table is not something to memorize. Memorization will come with time. The table is just a small, non-encompassing map of words TypeScript already has opinions about.

Reserved keywords are words TypeScript already uses for the language. Variable names cannot have the same name as a reserved word. These words are used by the language as logical or descriptive directives.

Keyword	Description	Language
const	Creates a constant variable	JS/TS
let	Creates a block-scoped variable	JS/TS
if	Runs code when a condition is true	JS/TS
else	Runs code when if is false	JS/TS
for	Starts a loop	JS/TS
while	Loops while a condition is true	JS/TS
function	Declares a function	JS/TS
return	Sends a value back	JS/TS
type	Defines a TypeScript type	TS
interface	Defines an object shape	TS
string	Text value type	TS
number	Numeric value type	TS
boolean	True or false value type	TS
null	Represents no value	JS/TS
undefined	Value has not been set	JS/TS
true	Boolean true	JS/TS
false	Boolean false	JS/TS
import	Brings code into a file	JS/TS
export	Shares code from a file	JS/TS
switch	Chooses between cases	JS/TS
case	Defines a switch option	JS/TS
default	Fallback switch option	JS/TS
break	Stops a loop or switch	JS/TS
continue	Skips to the next loop pass	JS/TS
typeof	Gets a value or type shape	JS/TS
as	Treats a value as a type	TS
in	Checks or maps property names	JS/TS
class	Defines a class	JS/TS
new	Creates an object instance	JS/TS
this	Refers to the current object	JS/TS
extends	Inherits from another class	JS/TS
readonly	Prevents reassignment	TS
static	Belongs to the class itself	JS/TS
async	Marks an async function	JS/TS
await	Waits for async work	JS/TS
enum	Defines named constants	TS
instanceof	Checks an object's class	JS/TS