ハクソク

世界を動かす技術を、日本語で。

簡潔なTypeScript入門書

135日前原文(github.com)

概要

  • The Concise TypeScript Book はTypeScriptの機能を網羅的かつ簡潔に解説
  • 初心者 から 上級者 まで役立つ無料・オープンソース書籍
  • 公式サイトやEpub形式で ダウンロード可能
  • TypeScript 5.2に対応し、最新の言語機能までカバー
  • 著者はSimone Poggiali、国際的に活躍するエンジニア

The Concise TypeScript Book 概要

  • TypeScriptの全体像 と強力な型システム、最新機能の解説書
  • 無料かつオープンソース、高品質な技術教育の普及を目指す
  • 初心者・経験者問わず、スキルアップやリファレンスに最適
  • 書籍が役立った場合は 寄付やコーヒーの差し入れ で著者を支援可能
  • 中国語・イタリア語 等への翻訳版も公開

ダウンロード・閲覧方法

目次（抜粋）

  • TypeScript入門・導入方法
  • 型システム の探求
  • 型推論・型アサーション
  • 型の拡張・リテラル型・ユニオン型・インターセクション型
  • インターフェース・クラス・ジェネリクス
  • ユーティリティ型・型操作
  • エラー処理・非同期処理・ミックスイン
  • ES6/ES7新機能・JSX・モジュール対応
  • 最新のTypeScript言語仕様 （5.2対応）

著者について

  • Simone Poggiali、1990年代から活躍するエンジニア
  • HelloFresh, Siemens, O2, Leroy Merlin, Snowplow 等でのプロジェクト経験
  • LinkedIn ：Simone Poggiali
  • GitHub ：gibbok
  • X.com ：gibbok_coding
  • メール ：gibbok.coding📧gmail.com

TypeScriptとは

  • TypeScript は JavaScript を拡張した 強い型付け のプログラミング言語
  • Anders Hejlsberg が2012年に設計、 Microsoft がOSSとして開発・保守
  • .ts/.tsxファイル で記述し、 JavaScript へコンパイル可能
  • 関数型・ジェネリック・オブジェクト指向 など複数のパラダイムをサポート

TypeScriptを使う理由

  • 静的型付け によるバグ防止・実行前のエラー発見
  • 型推論 や ES6/ES7機能 の活用
  • クロスプラットフォーム・クロスブラウザ 対応
  • IntelliSense 等のツール連携強化

TypeScriptとJavaScriptの違い

  • TypeScript は JavaScript のスーパーセット
  • .ts/.tsx （TypeScript）、 .js/.jsx （JavaScript）で拡張子が異なる
  • 型アノテーション を追加すると、JavaScriptランタイムではそのまま実行不可
  • 例： 
    const sum = (a: number, b: number): number => a + b;
  • 型情報 はコンパイル時のみ有効、実行時には消失

型システムの特徴

  • 型エラー検出 と JavaScriptへのコンパイル を独立して実施
  • 型エラーがあっても JavaScriptコード出力可能
  • 型安全性 を重視し、不正な演算やプロパティアクセスをコンパイル時に検出
  • ランタイム型判定 にはタグ付きユニオン（tagged union）等を利用
    • 例： 
      interface Dog { kind: 'dog'; bark: () => void; }
interface Cat { kind: 'cat'; meow: () => void; }
type Animal = Dog | Cat;
const makeNoise = (animal: Animal) => {
  if (animal.kind === 'dog') animal.bark();
  else animal.meow();
};

TypeScriptの実行・型消失

  • 型情報は実行時に完全消失
  • クラス は型・値両方として利用可能
  • API型の誤解釈 による型不一致にも注意

まとめ

  • The Concise TypeScript Book はTypeScript学習・実務の強力なリファレンス
  • 無料・オープンソース で常に最新情報を提供
  • 多言語対応 や豊富な実例で、幅広い開発者層をサポート

Hackerたちの意見

2023年に人気 (215ポイント、91コメント) https://news.ycombinator.com/item?id=36641634

61章もある本を「簡潔」って呼ぶのはどうかな。

└

JavaScriptのサブセットが含まれてないから、確かにかなり簡潔だね。

└

本の章みたいにはなってないよ。例えば、https://gibbok.github.io/typescript-book/book/strictnullchec... は1段落、https://gibbok.github.io/typescript-book/book/void-type/ は1文と3行の例が1つ。ほとんどの「章」はそれ以上のものじゃない。1～2段落と1～2個のコード例って感じ。

公式のTypeScriptハンドブックについて、コミュニティの意見が知りたいな。 https://www.typescriptlang.org/docs/handbook/intro.html

└

自分の意見だけど、コミュニティの代表じゃないよ：何かを調べるときには最初に見るべきリソースだと思う。大体はわかりやすくて役立つけど、ちょっと整理が混乱してるし、かなり不完全な感じがする。チュートリアルやガイドブックというよりは、リファレンスって感じだね。

└

今まで見た中でこれが一番好き。実際に簡潔だし。

└

いいけど、すごく簡単な概要しかなくて、説明がないね。

└

オブジェクト指向のバックグラウンドを持ってる人には、まずこのページを見せて、TypeScriptがそのプログラミングパラダイムで使うのがベストっていう誤解を正すようにしてる。https://www.typescriptlang.org/docs/handbook/typescript-in-5...

└

TypeScriptのハンドブックが大好きだけど、例が「実行可能」だといいなと思ってた。どうやら、TypeScriptコンパイラはブラウザでの簡単なコードスニペットならかなり速く動くみたいだから、https://ts.coach を作ったよ（ブラウザで実行できるコード例付きのTypeScriptハンドブック + 即時型チェック）。

TypeScriptが「成功」した理由はわかるけど、もしHaxeが初期の頃にもっと人気が出てたら、どんなウェブになってたんだろうっていつも考える。俺の予想では、ネイティブコードのバンドラーがもっと早く登場して、全体的にもっと速くて頑丈なツールがあったんじゃないかな。今になってやっとesbuildみたいなプロジェクトが出てきて、TSもコンパイル言語（Go）で書かれるようになったし、Rustでの他の試みもある。HaxeがJavaScript自体にどんな影響を与えてたかも見てみたかったな。

└

それかLua… :>

└

Java AppletsやFlash、そしてElmについても同じことが言えるね。もう経験済みだし、このアプローチはうまくいかない。TypeScriptの開発者たちは早い段階で、人々が新しいエコシステムを必要としているわけじゃなく、開発を止めずに移行できる道が必要だって気づいたんだよね。

└

TypeScriptコンパイラーがGoで書き直されるって意味だと思ったんだけど。（最初は全然違うことかと思った。）

PDFも提供してほしいな。HTML形式の本は、どこまで読んだか把握できないから読めないんだ。ブラウザタブを開けっぱなしにするしかないけど、これだと間違って閉じちゃうこともあるし、進捗をブックマークするのも面倒でブックマークがごちゃごちゃしちゃう。PDFならそのまま置いておけるし、リーダーが最後に読んだページを覚えてくれるから楽だよ。PDFだと進捗感もあるしね。

└

https://github.com/gibbok/typescript-book/tree/main/download...

└

ダウンロードにPDFがあるし、KindleやKoboみたいな電子書籍リーダーがあればepub版もあるよ。

簡潔な技術文書を読むと、ドキュメントがすべてをカバーしようとすることが多いのがわかる。ほとんどの開発者は、詳細な情報よりもガイダンスを求めてる。開発者は、どこに時間をかけるべきか、どこをざっと流してもいいのかを知りたいし、問題や困難に直面する場所も知りたい。簡潔な技術文書を作成するためのシンプルなフレームワークは、ドキュメントを3つのセクションに分けること。地図：このドキュメントがどんな問題を助けてくれるかを特定する。デフォルト：大多数の人が経験することと、その対処法を理解する。例外：デフォルトの推奨から外れるべき時を特定する。簡潔なドキュメントは、エッジケースを排除することで明確さを提供するのが得意。ユーザーがドキュメントをより明確に理解すればするほど、ユーザーが最も混乱している時にドキュメントが役立つ。危険なのは、ドキュメント内の情報を簡略化しすぎて、ユーザーが多くの情報を欠いたまま、助けを求める方法がない状況に陥ること。短い技術文書が公式の技術文書よりも役立った状況って、どんなのがあった？

└

ドキュメントって一枚岩じゃないから、特定のプロジェクトに関わる人たちに役立つように、サブセットに分ける必要があるんだよね。https://diataxis.fr/ （元はhttps://docs.divio.com/documentation-system/で開発された）では、ドキュメントを4つのタイプに分けてるよ。 - チュートリアル - 説明 - ハウツーガイド - 参考資料 自分のドキュメントも、こういう風に分けたらかなり良くなった。

└

あなたが言ってることは、Diátaxisにすごく似てるね。これは技術文書を書くための戦略で、文書をチュートリアル、説明、ハウツー、リファレンスの4つのカテゴリーに分けるんだ。カテゴリーは、内容が行動を促すか認知を促すか、そして内容が読者のアプリケーションやスキル習得に役立つかどうかという、かなりシンプルなヒューリスティックから派生してるよ。僕はこの方法が好きで、ほとんど誰でも午後のうちに学べるくらい簡単なんだ。

└

あなたのコメントスタイル、面白いね。~ たくさんの文が一つの段落を占めてる。時々「~」で終わるし。たいてい（いつも？）あなたの投稿は質問で終わるよね。明らかに、あなたは投稿に何らかのフレームワークを使ってるみたい。詳しく教えてくれる？~

└

そんな適当なコメントは他に行ってくれ。ここHNでは違うことを目指してるんだ。

TypeScriptのいくつかの利点： > ES6とES7の機能にアクセスできる > クロスプラットフォームとクロスブラウザの互換性 うわ、TSを避けてるからES6とES7が使えないなんて知らなかったし、俺のバニラJavaScriptも全ブラウザで動かないんだ :( 本の技術を過剰に宣伝するのは仕方ないけど、話してることを盛りすぎるとちょっと嫌な気分になるね。

└

要するに、ES6やES7を使ってコードを書けるし、TypeScriptコンパイラーを使えば、古いブラウザでも動くようにES6やES5互換のコードを出力できるってこと。TypeScriptじゃないESコードでもそれはできるけど、別のトランスパイラーを使わなきゃいけない。TypeScriptなら、どっちにしてもコードをコンパイルする必要があるから「タダで」それができるんだよね。

シェアしてくれてありがとう、これは役立つね。著者におめでとうと言いたいし、感謝も。1つフィードバックがあるんだけど、キーボードでTypeScriptを打っているとき、強い型付けの言語を使って型を打ってるんだよね。初心者には「type」が名詞や動詞としての意味、数学的な文脈での意味、そして「strong」の概念についての定義があるといいと思う。

この本で欠けているのは理由付けだね。https://gibbok.github.io/typescript-book/book/differences-be... で、型とインターフェースがあるのはわかってる。1つは宣言のマージをサポートして、もう1つはしない。どちらも他を拡張できるけど、やり方が違う。でも、なんで？なんで2つあるの？いつ使うべき？どちらかが優れているの？

└

デザイン決定の背後にある動機を特定するのは、外部の誰かができることでも、すべきことでもないよね。著者ができるのは、ドキュメントにあることを反響するか（あれば）、物事がそうなっている理由について自分の推測をすることくらいだと思う。

もし興味がある人がいたら、このロードマップがあるよ。https://nemorize.com/roadmaps/typescript