TypeScriptについてまとめてみた

2018/06/14 - プログラム言語 Javascript, TypeScript, プログラミング

はじめに

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

TypeScript って何？

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

CoffeeScript と何が違うの？

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

JavaScript（ECMAScript 5）

function Person(name) {
  this.name = name;
}
Person.prototype.say = function(message, count) {
  for (var i = 1; i <= count; i++) {
    console.log(this.name + " says " + message + " " + i);
  }
}

var person = new Person("Bill");
person.say("Hello!", 3);

function Person(name) {

this.name = name;

}

Person.prototype.say = function(message, count) {

for (var i = 1; i <= count; i++) {

console.log(this.name + " says " + message + " " + i);

}

var person = new Person("Bill");

person.say("Hello!", 3);

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

CoffeeScript

class Person
  constructor: (@name) ->
  say: (message, count) ->
    for i in [1..count]
      console.log """#{@name} says #{message} #{i}""";

person = new Person "Bill";
person.say "Hello!", 3;

class Person

constructor: (@name) ->

say: (message, count) ->

for i in [1..count]

console.log """#{@name} says #{message} #{i}""";

person = new Person "Bill";

person.say "Hello!", 3;

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

TypeScript

class Person {
  constructor(private name: string) {}
  public say(message: string, count: number) {
    for (let i = 1; i <= count; i++) {
      console.log(`${this.name} says ${message} ${i}`);
    }
  }
}

const person = new Person("Bill");
person.say("Hello!", 3);

class Person {

constructor(private name: string) {}

public say(message: string, count: number) {

for (let i = 1; i <= count; i++) {

console.log(`${this.name} says ${message} ${i}`);

}

const person = new Person("Bill");

person.say("Hello!", 3);

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

JavaScript と何が違うの？

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

JavaScript

var count;
count = 0;
count ++;
count = "Steve";

var count;

count = 0;

count ++;

count = "Steve";

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

TypeScript

var count: number;
count = 0;
count ++;
count = "Steve"; // コンパイルエラー

var count: number;

count = 0;

count ++;

count = "Steve"; // コンパイルエラー

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

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

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

TypeScript（コンパイル前）

interface IMessage {
  text: string;
  count: number;
}

var message: IMessage = { text: "Hello!", count: 3 };
var i: number;
for (i = 1; i <= message.count; i++) {
  console.log(message.text + " " + i);
}

interface IMessage {

text: string;

count: number;

}

var message: IMessage = { text: "Hello!", count: 3 };

var i: number;

for (i = 1; i <= message.count; i++) {

console.log(message.text + " " + i);

}

JavaScript（コンパイル後）

var message = { text: "Hello!", count: 3 };
var i;
for (i = 1; i <= message.count; i++) {
  console.log(message.text + " " + i);
}

var message = { text: "Hello!", count: 3 };

var i;

for (i = 1; i <= message.count; i++) {

console.log(message.text + " " + i);

}

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

ECMAScript 6 と何が違うの？

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

TypeScript

interface IMessage {
  text: string;
  count: number;
}

class Person {
  constructor(private name: string, private age: number) {}
  public say = (message: IMessage) => {
    for (let i = 1; i <= message.count; i++) {
      console.log(`${this.name}(${this.age}) says ${message.text} ${i}`);
    }
  }
}
const person = new Person("Bill", 62);
person.say({ text: "Hello!", count: 3 });

interface IMessage {

text: string;

count: number;

}

class Person {

constructor(private name: string, private age: number) {}

public say = (message: IMessage) => {

for (let i = 1; i <= message.count; i++) {

console.log(`${this.name}(${this.age}) says ${message.text} ${i}`);

}

const person = new Person("Bill", 62);

person.say({ text: "Hello!", count: 3 });

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

var Person = /** @class */ (function () {
  function Person(name, age) {
    var _this = this;
    this.name = name;
    this.age = age;
    this.say = function (message) {
      for (var i_1 = 1; i_1 <= message.count; i_1++) {
        console.log(_this.name + "(" + _this.age + ") says " + message.text + " " + i_1);
      }
    };
  }
  return Person;
}());
var person = new Person("Bill", 62);
person.say({ text: "Hello!", count: 3 });

var Person = /** @class */ (function () {

function Person(name, age) {

var _this = this;

this.name = name;

this.age = age;

this.say = function (message) {

for (var i_1 = 1; i_1 <= message.count; i_1++) {

console.log(_this.name + "(" + _this.age + ") says " + message.text + " " + i_1);

}

};

}

return Person;

}());

var person = new Person("Bill", 62);

person.say({ text: "Hello!", count: 3 });

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

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.say = (message) => {
      for (let i = 1; i <= message.count; i++) {
        console.log(`${this.name}(${this.age}) says ${message.text} ${i}`);
      }
    };
  }
}
const person = new Person("Bill", 62);
person.say({ text: "Hello!", count: 3 });

class Person {

constructor(name, age) {

this.name = name;

this.age = age;

this.say = (message) => {

for (let i = 1; i <= message.count; i++) {

console.log(`${this.name}(${this.age}) says ${message.text} ${i}`);

}

};

}

const person = new Person("Bill", 62);

person.say({ text: "Hello!", count: 3 });

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

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

動かしてみる

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

$ npm install -g typescript
$ tsc hello.ts

1 2	$ npm install -g typescript $ tsc hello.ts

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

参考

TypeScript Documentation（公式ドキュメントです）
TypeScript実践プログラミング（内容は良いのですが、執筆時点の TypeScript のバージョンがちょっと古いので注意が必要です）

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

: ナイーブベイズで羽生さんと羽生くんを分類してみた

はじめにこんにちは。システム開発部の中村です。機械学習についての理解を促進するため、データから分類モデルを自動で構築する古典的な方法である、ナイーブベイズ分類器を実装してみました。最近はCloudVisionAPIなど専ら画像解析が流行っていますが、自分のような初学者には敷居が高そうだっ …

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

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

: 【未経験からのRuby on Rails – 第3回】変数と定数

こんにちは。新卒1年目のmatsuariです。今回はRubyに限らずプログラミングを学ぶ上で非常に重要となる「変数と定数」について、ご紹介していきます。変数とは・・・オブジェクトを一時的に格納しておく箱で、オブジェクトを識別するために利用します。言葉だけでは理解が難しいかと思いますので、まず …

: iOS端末情報をTreasureDataに送るアプリをswiftで作ってみた。

はじめまして、2年目のOyamanです。通常業務とは別のことになりますが、Swiftに触れる機会が少しあったので、スマホ関連の記事を書かせていただきます。はじめに SwiftとTreasureDataのSDKを使って、 iOSの端末情報をTreasureDataへ送るアプリを作ってみます。今回 …

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

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

: 初心者がRailsで開発 – deviseでユーザー認証設定 –

こんにちは、2年目のYukaです。開発部所属でありながら実は、、実際に自分で手を動かして開発する機会がなかなかありませんでした。。しかしついに、、、開発初心者がRailsでWebアプリの開発に挑戦します！！今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …

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

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

: プログラミング初心者がswiftでゲームアプリ的なものを作ってみた。

こんにちは、DAC2年目のkumataです。普段は素敵な先輩方に囲まれてインフラ周りのお仕事をさせて頂いていますが、今回は業務とは全く関係ないプログラミングをやってみました。全く初心者なのですが、swift+Xcodeで簡単にスマホゲーム的なものが作れました。初心者の目線から作成方法をつらつ …

: Selenium × PHP でテスト自動化！【環境構築編】

はじめにみなさんこんにちは、プロダクト開発本部の亀梨です。普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う統合プラットフォームの開発を担当しています。テスト自動化の背景わたくしが担当するXmediaOneでは品質担保のために①コードベ …

: GoogleスプレッドシートからTreasureDataへデータを取り込む

AudienceOneの開発を担当しています。skryoです。またまたTreasureDataネタですが、今回はGoogleスプレッドシートからGoogleAppsScriptを使ってTreasureDataへデータを取り込む手順を紹介したいと思います。なぜ？ Googleスプレッドシート上でマ …

PREV: Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題
NEXT: Selenium × PHP でテスト自動化！【環境構築編】

TypeScriptについてまとめてみた

はじめに

TypeScript って何？

CoffeeScript と何が違うの？

JavaScript（ECMAScript 5）

CoffeeScript

TypeScript

JavaScript と何が違うの？

JavaScript

TypeScript

TypeScript（コンパイル前）

JavaScript（コンパイル後）

ECMAScript 6 と何が違うの？

TypeScript

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

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

動かしてみる

参考

関連記事