TypeScriptについてまとめてみた


はじめに

JavaScript がとりあえずそのまま動くので、雰囲気で使ってしまいがちな TypeScript。初心者向けに基本的なことをまとめてみました。

TypeScript って何?

TypeScript はマイクロソフトが開発したプログラミング言語で、オープンソースでメンテナンスされています。分類としては altJS の一つ。JavaScript の不足している機能を改良した言語で、JavaScript に変換(コンパイル)して実行します。

CoffeeScript と何が違うの?

altJS といわれる言語には TypeScript のほかにも Ruby on Rails で使われている CoffeeScript などがあります。CoffeeScript とは何が違うのか、同じ処理を JavaScript(ECMAScript 5)、CoffeeScript、TypeScript で書いて比較してみます。

JavaScript(ECMAScript 5)

ECMAScript 5 までの JavaScript は class構文がないため、クラス定義に prototype を使う必要があり、オブジェクト指向プログラミングを行うには工夫が必要でした。

CoffeeScript

CoffeeScript だとクラス定義をすっきり書けますが、関数呼び出しやループが Ruby に近い書き方になっていて JavaScript とはだいぶ違っています。

TypeScript

TypeScript では JavaScript のコードをそのまま使えます。ループや条件分岐、関数呼び出しなどの JavaScript の構文はそのままで、それに追加して静的型付けやクラス宣言ができるようになっています。

JavaScript と何が違うの?

TypeScript を使う一番のメリットは、間違った型の代入を防げること(静的型付け)です。

JavaScript

JavaScript では変数の型を指定することができないため、数値として使っている変数(count)に文字列("Steve")を代入することができてしまいます。

TypeScript

TypeScript では、変数の型(number)を指定することができるので、数値として使っている変数(count)に文字列("Steve")を代入すると、コンパイルエラーとして指摘されます。

実は、このコロン(:)を使った静的型付けは JavaScript の仕様である ECMAScript 4 で提案されていたのですが、ECMAScript 4 はお蔵入りとなってしまいました……なので、JavaScript で型チェックを行いたい場合は TypeScript などの altJS が必要になるのです。

また、TypeScript 独自の型情報は JavaScript にコンパイルすると消えてしまいます(型消去)。

TypeScript(コンパイル前)

JavaScript(コンパイル後)

コンパイル後のコードを見ると、インタフェース(IMessage)は定義から綺麗さっぱり無くなっていて、コロン(:)の後ろにある型情報も無くなっています。

ECMAScript 6 と何が違うの?

class構文によるクラスの定義など TypeScript のいくつかの機能は ECMAScript 6(ECMAScript 2015)を先取りしたものです。TypeScript から JavaScript へのコンパイル時にはターゲットとして ECMAScript 3、5、6(2015)、2016、2017 が指定できて、それぞれ変換結果が異なります。

TypeScript

JavaScript(ECMAScript 5 をターゲットにしてコンパイルした結果)

JavaScript(ECMAScript 6 をターゲットにしてコンパイルした結果)

ターゲットを変えてコンパイルすると、型消去が行われている点は同じなのですが、class構文や letconst、アロー構文、テンプレートリテラルなど ECMAScript 6 標準の機能の変換の有無で違いが出ています。また ECMAScript 5 では thislet で定義された変数のスコープを配慮して変数名が変更されていることもわかります。

ECMAScript 6 の機能に加えて静的型付けなどが使えて、ECMAScript 5 しか対応していないブラウザ向けにも変換できるのが TypeScript ということですね。

動かしてみる

簡単に実行するには TypeScript Playground を使ってブラウザで確認できます。
ローカルで実行する場合は npm で tsc コマンドをインストールして TypeScript のファイルを JavaScript に変換(コンパイル)できます。

統合開発環境としては Visual Studio Code が便利です。

参考

※ DACはエンジニアを募集しています! 興味のある人はバナー(↓)からどうぞ


DACエンジニア採用情報

  関連記事

読み方がわからない技術用語 2015

英語圏での読み方を基本的には参考にしています。英語圏でも複数の読み方をしているケースもあるようなので、あくまでも参考程度。2015と書きながら、古い言葉も混じってますが。 async – えーしんく Alt – おると ASUS – えいすーす bower &#8 …

Scala入門 準備編「開発環境構築」 – PHP使いからScala使いへ転身!

  はじめに みなさんこんにちは、今月入社しましたプロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 XmediaOneの開発で採用しているプログラム言語はS …

Scala番外編「Boxに保存したファイルをBox APIを使ってダウンロードしよう!」

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 Box APIを使う背景・目的 DACはメディアレップです メディアレップとは、インタ …

Railsたった14行でアドサーバーAPIができた話

こんにちは。駆け出しエンジニアの近江です。 最近Railsにハマっているので、私が2年間担当しているアドサーバの、簡易版をRailsで作ってみました。 広告やキャンペーンを登録する管理画面はある前提で、ここからたった14行追加するだけでアドサーバーのHTTP APIを作りたいと思います。ついでに配信 …

(社内新卒・PHPビギナー向け)MacでPHP7開発環境を構築しよう!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 えっ!?新卒のプログラミング研修はPHPで行われるって?!俺の得意言語やないか!! は …

Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発・保守を担当しています。 エンジニアの皆さん、デザインってどうしてます? わたくしはプライベートでとあるW …

no image
【小ネタ】Javascriptのconsoleオブジェクトをもっと便利に使う方法

すごく便利なconsoleオブジェクトですが、ブラウザによってサポートされているメソッドが なかったり、そもそもconsoleオブジェクトが使えなかったりと、たまに不便だったりします。 そんなときによく使う便利なコード。 [code language=”javascript” …

PyStanによるはじめてのマルコフ連鎖モンテカルロ法

はじめに こんにちは。システム開発部の中村です。 社内で行っている『データ解析のための統計モデリング入門』(所謂緑本)の輪読会に参加した所、 大変わかりやすい本だったものの、Macユーザには悲しい事に実装サンプルがWinBUGSだったため、 9章の一般化線形モデルのベイズ推定によるアプローチをPyt …

ディープラーニングで「顔が似ているAKB48のメンバーを教えてくれるbot」を構築

概要 こんにちは、システム開発部の中村です。 今回は、Facebook Messenger APIを利用して、 画像をアップロードすると、似ているAKB48のメンバーを教えてくれるbotを実装しました。 尚、ディープラーニングやTensorFlowそのものの解説というより、 「エンジンとしてディープ …

【未経験からのRuby on Rails – 第2回】Rubyのプログラムを書いてみる(Mac)

こんにちは。新卒1年目のmatsuariです。 前回はRubyとは何か、簡単にご紹介をしましたが、 今回は実際にRubyファイルを作成して、プログラムを書いてみるところまでご紹介していけたらと思います。 Mac環境のプログラミング初心者向けです。 はじめに、Rubyのプログラムを書くためのファイルを …