Support Typescript

I had previously only worked with Facebook's Flow. Typescript support in Emacs
is excellent!

1 files changed, 26 insertions, 3 deletions

diff --git a/configs/shared/.emacs.d/wpc/packages/wpc-javascript.el b/configs/shared/.emacs.d/wpc/packages/wpc-javascript.el
index b55e03e00c..bd2b9b49f0 100644
--- a/configs/shared/.emacs.d/wpc/packages/wpc-javascript.el
+++ b/configs/shared/.emacs.d/wpc/packages/wpc-javascript.el
@@ -2,7 +2,9 @@
 ;; Author: William Carroll <wpcarro@gmail.com>
 
 ;;; Commentary:
-;; This module hosts my Javascript tooling preferences
+;; This module hosts my Javascript tooling preferences.  This also includes
+;; tooling for TypeScript and other frontend tooling.  Perhaps this module will
+;; change names to more accurately reflect that.
 ;;
 ;; Depends
 ;; - yarn global add prettier
@@ -11,7 +13,7 @@
 
 ;; Constants
 (defconst wpc/js-hooks
-  '(js-mode-hook js2-mode-hook rjsx-mode-hook)
+  '(js-mode-hook web-mode-hook typescript-mode-hook js2-mode-hook rjsx-mode-hook)
   "All of the commonly used hooks for Javascript buffers.")
 
 (defconst wpc/frontend-hooks
@@ -20,7 +22,8 @@
 
 
 ;; frontend indentation settings
-(setq js-indent-level 2
+(setq typescript-indent-level 2
+      js-indent-level 2
       css-indent-offset 2)
 
 ;; ;; javascript
@@ -51,6 +54,26 @@
   (setq js2-mode-show-parse-errors nil
         js2-mode-show-strict-warnings nil))
 
+(progn
+  (defun tide/setup ()
+    (interactive)
+    (tide-setup)
+    (flycheck-mode 1)
+    (setq flycheck-check-syntax-automatically '(save mode-enabled))
+    (eldoc-mode 1)
+    (tide-hl-identifier-mode 1)
+    (company-mode 1))
+  (use-package tide
+    :config
+    (add-hook 'typescript-mode-hook #'tide/setup))
+  (require 'web-mode)
+  (add-to-list 'auto-mode-alist '("\\.tsx\\'" . web-mode))
+  (add-hook 'web-mode-hook
+            (lambda ()
+              (when (string-equal "tsx" (f-ext buffer-file-name))
+                (tide/setup))))
+  (flycheck-add-mode 'typescript-tslint 'web-mode))
+
 ;; JS autoformatting
 (use-package prettier-js
   :after (rjsx-mode)