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:
- Refresh your package list by running:
company-modeinstalled as well (it’s an optional package for a package we will install later).
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
js2-mode is another popular one.
typescript-mode in the melpa repository:
None the less, it changes code from looking like:
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.)
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
- source jumping
- and more!
Almost everything I am jealous of VSCode. Now I can get these features inside Emacs (within a terminal!)
Add this to your
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:
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 provides a quick key to jump to a function’s original
implemenation using the:
M-. key. To navigate back, use:
Here TIDE shows where a private declaration is first made, then the function import’s source, and then a function’s source.
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.