前置き／読んだ感想

当記事は『手を動かしながら学ぶ TypeScript』（株式会社SmartHR 渡邉比呂樹／鴇田将克／森本新之助　C&R研究所）の「１章 TypeScriptの概要」を学び、私自身にとって必要な部分を要約し、メモを加えたものです。

これまでTSについては断片的な知識とフィーリングで利用していましたが、体系的に学びたいと思いこちらを読みました。
内容は、TypeScriptの特徴や背景、また利用方法について無駄のなくまとめられており、「なんとなくTSを使ったことがある」「JSでそれなりに開発経験あり」といった経験者にとっては理解の深めるものだと感じました。一方、全くの初心者やJS未経験者には難しい内容となっています。
私の場合【JSを扱う現場を２年+TSを扱う現場３か月程度】ですが、不明点を調べながら楽しく読み進められました。

ぜひ著書を実際に手に取ってお読みください。

その他

本文中「※」は末尾の参考文献を参照

（まとめ）

※※※ 後日追加

TypeScriptの概要

ポイントになる用語、背景知識

ECMAScritp
コンパイル、コンパイラ
スーパーセット
型システム

ECMAScriptとは

ECMA-262（規格）に則ったJavaScriptの標準言語仕様

ECMAScriptとは、Ecma International という情報通信技術関連の規格策定を行う標準化団体が策定する、ECMA-262という規格に基づいて標準化されている言語のこと

つまり、ECMAScritpは、JavaScriptの言語仕様が標準化された言語といえます

ES2015 = 2015年リリースのECMAScritp

「ES」というのはECMAScriptの略
バージョン6以降に関してはES2015のような「ES+リリース年」という形の通称を使うのが一般的

ただし、ES2015に関してのみ昔の延長で「ES6」とも表記される

・ECMAScriptを意識するタイミング

１つの回答としては、JavaScriptの実行環境の違いによる機能やシンタックスのサポートの差について触れるタイミング

例えばJavaScriptのClass構文(※2)。Chromeでは使用できるが、IEでは構文エラーとなる。

同じようにJavaScriptでも、実行環境によって使える機能にばらつきが出てしまっているわけです

これは困る。
つまり言語の種類は「JavaScript」だといって問題なくとも、ある構文が確実に機能することを担保しようとすると「ECMAScritp」のバージョンの話が必要になる。

ではどのバージョンを採用したらいいのかという問題。(p14)

ブラウザ上での操作を想定した場合、ES2020で書かれたスクリプトはIEでの実行時にはエラーになる。かといってIEで動かすためだけにSE5を採用すると新しいSEの機能が使えない（宝の持ち腐れ）。(*あえて「ブラウザ上での」というのは、CUIで動作が完結するプログラムもあるからだと思う。)

この問題を解決するのがコンパイラ

ESのバージョンを指定してJSファイルにコンパイルする

コンパイラとは一般的に、ソースコードを丸ごと一括で機械語へ変換するコンパイルを行った後に実行する、プログラムの処理方法のこと（※3）

JavaScriptという文脈で出てくるコンパイラとは、「特定バージョンのECMAScriptを、任意の下位バージョンのECMAScriptに変換するための仕組み」の事を指す(p14 L7)

つまり、ソースコードはES2015以上で実装し、ES5などの下位バージョンのコードは必要に応じてコンパイルすればよい。これでバージョンごとのJavaScriptファイルをわざわざ実装する必要がなくなる。

モダンな開発ではこのフロー（新しいESで実装し、コンパイラでESバージョンを指定しコンパイルを行い、実行環境に則したバージョンのファイルを生成する）が一般的だそう。

・ECMAScriptの補足

> 注意点：機能によっては、コンパイル時に変換できず残ってしまう

例）SE5をターゲットにした場合

ES2015以降で有効な「アロー関数式」→　ES5で解釈できる「function関数式」に変換される
ES2015以降で有効な「Promise」→　ES5で代替可能なシンタックスがないので、そのまま変換されずに残ってしまう（その場合、おそらくJSのランタイムエラーになるはず）

> 新しいバージョン：「後方互換性」を保っている

バージョンが上がった場合でも、原則して使えなくなるシンタックスがでない
（使えるシンタックスが上乗せされるだけ)。
つまり過去バージョンの機能を、新しいバージョンでもすべて使うことできる
（新しいESはそれ以前のESのスーパーセットといえる）。

(本題) TypeScript とは

実はTypeScriptはECMAScritpのスーパーセットになっています。
つまり、TypeScriptは、特定のバージョンのECMAScritpの機能をすべてカバーしつつ、さらにECMAScritpにはない「型システム」などの追加機能を持つ言語 である、ということです(p15)

例）TypeScript ver4.3.5 は ES2021まではすべてカバー
※　ES2021以降の機能は含まれず、使えない

TypeScriptについて、よく「型システムのあるJavaScript」といったものをイメージされる方も多い

決して間違っていないのですが、「ECMAScritpのスーパーセット」という捉え方をした方が、TypeScriptという言語の立ち位置がクリアになるのではないでしょうか

型システムとは

プログラムに存在する値をデータ型で分類して、そのプログラムが正しく振舞うことを保証する機構のこと

・型（データ型）とは、値を分類したもの

0,10 ... 数値型、hello, good ... 文字列型　などなど

TypeScriptの場合、:でデータ型を明示する
例：文字列型の変数 greeting -> const greeting: string = 'hello'

・型の特徴

データ型に分類された値の特徴：「同じデータ型の値であれば同じ操作が可能である」

データ型があることで
・ある値に対してできる操作を「データ型」を見て判断することができる
・ある値について、想定外にあれこれ操作されないことを保証できる

例えば、JavaScriptのStringクラスのtoUpperCase は、文字列型の値でのみ操作できるメソッドがある。これは「数値型」の値では呼べないという判断ができる。(p16)

なぜTypeScriptを使うのか

安全なコードを書ける（品質保証）
- JavaScript：動的型付け言語=ランタイムでしかエラー検出できない & 処理が中断する。安全なコードを書こうとすると冗長
- TypeScript：静的型付け言語=コンパイル時点でエラー検出できる。中断の可能性を下げる。型で制約するので簡潔で安全
- 機械的に検出してくれるので大規模アプリケーション開発の場合にも、安全かつ効率的に開発できる
エディタの補完機能を利用できる（効率の大幅改善）
- 型定義から推測された候補入力のサポートあり（VSCodeなど）
導入コストの低さ（JavaScriptのスーパーセットでもあるため習得しやすい）
- jsと構文がことなるCoffeeScript,AltJSなどは学習コストが高かった
- TypeScriptの型システムは強制じゃない。jsをtsファイル上に書いても同じように動く

TypeScriptのコンパイルについて

メモ

拡張子：.ts
- tsファイルはブラウザやNode.jsでそのまま実行できない。必ずjsファイルへ変換が必要
TypeScriptはnpmパッケージ化されている
- https://www.npmjs.com/package/typescript
インストール後、tscコマンドを用いてコンパイル可能
コンパイル設定は「tsconfig.json」で設定可能（主に指定できること下記）
- コンパイル対象、除外対象の指定
- コンパイルの出力先、ディレクトリ
- 出力するECMAScritpバージョン
- ソースマップの有無
- 型チェックの強度
- 構文チェック
  - エラーとなりやすい構文に制約を持たせる（switch文のbreak必須や、関数の明示的なreturnの必須化など

個人的まとめ

どんどん新しい言語やライブラリが生まれているが、背景知識のある方がWebアプリ開発の全体像が掴みやすく、そのプロジェクトにも気持ち的にコミットしやすくなる気がした。
いつどういった形で役立つか不明だが、現場では「知っている人にしか気づけないこと」が多くある。

自分がすべて網羅できるわけではないけれど、自分が知っている事、気づけることは増やしていきたいと思う。

参考文献