# 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](https://code.visualstudio.com/) as the editor and [Bun](https://bun.sh/) 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](https://code.visualstudio.com/download).
2. Install the [Bun for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=oven.bun-vscode) extension.
3. Install the [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension.
4. Install [Bun](https://bun.sh/docs/installation).
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](https://code.visualstudio.com/download).

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](https://marketplace.visualstudio.com/items?itemName=oven.bun-vscode) extension.

For this guide, the only extension I recommend installing right away is [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode). 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](https://bun.sh/docs/installation). 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.

![create new file screenshot - hello_world.ts](https://cdn.hashnode.com/uploads/covers/68c18612c6c87cdde03a45b1/59cb84b8-f963-4f44-bafc-2698743a4887.png align="center")

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`). 

```typescript
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*.

![location of debug pane and run and debug commands](https://cdn.hashnode.com/uploads/covers/68c18612c6c87cdde03a45b1/5e7a62b7-1aea-47d1-8f05-500958648e2c.png align="center")

## 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 |