#+TITLE: TypeScript layer
#+HTML_HEAD_EXTRA: <link rel="stylesheet" type="text/css" href="../../../css/readtheorg.css" />

[[file:img/TypeScript.png]]

* Table of Contents                                         :TOC_4_org:noexport:
 - [[Description][Description]]
 - [[Install][Install]]
   - [[Pre-requisites][Pre-requisites]]
   - [[Layer][Layer]]
   - [[Notes][Notes]]
 - [[Key bindings][Key bindings]]
   - [[Typescript Major Mode][Typescript Major Mode]]
   - [[Reference Major Mode                          ][Reference Major Mode                          ]]

* Description

This layer adds support for TypeScript and TSX editing.

This layer provides:
- ElDoc
- Auto complete
- Flycheck
- Jump to definition, Jump to type definition
- Find occurrences
- Rename symbol
- Imenu
- linting
- tsx mode

* Install
** Pre-requisites
You will need =node.js v0.12.0= or greater

If you want linting run:  =npm instell -g typescript=  =npm install -g tslint=  

For best results, make sure that the =auto-completion= (company) and =html= layers are enabled.

** Layer
To use this configuration layer, add it to your =~/.spacemacs=. You will need to
add =typescript= to the existing =dotspacemacs-configuration-layers= list in this
file.

#+BEGIN_SRC emacs-lisp
(setq-default dotspacemacs-configuration-layers '(typescript))
#+END_SRC

or if you don't need linting.

#+BEGIN_SRC emacs-lisp
(setq-default dotspacemacs-configuration-layers '(
  (typescript :variables 
              typescript-use-tslint nil))
#+END_SRC

** Notes

This layer uses [[https://github.com/ananthakumaran/tide][tide]] and [[https://github.com/Simplify/flycheck-typescript-tslint/][flycheck-typescript-tslint]]

Make sure to add [[https://github.com/Microsoft/TypeScript/wiki/tsconfig.json][tsconfig.json]] in the project root folder.

tsserver mangles output sometimes [[https://github.com/Microsoft/TypeScript/issues/2758][issue - #2758]], which will result in json parse error. Try node version 0.12.x if you get this error

Currently tsserver doesn't pickup tsconfig.json file changes. You might need to restart server after editing it.

* Key bindings

** Typescript Major Mode

| Key Binding | Description                      |
|-------------+----------------------------------|
| ~SPC g b~   | jump back                        |
| ~SPC g g~   | jump to entity's definition      |
| ~SPC g t~   | jump to entity's type definition |
| ~SPC g u~   | references                       |
| ~SPC h h~   | documentation at point           |
| ~SPC r r~   | rename symbol                    |
| ~SPC s r~   | restart server                   |


** Reference Major Mode                          

| Key Binding | Description                      |
|-------------+----------------------------------|
| ~C-j~       | find previous reference          |
| ~C-k~       | find next reference              |
| ~C-l~       | goto reference                   |