TypeScriptを使う場面、使わない場面

Shota Kubota

自己紹介

目次

今日話すこと

今日話さないこと

  • JavaScriptがなぜダメかうんぬん
  • HaxeやJSX、CoffeeScriptなどと比べて、機能やパフォーマンスはどうかうんぬん

TypeScriptの特徴とメリット

TypeScriptが生まれた理由

TypeScript: JavaScript Development at Application Scale - Somasegar's blog - Site Home - MSDN Blogs
With these developments, we’re starting to see applications of unprecedented size written with JavaScript, despite the fact that creating large-scale JavaScript applications is hard. TypeScript makes it easier.

TypeScriptでの開発を楽にしてくれる4つの特徴

  1. 型
  2. クラス
  3. モジュール
  4. インターフェース

型

変数や引数などに型を指定できる

型指定の例

            
// 変数を宣言する際に、変数名のすぐ後ろにコロンと型を書くことにより、型が指定できる
var name: string = "hoge";

// 型指定を省略した場合は、型推論によって変数の型が決まる
var name = "hoge"; // 型推論により var name: string = "hoge"; と同じ意味になる
var age = 30; // 型推論により var name: number = 30; と同じ意味になる

// function文やfunction式では、引数と返り値に型を指定可能
function parseNumber(str: string) : number {
    // hogehoge
}
var parseNumber: (str: string) => number = function (str: string): number {
    // hogehoge
};

クラス

クラスっぽいことデモ(参考: JavaScript にクラスは作れますか？ - hogehoge @teramako)

モジュール

モジュールの例

            
module Say {
     export class Message {
         constructor(public message: string) {
             this.message = message;
             alert(this.message);
         }
     }
 }

 var message = new Say.Message("Hello, world");

インターフェース

インターフェースの例

            
interface IPerson {
    name: string;
    birthday: Date;
    hello: () => void;
}

class Person implements IPerson {
    name: string = "kubosho_";
    birthday: Date = new Date("10/11/1989");
    hello: () => void = function () {
        alert("My name is " + this.name);
    };
}

var person = new Person();
person.hello();

型やクラス、モジュールやインターフェースがあるメリット

TypeScriptを使う場面、使わない場面

TypeScriptを使う場面

機能が複数あり、かつそれぞれが独立しているようなサービス
(ここのコードは共通で使いたいけど、ここのコードは個別のページで使いたい的な)

一つのJSファイルに全ての機能が書かれていたら、引き継ぐ人が死ぬといった時にTypeScriptを使うといいかもしれないです

TypeScriptを使わない場面

上記のような場面では、素のJavaScriptで書いたほうがたぶん早いです

まとめ

まとめ

ご静聴ありがとうございました

参考資料