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 だと思って書くべき
Made with Slides.com