deve.K

エンジニアが未来を切り開く。

English

TypeScript とは 静的型システム JSの型との違い


スポンサーリンク

本日はJavaScriptでのフロントエンド開発者には欠かせないTypeScriptについてとなります。

当ブログでのTypeScript学習入門はしばらく先になるかと思いますが、『TypeScriptとは何か』『静的型システムとは?』

そういった疑問をまず解消してもらいたく記事にしました。

まず、TypeScriptを学ぶにはJavaScriptでの『型』または『その他基礎』に精通している必要があります。

これは、同じエンジニアの方々は必ずこう言います

JavaScriptから学びTypeScriptへ移行しましょう』

もちろんですがTypeScript公式も同じ発言をしております、ですのでJSに精通してない方はこの記事を読んでも理解できない事がありますのでご了承下さい。

そんな方に軽くJavaScriptの基本的な型を解説します。

型という用語はこれから沢山出てきます。

JavaScriptのデータ型

データ型は基本的に、プログラム内で保存および操作できるデータの種類を指定するものでありデータの分類です。

数値や文字などを異なるものとして分類し分けています。

JavaScriptのデータ型(Type)は、『プリミティブ型』と『オブジェクト型』でカテゴリに分類されます。

現在のECMAScriptでは9つの型があります。

データ型の6種類はプリミティブ型です。

変数や式の型(数値の値など)を調べるには、『typeof 演算子』を用います。

プリミティブ型

  • boolean型(真偽値trueまたはfalse)
console.log(20 > 10); //true
  • number型(数値)
console.log(typeof(5));

console.log(typeof(3.14));
  • string型(文字列)
let Msg = "伝説のHello world";
console.log(Msg);

console.log(typeof('stringが返ってきます'));
  • symbol型(ES2015からのみ可能『シンボル値』)
console.log(typeof(Symbol()));

※他の値と重複しないユニークなシンボル値を生成します。

  • BigInt(ES2020からのみ可能『BigInt値』)

※長整数型で大きな整数を格納して操作できます。

console.log(typeof(12n));

特殊な値を持つデータ型

  • null(値が入っていない)
let a = null;
console.log(a); //nullが返ってくる
  • undefined型(未定義の値)
const foo;

console.log(foo); //undefinedが返ってくる

プリミティブ型では基本的には単一の値のみを格納します。

そして複雑なデータ型であり、どのプリミティブ型に当てはまらないのがオブジェクト(Object)型です。

オブジェクトでは複数の値を格納が可能です。

後は関数(Function)この9つのデータ型となっております。

ここまでにしておきます。

詳しくは公式MDNを参照下さい。

JavaScript のデータ型とデータ構造 - JavaScript | MDN

TypeScriptとは?

typescriptとは 入門

TypeScriptは、Microsoftによって開発および保守されているオープンソースプログラミング言語となっております。

世界には約18億のウェブサイトがあると推定されています、そのうちの95%がJavaScriptが使用されています。

GithubのOctoverse ReportによるとJavaScriptは世界で群を抜いて最も使用されている言語となっています。

そんなJavaScriptプログラマーが書く最も一般的な種類のエラーは、型エラーとして説明ができます。

それは、単純なタイプミス、ライブラリのAPI面での理解の失敗、実行時の動作に関する誤った仮定、またはその他のエラーが原因である可能性があります。

TypeScriptでの目標は、JavaScriptプログラムの静的型チェッカーになることです。

TypeScriptとはJavScriptにコンパイルされる静的型システムが付いた、JavaScriptの上位互換。

つまりはスーパーセットです。

これだけですと、もちろんよく分からないかと思いますので説明させて頂きます。

コンパイル

コンパイルとは本来は、プログラミング言語で書かれたコードを機械語に変換することを意味します。

ですが、TypeScriptではコードを機械語に翻訳しません。

理解が難しくなると思いますが

TypeScriptは、強く型付けされたバージョンのJavaScriptからJavaScriptの元の弱い型付けまたは型指定されていない言語にコードを変換する必要があるため、コンパイルする必要があります。

この『強い型付け』と『弱い型付け』については後ほど解説いたします。

この記事であればTypeScriptを使用し記述した命令コードをブラウザ上で実行すると

TypeScriptはどのブラウザでも理解されないため

そのまま実行するのではなく一度JavaScriptに変換した後にJSを実行するプロセスとなっております。

なぜ理解しないのかそれは

Chrome V8』や『Firefox』の『SpiderMonkey』などのブラウザは、JavaScriptコードのみを母国語として認識しているからです。

JavaScriptにはバージョンがあるのはご存知の方もいらっしゃるかと思いますが

『ES3』から始まり『ES5』→『ES2015(ES6)』→『ES2016(ES7)』→….。現在まで年号により毎年バージョンがアップデートされてます。

例えばですが最新バージョンが『ES2021』の場合

この最新バージョンを常に使用を続けると

『ブラウザ』そのものがJavaScriptの最新バージョンで書いたコードに対応がされていない状態も起きたりします。

つまり『ES2021』で記述したコードが最新すぎてブラウザそのものが追い付かなくなり機能しなくなります。

これは、貴方(ユーザー)がブラウザのアップデートを怠っていたりするとこのような原因になります。

そんな方々には残念ですが、使用はできません。

とは、いかないです。

全てのユーザーに最新バージョンであるJavaScriptコードの型をお使いのブラウザで使用してもらいたい。

その為にTypeScriptコンパイラを使用すれば解決が可能となります。

ブラウザを開発しているのは、ブラウザベンダーという方々です。

ブラウザベンダーに代わって作業する必要はありません。

基本的には『ES5』でのバージョンでは全てのブラウザでサポートされていますので、TypeScriptで変換してあげます。

つまり『ES6』→『ES3』または『ES5』これらにバージョンをダウングレードしているという事になります。

typescriptコンパイル

これら、言語から別の言語にコンパイルまたはコンパイラする事を『トランスコンパイラ』と言いますが、基本的には『トランスパイラ』と略します。

JavaScriptが動く環境であれば、すべての場所でTypeScriptも実行されます。

TypeScriptコードをコンパイルまたはJavaScriptに変換するコマンドである『CLI』(ユーティリティインターフェイス)である『tsc』を提供します。

このプロセスは、『tsconfig.json』ファイルに基づいており、コードが実行される前にローカルで実行されます。

では、コンパイラはTypeScriptではないといけないのか?

JavaScriptコンパイルするのは、Babelコンパイラもあります。

これはTypeScriptと非常に良く似ています、ですが違いもいくつかあります。

唯一の違いとしましては

Babelはトランスパイラを引き継ぐことができますが、タイプチェックが組み込まれておらず、それを実現するにはTypeScriptを使用する必要があります

TypeScriptを使用すると、JavaScriptの上に静的型定義をオプションで追加ができる点です。

つまりBabelにはこの、型システムなるものが元々サポートされていません。

Babelではエラーや警告なしでコンパイルされてしまいます。

ですのでBabelでも型チェックでのトランスパイルの際はTypeScript(tsc)を必要とします。

ではその『静的型システム』について解説致します。

静的型システム

TypeScriptがJavaScriptへ変換される前に、『型での検査』をします。

つまり変換する前に、TypeScriptでの全ての型をチェックするという事になります。

貴方が書いたコードを監視しチェックをしています。 

バグの可能性を減らすことを目的とした一連の厳しいルールを持っているという事です。

そういったシステムを『静的型システム』と言います

型の違いについて

静的型付けと動的型付けこれはどう違うのか。

TypeScriptではJavaScriptに型が付いたもの、というわけでもありません。

JavaScriptにも元々、型は存在します。

例えば、文字列型である『string』や数値型である『number』などのさまざまな型があります。

まずはTypeScriptコンパイラ(tsc)では型がしっかり合っているのかを検査(チェック)して実行する前に確認します。

変数や関数に型を予め定義しておき

静的型付けは、型を値ではなく変数に関連付けます。

それが強い静的型付けです。

JavaScriptでも実行可能かどうか、ブラウザエンジン内で型での検査は一応はしております。

内部でそれら型の情報を保持しております

ですが弱い型付けとなっております。

つまり型の指定をする必要がありません。

プログラムを書くときに変数や関数に何が入ってくるか、そういったのは特に決まっておらず、なんとなくで『これだな』と予想程度となっており、型での管理もありません。

これが動的型付けとなります

動的に弱く型付けされた言語という事です。

そうなりますと両方に型が存在している事になります

学習の際はTypeScriptでの型・JavaScriptでの型で別個として分けて考えていく必要性があります。

つまり、元々JavaScriptにある型をTypeScriptでは専用の新しい型をJavaScriptに追加している事になります。

JavaScriptには存在しない型を沢山保有しております

違う型として覚えていく必要があると言いましたが TypeScriptでは、JavaScriptに元々ある型をサポートしております。

先程言った『string型』や『number型』などの元々JSにある型です。

TypeScriptはJavaScriptの上位互換であり一種の集合体でもあります。

TypeScriptはJavaScriptに合わせて、同じようにTypeScriptでも書けるようにしてくれているとうわけであります。

すべてのプリミティブ型とオブジェクト型の型チェックをサポートしている事になります。

型の定義

TypeScriptでは型チェックの審査に通過できるように書いていく必要があります。

例えば、本来のJavaScriptであれば下記は問題がありません。

タイプがvalueの数値から文字列へ変わります。

let value = 5;

value = "hello";

TypeScriptではこういったのは禁止されます。

"hello"は"number"型に代入できませんとエラーが返ってきます。

他には関数の戻り値だったり、文字を入れてない、数字がないそれら全てをチェック致します。 

let value: boolean = true;

※本来では『const』を使用下さい。サンプルの為あえて『let』を使用しております。

TypeScriptは変数や関数に型があります。

型を付けるには、変数に対してコロン( : )を付けてスペースを空けます、上記でしたら『boolean』を記述し『true』または『false』の値を持つ事が可能となります。

先程のJSのように一度定義をし、別の型のデータを入れるとコンパイラがエラーをスローします。

この『boolean』TypeScriptでの多くの型は『型注釈』と言い、どの型を使用するのかを明示的に指定します。

もう一つ『型推論』機能もありますのでそちらを説明致します。

型推論』はコンパイラが自動で型を推論し判別する機能となります。

let value = true;

これは多分『boolean』だとTypeScriptが自動で推測するので変わらず『true』が出力されます。

明示的に型注釈をしなくとも、値から推論して割り当ててくれます。

なるべく、型推論で記述していき型推論ができない場合は型注釈で定義する事をお勧め致します。

ほとんどのエンジニア特にプログラマーは値を見れば、すぐに型が分かります。

VS Codeを使用しているのであれば、値にカーソルを合わせると型の確認も可能です。

少し解説致しましが、TypeScriptではさまざまなな型がサポートされています。

TypeScriptでの主な型はこちらになります。

  • Boolean型

  • Number型

  • String型

  • Array型

  • Tuple型

  • Enum

  • Any型

  • Union型

  • Literal型

  • Unknown型

  • Void型

  • Never型

  • NullまたはUndefined型

  • Object型

  • アサーション

これら型は入門時に別途解説致します。

TypeScriptを『なぜ使用するのか』、そして『静的・動的型付けの違い』や『静的型システム』などの疑問が解消し、TypeScriptユーザーであるかどうかに関係なく、あなたがこれをやってみたいという好奇心を刺激したことを願っております。

本日は以上となります

最後まで読んで頂きありがとうございました。

プライバシーポリシー