Interfaceというと、他の言語ならクラス定義の型のようなものだが、TypeScriptではより適用範囲が広く、ほとんどの型に適用できる。 おそらく、JavaScriptで起こる型関係のエラーを全部どうにかしたかったのでは無いかと思われる。

このページの内容は公式ページとだいたい同じなので、そちらも参照のこと。http://www.typescriptlang.org/Handbook

Interfaceの概要 anchor.png Edit

Interfaceは要素の存在が指定できるオブジェクトのようなもの。

function printLabel(labelledObj: {label: string}) {
  console.log(labelledObj.label);
}

var myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

もしmyObjにlabelという要素が無いと変換時にエラーとなる。 これによりJavaScript開発でよくある、オブジェクトの中に要素があると思ったらなかったために実行時エラーになるのをあらかじめ防いでくれる。

毎回上のように「{label: string}」と書いていくのは大変なので、よく使うInterfaceは型として定義できる。

interface LabelledValue {
  label: string;
}

すると次からこれを使って型を指定できる。

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

要素の存在を指定するのがInterfaceの良い所だが、とはいえ実際には使わないかもしれない変数を入れておきたいこともある。そんな時には変数の後ろに「?」を入れる。

interface LabelledValue {
  label?: string;
}

要素が無いこともあるので使うときはチェックして使う。

if(labelledObj.label){
  console.log(labelledObj.label);
}else{
  console.log("no label");
}

この場合、要素の存在を保証するという利点は失われるが、エディタの補完がきくのと、タイプミスのチェックが可能という利点は残る。

Page Top

関数型 anchor.png Edit

JavaScriptは変数に関数を入れられるので、コールバック関数の指定などでその機能をよく使うのだが、思ったような関数が入っていなくてエラーとなるというのもよく起こる。TypeScriptのInterfaceは関数型にも対応しているのでそれを防ぐことができる。 関数のInterfaceは「(引数のリスト):戻り値の型」という形式で書ける。

interface MyFunction{
  (arg1:string,arg2:string):boolean;
}

これで2つのstring型の引数を持ち、戻り値がbooleanの関数のInterfaceが定義できる。使うときには以下のようにする。

var myFunc:MyFunction = function(arg1:string,arg2:string):boolean{
  //なにか処理
}

もちろん、Interfaceで指定した引数と戻り値を持たない関数を入れようとするとエラーとなる。引数名は何でもかまわない。

Page Top

配列型 anchor.png Edit

Interfaceには配列も定義できる。添字にはnumberとstringが設定可能。

interface Dictionary {
  [index: string]: string;
} 

ただし、他の要素を加えるときにはその型が配列の添字と同じでないといけない。

interface Dictionary {
  [index: string]: string;
  length: number;//stringじゃないのでエラー
} 
interface Dictionary {
  [index: string]: string;
  length: string;//stringなのでOK
}

「[]」でアクセスしたときに矛盾するからと思われる。

Page Top

クラス型 anchor.png Edit

クラスの型定義。他の言語でInterfaceという時と同じもの。「implements」で実装する。

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface  {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}
Page Top

new anchor.png Edit

newを使うとインスタンス製作時の引数を指定できる。ただし、そのInterfaceを継承するとエラーとなる。

interface ClockInterface {
    new (hour: number, minute: number);
}

class Clock implements ClockInterface  {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

これはエラー。

interface ClockStatic {
    new (hour: number, minute: number);
}

class Clock  {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

var cs: ClockStatic = Clock;
var newClock = new cs(7, 30);

こちらはOK。コンストラクタはstaticに属するが、newでチェックするのはインスタンスに属するものなのでエラーが出るらしい。わからないときはJavaScriptのコンストラクタの仕組みを思い出すか、そういう物だと思っておけばよい。

Page Top

Interfaceの継承 anchor.png Edit

extendsでInterfaceからInterfaceを継承できる。何個でもできる。クラス型で無くてもできる。

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

var square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;
Page Top

ハイブリッド型 anchor.png Edit

一つのInterfaceをいろいろな型として使える。

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

var c: Counter;
c(10);//関数型として
c.reset();//クラス型としてメソッド呼び出し
c.interval = 5.0;//プロパティ

クラスで良いし、理解しづらいのであまり使われなさそうな気がするが実際どうかは知らない。


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 367, today: 1, yesterday: 5
初版日時: 2016-03-08 (火) 23:16:58
最終更新: 2016-03-08 (火) 23:33:16 (JST) (561d) by njf
広告

ログイン

ユーザー名:


パスワード:





パスワード紛失


NJF