サイト名変更・お引越しのお知らせ

TypeScriptとは何かを解説

今やJavaScriptを使うとなった場合に必須の言語、TypeScriptの概要について解説します。

最後に「初めてのTypeScript」も用意しているので、興味がある方はやってみてください。

まずはJavaScriptについて知りたいよという方はこちらをみてみてください。

TypeScriptとは何か

TypeScriptの概要について解説していきます。

TypeScriptとは?

TypeScriptとは、「Microsoftによって開発されているJavaScriptを拡張したプログラミング言語」です。

メモ

JavaScriptを拡張したものをAltJS(オルトJS)と呼んでいます。

TypeScript以外にも、CoffeeScriptDartなどがあります。

2017年にはGoogle社内の標準開発言語として承認されました。

なぜ生まれた?

JavaScript自体の特徴として下記の特徴があります。

  • 「型の認識が緩い」
  • 「そもそも言語として癖がある」
  • 「ブラウザによって動かないもしくは動きが異なる」

それを解決するためにAltJSは生まれています。

そしてTypeScriptは特に「型の認識が緩い」を解決するために生まれました。

特徴

そのため大きな特徴は、静的型付け言語という点です。

特徴は他にもあり、JavaScriptをより良く使えるようになっています。

  • JavaScriptのスーパーセット (JavaScriptとの互換性がある)
  • インターフェイス・クラスなどが使える
  • ジェネリクスが使える

型があると何が良いの?

そもそも型があると何が良いのでしょうか?

安全(バグを防ぐ)

特に規模が大きなアプリケーションの場合恩恵を受けることができます。

型がない場合は、何が入っているかわからない変数が増えていきますので

自然とどこかでおかしな値が代入されてしまう可能性が高まります

その可能性が高まるということは同時にバグの可能性が高まるので、

型をつけることでバグの可能性を減らすことができます。

メモ

開発をするときもおかしな値が入っているときに検知できるので安心です。

入力補完

型があると開発時のエディタの入力補完が効きます。

開発がしやすいですし、安全性も保たれるので嬉しい要素の1つです。

補足

語弊がないように説明すると、エディタによっては設定をするなりして、型がない言語でも効かせることは可能です。

開発環境を作ってTypeScriptを実行してみる

それではTypeScriptを実行できる環境を作成し、実際に実行してみましょう。

開発環境

TypeScriptはそのままブラウザで実行できないので、素のJavaScriptに変換する必要があります。

それをトランスパイルといいます。

TypeScript => トランスパイル => JavaScript の流れです。

その環境を作成していきましょう。

NodeJSをインストール

コンパイラ自体は、Node.js上で動作するため必要となります。

ターミナルを開き、

$ node -v を入力し、バージョンが出力される方はスキップして問題ありません。

コマンドが見つからない旨が表示された方はインストールしていきましょう。

まずは上記ページにてインストーラーをダウンロードしてください。

$ node -v を入力し、バージョンが出力されているかを確認してください。

バージョンが出力されれば完了です。

コンパイラをインストール

続いてTypeScriptをトランスパイルするために、コンパイラをインストールします。

TypeScriptをインストールすれば使えるようになるので、インストールしましょう。

yarn はパッケージ管理ツールの一種です。

$ yarn global add typescript を入力します。

その後、$ tsc -v を入力し、パージョンが出力されていれば完了です。

初めての実行

それではとても簡単なTypeScriptを実際に書いてトランスパイルしてみましょう。

拡張子は、.tsです。

const text:string = "My first TypeScript";
console.log(text);

tsファイルをトランスパイルします。

$ tsc index.tsc

すると、index.jsができていると思います。

このファイルがトランスパイル後のJavaScriptファイルになります。

実行してみましょう!

$ node index.js

My first TypeScript と出力されれば完璧です。

まとめ

TypeScriptはJavaScriptを使う際の、デファクトスタンダードになってきています。

アプリケーションの大小にもよりますが、JavaScriptを使う場合はTypeScriptを

使うようにしていくようにしていくと良いと思います。