Red Green Repeat Adventures of a Spec Driven Junkie

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.


  • Working Emacs-25+
  • The following package repositories setup:
(setq package-archives
   '(("marmalade" . "")
     ("melpa" . "")
     ("melpa-stable" . "")))
  • Refresh your package list by running:
  • 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:

typescript-mode package

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

None the less, it changes code from looking like:

TypeScript code in fundamental-mode


TypeScript code in typescript-mode

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,, 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 ()
  (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:

TIDE type checking


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

TIDE autocomplete

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.

TIDE source jumping


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.