TypeScript初心者が知っておくと嬉しいこと

記事の概要

TypeScriptを学ぶ前に知っているともっとスムーズに理解できたな〜と思ったことを中心にまとめました。

TypeScriptって何？

TypeScriptのコードはコンパイルするとJavaScriptになります。
TypeScriptはJavaScriptとは全く違う言語というわけではありません。
TypeScriptはJavaScriptの構文なので普通のJavaScriptと共存することができます。
静的型付け言語です。

コンストラクタ

TypeScriptはコンストラクタを設定することができます。
コンストラクタは簡単に言うとインスタンスを作成したタイミングで実行されるメソッドのことです。
もう少し具体的に言うとクラスをnewした瞬間に実行される関数のことです。
コンストラクタの詳しい説明は下記のサイトを参考にするとわかりやすいと思います。
コンストラクタの詳しい説明
実際のコードはこんな感じです。

constructor.ts

class User {
    name: string;
    //インスタンス化するとこのcounstructor()が実行されてthis.nameにTaroが入る。
    constructor(name: string){
        this.name = name;
    }
}

var taro = new User("Taro");
console.log(taro.name); //Taroが出力される。

ちなみにコンストラクタの書き方が少し違うのですが、
このconstructor2.tsは上のconstructor.tsと同じ意味になります。

constructor2.ts

class User {
    constructor(public name: string) {
    }
}

var taro = new User("Taro");
console.log(taro.name); //Taroが出力される。

private

コンストラクターの引数にprivate修飾子をつけるとクラス内からは呼ぶことができますが、他のクラスもしくはインスタンスから呼ぶことができなくなります。
private修飾子の変数の名前はわかりやすいようにアンダーバーをつけます。(例 _name)
先ほど紹介したコンストラクタの書き方をふまえてprivateを使ってみます。
具体的なコードはこんな感じです。

constructor.ts

class User {
    constructor(private _name: string) {
    }
}

var taro = new User("Taro");
console.log(taro._name); //「_nameはprivateが付いているからclassの中でしか使えないよ」とエラーが出る。

ゲッターとセッター

「コンストラクタの引数にprivateつけてもclassの外から触りたい！」
「値の設定とか値の取り出しくらいはさせてよー」
というときに使うのがゲッターとセッターです。
TypeScriptはゲッターとセッターを設定することができます。
ゲッターとセッターに関する詳しい説明は下記のサイトを参考にするとわかりやすいと思います。
ゲッターとセッターの詳しい説明
先ほどのconstructor.tsに続いて書いて行きます。

constructor.ts

class User {
    constructor(private _name: string) {
    }

    //ゲッター
    //ゲッターは値を排出します。
    get name() {
        return this._name;
    }

    //セッター
    set name(value: string) {
        this._name = value;
    }
}

var taro = new User("Taro");
console.log(taro.name); //Taroが出力される。
taro.name = "yamada"; //セッターを使ってyamadaを代入。
console.log(taro.name); //yamadaが出力される。

インターフェイス

インターフェイスとは簡単に言うとオブジェクトに名前をつける機能です。

下のコードの例ではResultというインターフェイスを作っています。
するとResult型ができます。Result型はaとbを持っていないとダメということになります。
aとbどちらか一方でも持っていないとエラーが出ます。

具体的なコードはこんな感じです。

interface.ts

//インターフェイスを定義
interface Result {
    a: number;
    b: number;
}

//sum(result: Result)と書くことで引数resultは必ずaとb持たなければならない。
function sum(result: Result) {
    return result.a + result.b;
}

var result = {
    a: 30,
    b: 20
};

console.log(sum(result)); //50が出力される。

この

function sum(result: Result){...}

はResult型のresultという引数だよという意味です。