仕事ですぐに使える TypeScriptを読んでいく

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考記事

著作権者:フューチャー株式会社(Future Corporation)様

future-architect.github.io

第1章前書き

今日はまず第1章から。

1.1 本ドキュメントの位置づけ

JavaScriptを経由せずに、最初からTypeScriptで学んでいくコンテンツとして作成されはじめました

素敵。 (...でもJavaScriptも知りたいのでそれはそれでやっていく所存。)

これまでの企業システムのフロントエンドは金太郎飴のようにおきまりの作業をするだけだったが、
近年ではユーザがプライベートで触れる体験はリッチなものになってきており、それに呼応するように開発技術も複雑化してきた。
使いやすいUIを持った情報に触れる機会が増えた今、業務のUIが残念ではストレスを与えてしまいよろしくない。
なので作るものをよくしなければならないことから、企業システムでもReact、Vue.js、Angularの採用するようになってきた。
初学者には環境構築からしてハードルが高いのでそこは本書では触れず、必要な部分にフォーカスした内容になっている。

1.2 TypeScript のウェブ開発における位置づけ

JavaScriptECMAScript 2015以前と以降で大きな変化があった。
(昨日見たリンクでもECMAScript 2015がキーになっていた。)

ブラウザの組み込み言語である以上ネイティブと比べて自由度が低い。
なのでリッチな言語で一旦記述し、それをJavaScriptに置き換える手法が主流になってきた。
そのため以前のように直接JavaScriptを記述するような機会は減ってきている。
置き換え用の言語として主流なのはBabel と TypeScriptであり、Babelをベースに型情報を付与できるようにしたものがTypeScript。
TypeScript のコードから型情報を外すとほぼそのまま JavaScript になる。

1.3 TypeScript を選んで開発すべき理由

わざわざ置き換えなくてもJavaScriptでいいんじゃないかと考えるが、
JavaScript のライブラリをコンパイルして作る際に、型定義ファイルも同時生成できて、無駄がないという恩恵がでかい。
JavaScriptはその自由度故にトリッキーな書き方もできてしまうので大規模開発では負債になりやすい。
なのでTypeScriptを使う。

1.4 JavaScript のバージョン

細かいところは下を見ると良いらしい。

github.com

本ドキュメントは TypeScript ファーストで説明していきますが、JavaScript との差異があるところは適宜補足します

ありがたい。

1.5 本書の参考文献など

ドキュメントを書いていくにあたって参考にした文献や資料について

1.6 ライセンス

資料のライセンスについて ※クリエイティブ・コモンズ 4.0

1.7 TypeScript と互換性

下限はIE11。Chromeもそこに近いChrome 41.
ECMAScript Compatibility Tableを参照しながら対象範囲を検討していくと良い。
(ブラウザを使うサービスは大変そう。
TypeScriptでコンパイル時に出力するコードのバージョンを指定できるが、
ES3がデフォルトでES5、ES2015 から ES2018、ESNEXTと選択できる。
ES5を選択しておくと、新旧のバランスが良い。
ただし、出力ターゲットを古くすると、クラスがなかったり、古くなってしまったりするため、
差分を吸収できるようcore-jsを使用したり、compat-tableを参照して機能の確認をする必要がある。

今日はここまで。 明日は2章をやっていきます。