howto

Setting up emacs for typescript development

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

tags
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:

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.

Previously

howto

CLOCViz

Run some vizualizations on a repo

tags
git
cloc
clocviz

Next

howto

SQLite in the browser

pushing everything to the client

tags
deno
sqlite
browser
static_sites
wasm