TypeScript

×

Chrome Extension

五十嵐 雄

概要

TypeScriptとは

• Microsoft製の静的型付き言語

• コンパイル → Javascript

• ES5のスーパーセット

• フロントでもサーバーでもOK

• 型定義ファイルを include して外部モジュールも型の世界へ引き込める

Chrome Extension について

• だいたいWebページと同じ

• ポップアップ → popup.html

• オプション → options.html

• ユーザーの入力をフォームで受ける

• 専用ストレージのデータを操作したり

環境

今回のビルドツール

• ​gulp

  • gulp watch
  • gulp test
  • ……トップレベルのコマンドを定義

• webpack + ts-loader

  • browserifyをちょっとリッチにした感じのツール
  • TypeScript → Javascript の部分を担当
  • gulp から使う

• typings

  • 型定義ファイルを管理するツール

使い方

$ npm install
ライブラリが全部入る

$ ./node_modules/.bin/typings install
型定義ファイルが ./typings/ 以下にインストールされる

$ gulp watch
変更を監視して差分コンパイルを続ける．コーディング開始！！

まあまあ良さがある

詳しくは GitHub yu-i9/HoogleSwitcher

TypeScript

『TypeScript playground』

でググるとインタープリタが出てきます

基本の型

var num: number = 1;
var boolArray1: boolean[] = [true, false];
var boolArray2: Array<boolean> = [true, false];

function numToString(num: number): string {
  return num.toString();
}

var printAny: (obj: any) => void;
printAny = function printAny(obj) {
  console.log(obj);
}

インターフェース

interface Animal {
  name: string;
}

function displayName(animal: Animal){
  alert(animal.name);
}

// Error
displayName({});

// OK
displayName({name: "cat", color: "black"});  

// OK!
displayName({name: "cat"});

クラス

class Animal {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }

  displayName(): void {
    console.log(this.name);
  }
}

var cat: Animal = new Animal("cat");
cat.displayName();  // "cat"

インターフェースをクラスで実装する

interface AnimalInterface {
  name: string;
}

class Animal implements AnimalInterface {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
}

Generic

function identity<T>(arg: T): T {
  return arg;
}

// OK!
var v1 = identity<number>(1);

// OK!
var v2 = identity(1);

まとめ

良さ

• 同じモデルを複数のページから操作する

  • モジュール化のうまみ
  • インターフェースを型で定めるうまみ

• 型を「つけてもよい」

  • 失うものがほとんどない（ES5ならそのまま通る）
  • Gradualのうまみ

注意点

• 環境構築がとにかくダルい

  • ただでさえ流れの速いJSの環境構築界隈
  • TypeScriptは情報が少ないほう

• コンパイルが通っても安心しない

  • 型注釈が無かったりスコープで死んだり
  • あくまで Javascript だと思って書くべき