# Setup

The following instructions will get you up and running with TypeScript so you can try out the examples presented in this tutorial.

## Installing the TypeScript compiler

The TypeScript compiler is responsible for converting TypeScript code into JavaScript that can be understood by browsers (or Node.js® on the server).

Installing the command line compiler is as easy as running the following `npm` command in your terminal:

```
npm install -g typescript
```

## TypeScript in the editor

Unless you’re using [Visual Studio Code](https://code.visualstudio.com/) or [alm](http://alm.tools/) (which were both written in TypeScript), you’re going to need a syntax highlighting add-on for your code editor, since most editors don’t recognize TypeScript natively (yet).

Here are some syntax highlighting add-ons for some popular editors:

* [Sublime Text](https://github.com/Microsoft/TypeScript-Sublime-Plugin)
* [Atom](https://atom.io/packages/atom-typescript)
* [Vim](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support#vim)
* [Emacs](https://github.com/ananthakumaran/tide)
* [WebStorm](https://www.jetbrains.com/webstorm/)
* [Eclipse](https://github.com/palantir/eclipse-typescript)
* [Visual Studio 2017](https://www.microsoft.com/en-us/download/details.aspx?id=55258)
* [Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48593)

## TypeScript playground 🏸

Using a live scratchpad that runs your code immediately as you type and displays the execution results, can be extremely helpful when learning TypeScript. Here are a few options:

* [Official TypeScript playground](http://www.typescriptlang.org/play/index.html) (in the browser)
* [Quokka.js](https://quokkajs.com/) (*recommended*, in select editors)

## `tsconfig.json`

The presence of a `tsconfig.json` file in a directory indicates that the directory is the root of a TypeScript project. Its purpose is to specify the compiler options and files required by the project.

For example:

```javascript
{
  "compilerOptions": {
    "target": "es2016",
    "module": "esnext",
    "moduleResolution": "node",
    "strictNullChecks": true,
    "noImplicitAny": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "noEmit": true
  },
  "include": [
    "./config/typescript/**/*",
    "./app/**/*",
    "./client/**/*",
    "./server/**/*",
    "./packages/**/*",
    "./tests/**/*"
  ],
  "exclude": [
    "./node_modules/**/*",
    "./packages/@shopify/*/node_modules/**/*"
  ]
}
```

### Details

* If the `"compilerOptions"` property is omitted, the compiler’s defaults are used. See the full list of supported compiler options [here](http://www.typescriptlang.org/docs/handbook/compiler-options.html).
* The `"include"` and `"exclude"` properties take a list of glob-like file patterns.

[Read more about tsconfig.json in the official TypeScript docs.](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html)