Setting up emacs for typescript development

If we are going to bother with static types, might as well use them

Published April 13, 2021 #emacs, #typescript, #tide

I've been playing with deno and typescript, so I thought I'd document how to setup a basic tide environment with emacs.

Prerecs

Things will go better if you have nativejson support in your emacs build. I build from scratch which is super easy, but to check what you have you can run the following elisp:

    (if (functionp 'json-serialize)
        (message "Native JSON is available")
        (message "Native JSON is *not* available"))
Native JSON is available

You also will need Node > 0.12.0, which you can test with:

node -v
v15.12.0

Installing tide

Throw this in your emacs.el:

  (use-package tide :ensure t)
  (use-package company :ensure t)
  (use-package flycheck :ensure t)

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

And also tell it about tsx files:

  (require 'web-mode)

  (add-to-list 'auto-mode-alist '("\\.tsx\\'" . web-mode))
  (add-hook 'web-mode-hook
            (lambda ()
              (when (string-equal "tsx" (file-name-extension buffer-file-name))
                (setup-tide-mode))))

  ;; enable typescript - tslint checker
  (flycheck-add-mode 'typescript-tslint 'web-mode)

Creating a sample project

Lets create a sample project

  cd $(mktemp -d)
  npm init -y
  npm install --save-dev typescript-deno-plugin typescript

And then create a tsconfig.json file which tells typescript about deno:

{
    "compilerOptions": {
        "plugins": [
            {
                "name": "typescript-deno-plugin",
                "enable": true, // default is `true`
                "importmap": "import_map.json"
            }
        ]
    }
}

Lets create a file: test.tsx

console.log("Welcome to deno!")

const url = Deno.args[0];
const res = await fetch(url);

const body = new Uint8Array(await res.arrayBuffer());
await Deno.stdout.write(body);

And put your cursor over Deno.stdout and press M-. to navigate to the definition.

References

  1. https://github.com/ananthakumaran/tide

  2. https://deno.land/manual@v1.8.0/getting_started/setup_your_environment#emacs

Read next

Previous Post: CLOCViz

See also

Emacs Blog Writing and Navigation Mode

emacs and hugo sitting in a tree

This blog is basically my labnotes where I explore different parts of technology. Almost all of my coding related activity starts off in this repo, while I explore different things to see how they work. I have a lot of things in drafts, and I wanted to learn how to build a simple emacs interface to let me navigate around my file system. I couldn't find any good documentation on how to do anything with tabulated-list-mode so I spend the evening poking around and seeing how it works.

Read more

Installing emacs on buster

so many ways to get software

I've already written about installing emacs-snapshot on debian buster, here are two additional ways. The first is to use flatpak, and the other is to build from source. Flatpack sudo apt-get install flatpak sudo apt install gnome-software-plugin-flatpak sudo flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo Then: sudo flatpak install flathub org.gnu.emacs And running it: flatpak run org.gnu.emacs You can then pin it in your dock and you are good to go.

Read more

Getting Websters

More glorious language

A few years ago I read a great post about the value of a good dictionary, which I installed on my laptop and then promptly forgot about. The post is very moving, and I recommend checking it out. It was recently mentioned on the planet emacs blog circuit and so I thought I'd document how to get it up and running on my laptop. Also I don't understand what the appeal of John McPhee's writing, I've tried a few of his books but found them all so plodding.

Read more