厳選TypeScript 〜おすすめしたいライブラリ、ツール、ノウハウ、情報源のリンク集〜

個人的にTypeScriptプロジェクトで使って良かったと感じたライブラリやツール、役立ったノウハウ・情報源へのリンクをまとめていきます。随時更新します。

• 記事更新時に通知を受け取りたい方はこの投稿を「ストック」してください。
• 追加された内容は更新履歴をご覧ください。

書籍

• 『実践TypeScript ~BFFとNext.js&Nuxt.jsの型定義~』 - JavaScriptからTypeScriptに来た人が読むと、JSとTSの差分を学ぶことができる本。
• 『JavaScript Primer: ECMAScript 2019時代のJavaScript入門書』 - すでにプログラミング経験がある人が読むとJavaScriptの文法や機能を中心に学ぶことができる本。TypeScriptを書くにもJavaScriptの知識が必要不可欠なので、雰囲気でJSを書いてきた人やちゃんとおさらいしたい人におすすめ。ブラウザで無償で読める。
• 現代の JavaScript チュートリアル javascript.info

ツール

• 凡例
  • ✶ 気になってるだけで使ったことがない

本家製のツール

• TypeScript playground - ブラウザ上でTypeScriptが手軽に試せる。

NPM

• npmhub - GitHubリポジトリのpackage.jsonを解釈して、どのパッケージを使っているかをブラウザ上に表示してくれるChrome拡張(Firefox拡張もある)。
• sort-package-json - package.jsonの並び順を自動的に正してくれるツール
• npm-check-updates - 依存するパッケージの新しいバージョン(アップグレード候補)を教えてくれ、選択したパッケージの新バージョン番号をpackage.jsonに書き込んでくれるツール。別名ncuコマンド。yarn upgradeは、package.jsonの内容は変えてくれないため、かゆいところに手が届くツール。

DX

• ts-node - Node.jsでTypeScriptコードをコンパイルなしに直接実行できる。REPLも。
• ts-node-dev - ソースコード変更を検知して自動再起動する機能をts-nodeに付け足したもの。

モノレポ

• lerna - ひとつのGitリポジトリに複数のNodeモジュールを入れる開発スタイルを快適にさせてくれる。yarn workspacesの上位互換的な存在。

コード品質

• urish/typewiz✶ - 実行時の型情報を学習し、型情報を自動的にTypeScriptコードに追記してくれるツール。
  • 解説ブログ: Manual Typing is No Fun: Introducing TypeWiz! - Uri Shaked - Medium
• lint-staged - git commitの対象となったファイルに対して、prettier, eslintなど任意のリントコマンドを実行し、修正されたコードをコミットに自動的に含めてくれて便利。

ドキュメント生成

• docsify✶ - Markdownで書いたドキュメントをウェブサイトにするツール。GitBookと違い、静的ファイルを生成しない。
• Docz✶ - Gatsbyをベースに作られたドキュメント生成ツール。MDXに対応している。
• typedoc - TypeScriptコードを解析し、APIリファレンスを自動生成してくれるツール。とてもいいという訳ではないが、今のところこれしかない。

型定義の自動生成

• Transform - JSONやJSON Schema、GraphQL SchemaからTypeScriptのinterfaceを生成してくれるGUIツール。紹介記事: 42種ものデータ変形がブラウザだけでできる『transform』が便利そう - Qiita

手法

Conventional Commits

• Conventional Commits - 機械的に処理しやすいコミットメッセージの書き方についての規約
• commitizen - インタラクティブCLIで質問に答えていく形で、Conventional Commits準拠のコミットメッセージを生成してくれるツール。git czというコマンドが生える。
• commitlint - コミットメッセージがConventional Commitsに準拠しているかチェックするツール。
• lerna - モノレポを実現するためのツールだが、Conventional Commitsに対応していて、パッケージのバージョン採番を自動でやってくれる。

ノウハウ

TypeScriptの言語仕様

• TypeScriptのObject型とobject型は同じ……と思うじゃん? - Qiita
• interfaceと型エイリアスの共通点と相違点
  • TypeScriptのInterfaceとTypeの比較 - Qiita
  • TypeScript interface vs. type | pawelgrzybek.com
• 型ガード(type guards)
  • TypeScript: interfaceにはinstanceofが使えないので、ユーザ定義タイプガードで対応する - Qiita
• 制御フローベースの型分析
  • TypeScript 2.0: Control Flow Based Type Analysis — Marius Schulz
  • TypeScript で any や as を使わなくても型チェックをすり抜けてしまう話(Optional Propertyの危険性) - Qiita
• 関数オーバーロード
  • TypeScriptの関数オーバーロードの単純な例 - Qiita
• クラスとインターフェイス
  • TypeScriptのclassは暗黙のうちにinterfaceを定義しているのと同義 - Qiita
• Nominal Typing
  • TypeScript: 異なる2つの型システム「公称型」と「構造的部分型」 - Qiita
  • TypeScriptでNominal Typingを実現する4つの方法 - Qiita
• unknownとanyの相違点
  • TypeScript 3.0: The unknown Type — Marius Schulz
• ジェネリクス
  • ジェネリクスがどういう問題を解決してくれるのか？を学ぶ
    • ジェネリクス - サバイバルTypeScript
    • 4歳娘「パパ、具体的な名前をつけないで？」 - Qiita
• TypeScript の流儀 - Speaker Deck - コンパイラの型推論器が型をどう考え、どういうコードを書いたら意図がコンパイラによく伝わるかがよく分かるスライド。『実践TypeScript ~BFFとNext.js&Nuxt.jsの型定義~』の著者Takepepeさん作。

JavaScript

• 4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them - 4種類のメモリリークとその対処法

NPM

• Typescript: Working with Paths, Packages and Yarn Workspaces - Medium - TypeScriptのパスエイリアス(tsconfig.jsonのpath)やyarn workspacesを使ったモノレポプロジェクトの作り方
• How to make a beautiful, tiny npm package and publish it - Medium - npmにパッケージを公開する最小の方法。初めてnpmパッケージを公開するときに読むとわかりすい。最小限と言うだけあって、やることはアカウント作成とpackage.jsonのnameとversionの設定だけ。
• Node Hero - Node.js Project Structure Tutorial | @RisingStack - Node.jsプロジェクトのディレクトリ構成のDOとDON'T。
• Renovate | Automated Dependency Updates - 依存するNPMパッケージの更新をプルリクエストで提案してくれるボット

Node.js

• sindresorhus/awesome-nodejs: Delightful Node.js packages and resources(邦訳 Awesome Node.js : 素晴しい Node.js フレームワーク・ライブラリ・ソフトウェア・リソースの数々 - Qiita)
• How to Debug a Node.js app in a Docker Container | @RisingStack - Dockerコンテナ内のNodeインスペクタをChrome Developer ToolsやVisual Studio Codeから使ってデバッグする方法。
• 🛑 You don't need passport.js - Guide to node.js authentication ✌️ - JWT(JSON Web Token)を使った認証の理論と実践。
• Debugging Node.js Applications for Memory Leaks | Toptal - Node.jsアプリケーションのメモリリークの原因追跡方法やそれをサポートするツールについて。
• Node.js Post-Mortem Diagnostics & Debugging | @RisingStack - Node.jsがクラッシュしたときにレポートを残してくれるnode-reportモジュールの使用法。

Node.jsでのログ/ロギング

• A Guide to Node.js Logging - Twilio - ロギングの実践術と、ロギングライブラリの使い分け。debugモジュールとDEBUG環境変数を用いた標準的なロギング術。
• How to Get Node.js Logging Right | @RisingStack - 正しいログのとり方。ログの4大要件とは。モジュール、アプリケーション、分散システムでのロギングアプローチの違いとは。

Express.js

• Node.js Security Checklist | @RisingStack - Node.jsのセキュリティチェックリスト。Express公式サイトからも参照されている必読文献。

ライブラリ

TypeScriptプロジェクトでも使いやすいNodeモジュールを紹介します。

• 凡例
  • † TypeScript製
  • ✶ 気になってるだけで使ったことがない

ライブラリのキュレーションメディア

• Best of JavaScript - 人気の高いJS/TSライブラリをキュレーティングしているサイト。npm公式の検索より筋のいいライブラリに出会いやすい。

日付・時刻

• date-fns - 標準のDateを操作するための便利な日付関数群

CSV

• csv - CSVの読み書きライブラリ。 TypeScript製のfast-csvのほうが型宣言がしっかりしている。
• fast-csv† - NodeのためのCSV読み書きライブラリ。

CLI

• oclif† - シングルバイナリのデプロイまで考えられたHeroku発のCLIフレームワーク。
• gluegun† - フルスタックCLIフレームワーク oclifのほうがフラグなどの型安全だったり、gluegunが提供しているtoolboxもoclifに同等のものが同梱されているため、gluegunを選ぶ理由がないと感じた。

DOM

• cheerio - サーバサイドでjQuery風のDSLでHTMLを操作できる

ブログ

TypeScript関連ブログ

• Latest Posts — Marius Schulz

JavaScript関連ブログ

• RisingStack Engineering - Node.js Tutorials & Resources

Twitter

• TypeScript Daily（@TypeScriptDaily）さん / Twitter