TypeScript学習ログ（その２）インタフェース、オプショナル

こんにちは、ECF Techブログ
担当 Michiharu.Tです。

今回もTypeScriptについて、学習記録を兼ねてお伝えしていきたいと思います。

TypeScriptなだけあって、まずは型（Type）についてきちんと学ぼう！をテーマに、おおよそ次のキーワードについて書きたいと思います。

interface
function type
optional

では早速行ってみましょう！

対象読者

プログラミングの基本的な知識がある。
JavaScriptについての基本的な知識がある。

また、今回の記事はTypeScriptの公式ページのハンドブックを参考に、独自の題材を使って説明しております。本家サイトについては、下記をご覧ください。

Handbook - Interfaces

How to write an interface with TypeScript

オプショナル型

TypeScriptでは、オプショナル型変数が使用できます。interfaceに利用する例を見てみましょう。

interfaceについては、本ブログのこちらこちらの記事をご覧ください。

interface Score{
    japanese: number;       //国語
    math:number;            //数学
    english:number;         //英語
    science?:number;        //理科
    socialStudy?:number;    //社会
}

上のプログラムのうちscienceとsocialStudyプロパティについては、後ろに?がついています。これがオプショナル型を示す記号です。

この例の場合、Score型となるオブジェクトはscienceとsocialStudyのプロパティは、必須ではなくなります。

例を見てみましょう。上のScoreインタフェースが宣言されているものとします。

let taro : Score = {
    japanese: 80,
    math: 75,
    english: 90
};
console.log(taro.math);
console.log(taro.science);

実行結果

75
undefined

変数taroはScore型として宣言しています。そのtaroに代入しているオブジェクトにはscienceとsocialStudyプロパティはありませんが、代入ができていることがわかります。また、実際には存在しないプロパティを参照するとundefinedとなっていることがわかります。

関数型

次にインタフェースに関数型（Function Type）を定義する例を見てみましょう。この例もScoreインタフェースが定義済みとします。

interface ScoreCalc{
    ( data: Score ) :void;
}

関数の型ということで、引数と戻り値だけが記述されます。( 引数名:型 ) : 戻り値型の記述順です。

このインタフェースは次のように使用します。一旦、ここまでのすべてのプログラムを記述します。

interface Score{
    japanese: number;       //国
    math:number;            //数
    english:number;         //英
    science?:number;        //理
    socialStudy?:number;    //社
}

let taro : Score = {
    japanese: 80,
    math: 75,
    english: 90
};

interface ScoreCalc{
    ( data: Score ) :void;
}

let calcMainSubject : ScoreCalc;
calcMainSubject = function( data: Score ){
    let sum : number = data.japanese + data.math + data.english;
    console.log("主要3教科の得点:" + sum);
};
calcMainSubject(taro);

実行結果

主要3教科の得点:245

国語・数学・英語の３科目が表示されました。calcMainSubject変数はScoreCalc型なので、ScoreCalcと同じ型の関数オブジェクトしか代入できません。

この使い方だと意義が薄いですが、TypeScriptを使ったライブラリだと、コールバック関数を関数型で指定するなどの例がみられます。

次に5科目の合計を表示するプログラムを作りましょう。先程のプログラムの続きとして、次を追加します。

let  calcAllSubject : ScoreCalc = function( data: Score ){
    if( data.science && data.socialStudy ){
        //5科目の合計を計算
        let sum : number = data.japanese + data.math + data.english
            + data.science + data.socialStudy;
        console.log("5教科の得点:" + sum);
    } else{
        console.log("5科目の得点は計算できません");
    }
};

5科目の計算です。今度は変数宣言と同時に関数を代入しています。

これにつぎを追加して、実行テストをします。

let hanako: Score = {
    japanese : 90,
    math : 85,
    english : 80,
    science : 75,
    socialStudy : 90
};
calcAllSubject(taro);
calcAllSubject(hanako);

実行結果

5科目の得点は計算できません
5教科の得点:420

calcAllSubjectは5科目の合計を計算して表示します。taroは5科目の値をすべて持っていないので、メッセージが表示されています。それに対してhanakoは5科目の値をすべて持っているので、計算結果が表示されています。

というわけで、ここまでのプログラムをすべて表示します。コメントを適宜入れていますのでご参考ください。

interface Score{
    japanese: number;       //国語
    math:number;            //数学
    english:number;         //英語
    science?:number;        //理科
    socialStudy?:number;    //社会
}

let taro : Score = {    //理科と社会は必須ではないので、型はOK
    japanese: 80,
    math: 75,
    english: 90
};
console.log(taro.math);
console.log(taro.science);  //undefindとなります。

interface ScoreCalc{
    ( data: Score ) :void;  //関数の型定義
}

let calcMainSubject : ScoreCalc;
calcMainSubject = function( data: Score ){
    let sum : number = data.japanese + data.math + data.english;
    console.log("主要3教科の得点:" + sum);
};
calcMainSubject(taro);

let  calcAllSubject : ScoreCalc = function( data: Score ){
    if( data.science && data.socialStudy ){
        //5科目の合計を計算
        let sum : number = data.japanese + data.math + data.english
            + data.science + data.socialStudy;
        console.log("5教科の得点:" + sum);
    } else{
        console.log("5科目の得点は計算できません");
    }
};

let hanako: Score = {
    japanese : 90,
    math : 85,
    english : 80,
    science : 75,
    socialStudy : 90
};
calcAllSubject(taro);       //5科目の合計が算出できないので、メッセージ
calcAllSubject(hanako);     //5科目の合計が算出される