Setting up emacs for typescript development

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:

1
2
3
    (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:

1
node -v

v15.12.0

Installing tide

Throw this in your emacs.el:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  (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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
  (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

1
2
3
  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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
    "compilerOptions": {
        "plugins": [
            {
                "name": "typescript-deno-plugin",
                "enable": true, // default is `true`
                "importmap": "import_map.json"
            }
        ]
    }
}

Lets create a file: test.tsx

1
2
3
4
5
6
7
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.

Setting up emacs for typescript development

Prerecs

Installing tide

Creating a sample project

References