Typescript初学者向けTips - プログラマ英語学習日記

たまにはコードネタ。最近仕事でTypeScriptを始めたので、初学者向けのTipsでも書いてみます。

もちろんTypeScriptは生のJavascriptをほぼそのまま書け分かりやすい言語ですが、結構「モダン」な記法を備えているのでそこを抑えるとコードをすっきりさせることができることが分かりました。

今回は、Javascript(or Java)から抜けだして、ちょっとだけモダンな書き方をするためのTips集です

※対象はJavaScript or Javaをメインとしてる人です。Kotlin等の最近の言語になれてる人なら見る価値ないかと。

※本当に初めての人向けなのをご理解ください＆自分も始めたばかりです

コンストラクタ-プロパティ

最近の言語にはよくある機能ですね（正式名称はなんていうんだろう？）。

コンストラクタ部分で同時にメンバ(プロパティ)を宣言できます

//古典的(?)手法。メンバ定義が別
class OlderStyle {
   public size : number
   constructor(size : number) {
      this.size = size
   }
}

//こう書いてスッキリ!
class ModernStyle {
   constructor(public size: number) {
   }
}

このように、コンストラクタ引数の前にアクセス修飾子を付けると同時にメンバとして宣言されます。

特に構造体のような、コンストラクタの値を保持するだけのクラスを作るときに便利です。

しかしやりすぎは禁物かなと思ってます。パッと見だとメンバ宣言されてるか分からないんですよね。

最初はとにかくコンストラクタで宣言してましたが、「コンストラクタにないメンバ」が増えてくると逆に見づらく感じました。

うまく使うと楽に書ける＆読めるのは間違いないので、「用法容量をまもって」というところでしょう。

メソッドのデフォルト引数

こちらも最近の言語にはよくある機能ですね。特に解説する必要はないと思うので簡単なサンプルだけ。

//こう書いてスッキリ!
class ModernStyle {
    setName(name: string, writeToFile: boolean = true) {
      //.....
    }
}

こんな感じ。

プロパティメソッド

再びよくある機能(笑)。外部からは単純なフィールドアクセスとして記述するのですが、実態はアクセサメソッド呼び出しというものです。

class Sample {
    //内部状態保持用
    private _count = 0
    
    //外部公開アクセサ
    get count() : number {
        return this._count //内部変数を返す
    }
    set count(n : number) {
        this._count = n
        //ほかの処理
    }
}
//外からの使い方
const s = new Sample()
const c = s.count
s.count = c + 1

今回は内部に値を持ちましたが、もちろん持たないようなメソッドも作れます。そしてGetterのみも可能です。

class Vector {
   constructor(public x: number, public y: number) {
   }
   //長さ取得。Setはできない
   public get abs() {
      return Math.sqrt(x * x + y * y)
   }
}
const v = new Vector(3, 4)
v.abs  //5

「特殊処理はない。でもゲッタは公開したいけどセッタは公開したくない！」というときもこの方法が使えます。（ちょっと面倒ですが）

以上です。機能自体は他言語にもよくあるやつばかりですね。

ただ、自分がそうだったのですが最初はどうしても「型注釈つきJavascript」として書いてたのでこの辺は全然使えてませんでした。

この辺を書けるようになるとぐっと楽になるのでオススメです。

Typescriptを始めたばかりの人はぜひ使ってみてください。

コンストラクタ-プロパティ

メソッドのデフォルト引数

プロパティ メソッド

プロパティメソッド