TypeScriptの超基本ポイントをまとめてみました!

プログラミング

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

今回は個人的にTypeScriptを学ぶ需要があったこともあり、TypeScriptの超基本ポイントをまとめてみることにしました。

対象読者

  • プログラミングの基本的な知識がある方
  • JavaScriptの基本的な知識がある方
  • TypeScriptがどんなものなのか、雰囲気を知りたい方

TypeScriptとは

TypeScriptはMicrosoft社が開発したオープンソースのプログラミング言語です。TypeScriptの大きな特徴は

  • JavaScriptに厳格な型の概念を用いることができる。
  • クラスの概念を基本とした本格的なオブジェクト指向プログラミングができる。
  • JavaScriptの文法がそのまま使える
    という点です。

それでは実際に試してみましょう。

TypeScriptの環境構築

環境構築については本記事では割愛させていただきます。公式サイトの下記をご覧ください。

型注釈

それでは、実際にTypeScriptの機能を見てみましょう。ここで説明する型注釈は、型を明示する方法を提供します。JavaScriptとTypeScriptの2つの例で見てみましょう。

(javascript)

function hello(name) {
    console.log("こんにちは、" + name + "さん");
}

こちらはJavaScriptで関数を作成し、それを呼び出したものです。

同様のプログラムをTypeScriptで型注釈をつけて作成したプログラムは、このようになります。

function hello(name:string) {
    console.log("こんにちは、" + name  + "さん");
}

関数helloの引数nameと、変数meに:stringが付記されています。これにより、helloに渡すべき型は厳密にstringとなります。

たとえば、次のようにhello関数を呼び出すプログラムを続けて記述します。

function hello(name:string) {
    console.log("こんにちは、" + name  + "さん");
}
let me = 5;
hello(me);

コンパイルを実行すると、次のようにエラーとなります。

error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

これは、型が一致しないことを表すエラーです。引数meがnumber型になっているため、起こっています。

インタフェース

次はインタフェースを使ったプログラムを見てみましょう。

//インタフェースの作成
interface Score{
    kokugo: number;
    sansu: number;
}
//関数
function displayScore( value: Score ) {
    console.log("国語:" + value.kokugo);
    console.log("算数:" + value.sansu);
    let total = value.kokugo + value.sansu;
    console.log("合計:" + total);
}

インタフェースの役割は、JavaScriptオブジェクトのプロパティを保証することです。

関数displayScoreが引数として受け取るオブジェクトは、Scoreインタフェースが示すように、数値型のプロパティであるkokugosansuを持っていなければなりません。

この関数を呼び出すいくつかの例を見てみましょう。
(例1)

let taro = { kokugo: 80, sansu: 90 };
displayScore(taro);

こちらは、正しくコンパイル・実行できます。taroのオブジェクトを作成は、JavaScriptの文法でそのまま記述ができています。

(例2)

let taro = { koku: 80, su: 90 };
displayScore(taro);

こちらをコンパイルすると次のようなエラーとなりました。

error TS2345: Argument of type '{ koku: number; su: number; }' is not assignable to parameter of type 'Score'.
  Type '{ koku: number; su: number; }' is missing the following properties from type 'Score': kokugo, sansu

このエラーでは、プロパティ名がScore型と一致しないことを表しています。型のみならずプロパティ名も厳密にチェックされる点はinterfaceのすごいところだと感じます。

それでは、もう少し見てみましょう。

(例3)

let taro = { kokugo: 80, sansu: 90, rika:75, syakai:80 };
displayScore(taro);

こちらは正しくコンパイルすることができます。このように、interfaceで定義するプロパティ以外のものが含まれている点は問題になりません。つまりinterfaceの役割は、オブジェクトに特定のプロパティが含まれることを保証することにあります。

クラスの作成

それでは最後にクラスを作成したオブジェクト指向プログラミング的なサンプルを見てみましょう。

class Seiseki{
    //フィールド
    name: string;
    kokugo: number;
    sansu: number;
    //コンストラクタ
    constructor(name: string, kokugo: number, sansu: number) {
        this.name = name;
        this.kokugo = kokugo;
        this.sansu = sansu;
    }
}
function displayScore( value: Seiseki ) {
    console.log("国語:" + value.kokugo);
    console.log("算数:" + value.sansu);
    let total = value.kokugo + value.sansu;
    console.log("合計:" + total);
}
//利用例
let taro = new Seiseki("タロウ", 80, 70);
displayScore(taro);

Javaなどのオブジェクト指向言語の経験者はイメージしやすいかもしれません。Seisekiというクラスを作成し、new演算子を用いて、オブジェクトを作成しています。

おわりに

TypeScriptはJavaやJavaScriptの経験のある型には、始めやすい言語だと感じます。と同時にTypeScriptが誕生した目的の1つである「JavaScriptによる大規模開発の実現」という点がなんとなくわかるような気がしました。

JavaScriptのメジャーなフレームワークもTypeScriptに対応しているものも多く、やっておいて損はない言語だと感じました。ぜひ、機会がありましたら体験してみてください。


合同会社イー・シー・エフでは、子ども向けプログラミングなどの教育講座を実施しています。プログラミング教室の案内や教育教材の情報、また関連するご相談・問い合わせにつきましては下記よりご確認ください。

ECFエデュケーション
キッズも大人も。沖縄からITのマナビを応援します
タイトルとURLをコピーしました