TypeScript in Emacs

I am developing more in Angular using TypeScript and I want to improve TypeScript experience in Emacs.

Honestly, I am secretly jealous of coworkers using VSCode, that has all the type checking, auto-completion, and source jumping.

I was going to bite the bullet and start using VSCode (it’s free after all!) but I wanted to check out what’s in Emacs first, and honestly, I’m pretty impressed with the TypeScript integration in Emacs.

Requirements

• Working Emacs-25+
• The following package repositories setup:

(setq package-archives
   '(("marmalade" . "http://marmalade-repo.org/packages/")
     ("melpa" . "http://melpa.org/packages/")
     ("melpa-stable" . "https://stable.melpa.org/packages/")))
(package-initialize)

• Refresh your package list by running:

package-refresh-contents

• have company-mode installed as well (it’s an optional package for a package we will install later).
  • run: M-x package-install [ret] company-mode [ret]

I will provide with additional installation instructions for each package.

Install TypeScript Mode

With any new language I work with, I look at what native support is already built-in for Emacs. This means I install the <insert language>-mode package. Ruby has ruby-mode, JavaScript has multiple packages: javascript-mode is the default, js2-mode is another popular one.

TypeScript has: typescript-mode in the melpa repository:

This adds syntax highlighting and indenting, which sounds like it inherits from javascript-mode package.

None the less, it changes code from looking like:

to:

Not a fantastic upgrade, but a slight improvement. Honestly, I do not need a rainbow of colors in my code. Auto indenting is a higher priority to me (I cannot stand manually indenting anymore.)

Install TIDE

On the Official TypeScript language website, https://www.typescriptlang.org, they list Emacs support and the link goes directly to the TIDE project.

TIDE stands for:

• T ypescript
• I nteractive
• D evelopment
• E nvironment

and it basically puts an interface between the TypeScript tools (tsc, tsserver, etc.) and Emacs.

TIDE adds to Emacs:

• type checking
• autocompletion
• source jumping
• and more!

Almost everything I am jealous of VSCode. Now I can get these features inside Emacs (within a terminal!)

Emacs Setup

Add this to your init.el:

(defun setup-tide-mode ()
  (interactive)
  (tide-setup)
  (flycheck-mode +1)
  (setq flycheck-check-syntax-automatically '(save mode-enabled))
  (eldoc-mode +1)
  (tide-hl-identifier-mode +1)
  ;; company is an optional dependency. You have to
  ;; install it separately via package-install
  ;; `M-x package-install [ret] company`
  (company-mode +1))

;; aligns annotation to the right hand side
(setq company-tooltip-align-annotations t)

;; formats the buffer before saving
(add-hook 'before-save-hook 'tide-format-before-save)

(add-hook 'typescript-mode-hook #'setup-tide-mode)

Execute each function using C-x C-e or (gasp!) restart Emacs.

Show don’t Tell!

Instead of talking about it, I will show how TIDE implements these features. I am working with a copy of an Angular project: angular-service if you would like to follow along or try out in your system.

I demonstrate TIDE using Emacs within a terminal setting, so these features will work anywhere Emacs can run.

Inline Type Checking

When functions have types assigned to them, return only the result type. If a function is to return a number, TypeScript expects it to return a number.

In this case, TIDE indicates the function returns the wrong type and displays an error:

Autocomplete

When using other classes from another class, TIDE can show what functions are in the other class and provide a list of possible functions:

Source Jumping

TIDE provides a quick key to jump to a function’s original implemenation using the: M-. key. To navigate back, use: M-, key.

Here TIDE shows where a private declaration is first made, then the function import’s source, and then a function’s source.

Conclusion

I feel I am just touching the surface of Emacs’ TypeScrpt support with typescript-mode and TIDE. With these two packages, I feel there’s less of a need for me to use VSCode as major features like: type checking, autocomplete, and source jumping.

Everytime I think I want to leave Emacs, I find another way to love it more.