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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shopify-1.gitbook.io/typescript/introduction/setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.