はじめに
この記事は各々の理由でこれからTypeScriptに関わることになるけど、
ガチガチの入門書とか読みこむのは大変だし、要点さえ掴めれば勝手に自走して身につけられるよ！
っていう忙しい人（めんどくさがり？）向けにざっくりと「TypeScriptとは何ぞや？」のきっかけになる部分を説明します。
キチンと知りたい方は今の時代ここやGoogleやYoutubeで検索すれば素晴らしい解説が多く見つかるのでそちらの方をどうぞ。
（本当にありがたき…。）
前提条件
・プログラミング言語（種類問わず）でのコーディング経験がそれなりにある。
・JavaScriptをある程度理解している。
・オブジェクト指向がなんとなく分かる。
コーディングする上での理解
TypeScript未経験だけどさっさとコーディングして感覚的に覚えたいって人は多分ここが一番知りたい部分だと思いますので、まずここから説明します。
TypeScriptをざっくりと一言で表すと
「JavaScriptに型定義とクラス定義を可能とした言語」
となります。
TypeScriptの名前のTypeはこの型定義から来てるんですね。（多分）
基本的にJavaScriptの上位互換として頭に入れて大丈夫です。
なんならJavaScriptのソースそのままでも扱えるので、JavaScript書ける時点でTypeScriptも割と書けるということになります。
これが何でかっていうと、TypeScriptファイル(.ts)をコンパイルするとなんやかんやでJavaScriptファイル(.js)に変換されるからです。
コーディングサンプル
今回は「TypeScriptファイルの実行」と「変数の型定義」を説明します。
まずは「TypeScriptファイルの実行」を説明します。
function increment(num) {
return num + 1;
}
console.log(increment(999));
ファイル拡張子は「ts」でTypeScriptのものですが、中身はJavaScriptのみの文法となります。
関数の引数をインクリメントしてコンソールに表示するだけの単純な処理です。
まず実行までをおこないますが、TypeScriptはJavaScriptとは異なり、コンパイルしてJavaScriptファイルに変換する必要があるため、コンパイルします。
↓コンパイル結果
何も表示されません。（＝コンパイルが成功したことを示します。）
コンパイルに成功した場合、tsファイルと同名のjsファイルが作成されます。
↓変換結果
function increment(num) {
return num + 1;
}
console.log(increment(999));
tsファイルと中身も全く同じですね。（元がJavaScriptのみなので当然ですが。）
このjsファイルを実行します。
↓実行結果
1000
結果は想定通りですね。
まとめると、「TypeScriptファイルの実行」とは以下の流れを指します。
TypeScriptファイルをコンパイルする。
↓
JavaScriptファイルに変換する。
↓
変換結果のJavaScriptを実行する。
次に、「変数の型定義」を説明します。
先ほどのtsファイルを例として、
function increment(num) {
return num + 1;
}
console.log(increment(999));
これに型定義を加えると、以下のようになります。
function increment(num: number) {
return num + 1;
}
console.log(increment(999));
引数「num」の部分に「: number」が付与されました。
これは引数「num」に数値型が定義されたことを示します。
これをコンパイルして、JavaScriptファイルに変換します。
↓変換結果
function increment(num) {
return num + 1;
}
console.log(increment(999));
型定義前と全く同じ内容になりました。
このファイルを実行すると
1000
全く面白みもないですが想定通りです。
このことから、tsファイルをコンパイルすると単純に型定義が外されたjsファイルになるということが分かります。
tsとjsでどのように互換性が保たれているかの分かりやすい例になるかと思います。
（あくまで型定義の場合の話ですが。）
ちなみに、定義した型と違う型の値を入れた場合、
function increment(num: number) {
return num + 1;
}
console.log(increment("こんにちは"));
数値型として定義されている引数「num」に文字列「こんにちは」を入れてみます。
これをコンパイルすると
increment.ts:4:23 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
4 console.log(increment("こんにちは"));
~~~~~~~
Found 1 error.
このようにエラーとなり、jsファイルに変換されません。
これによって実装者の想定と異なる変数値のやりとりをコーディング段階で防ぐことができます。
（このTypeScriptの型定義がいわゆる「静的型付け」と呼ばれる。JavaScriptは「動的型付け」。）
さいごに
TypeScriptの正体と書き方をさっさと知りたい（私みたいな）せっかちさん向けに記事を書きました。
そのため、TypeScriptのメリットデメリットや環境構築などの話は意図的に省略しています。
そこらへん詳しく知りたい人は各々で調べてね！素晴らしい参考サイト様も下に掲載してます。
次回はTypeScriptでのクラス定義を書きます。
参考サイト様
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
https://typescriptbook.jp/