とりゅふの森

GCPデータエンジニアとして生きる

TypeScriptはじめました

f:id:true-fly:20220220154136p:plain

皆さん、JavaScriptはお好きですか?僕は苦手です。
なので僕ははじめました、TypeScriptを。
TypeScriptはGoogleが2017年に社内の標準言語の一つとしていると公言しています。なら学ぶしかないでしょう。TypeScriptを。

www.publickey1.jp

そもそもTypeScriptってなに?

そもそもTypeScriptとはなんでしょう?
TypeScriptはMicrosoftによって開発された、JavaScriptを拡張した言語です。
下記Webサイトのトップページにはこのように書かれています。

www.typescriptlang.org

TypeScript is JavaScript with syntax for types.

”TypeScriptは、型構文を備えたJavaScriptです”と訳せます。
JavaScriptは動的型付け言語、一方でTypeScriptは静的型付け言語になります。
JavaScriptで開発するときに不便だったところを便利にした言語というわけですね。
TypeScriptはAltJS(Alternative JavaScript)、将来JavaScriptに取って代わる言語、
将来性が高い言語の一つと言えるでしょう!

JavaScriptとの違い

最も利用されているプログラミング言語の一つであるJavaScriptと比較して、TypeScriptを導入する上でのメリットデメリットについて考えてみます。

メリット

  • 静的型付け言語、関数の引数、戻り値に型が設定できる
  • JavaScript文法で記述できる
  • コンパイル時に型エラーなどをチェックできる
  • コンパイル時にECMSScriptのバージョンを指定できる
  • クラスやインターフェース、アクセス修飾子が利用できる*1
  • VSCodeなどの環境での入力補完が協力
  • 綺麗なコードが書けて楽しい

*1 JavaScriptにもclass構文はあるが、Javaのようなクラスとは違う仕様とのこと。

デメリット

  • 環境構築が必要
  • 開発人口が少ない
  • 学習コストがかかる
  • 静的型付け言語が嫌い

軽く調べて出てきたデメリットですが、そこまで懸念するデメリットではなさそうです。

TypeScriptの文法例

クラス、インターフェース、アクセス修飾子を用いたサンプルコードです。
変数の型定義、メソッドの引数、戻り値の型定義があるのが一番の特徴です。
Javaに近い感覚でコードが書けます。

interface Bird {
    id: number;
    name: string;
    fly(): void
    getName(): string;
}
   
class Kingfisher implements Bird {
    id: number;
    name: string;

    public constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
    }

    private swim() {
        console.log(this.name + ' swims.')
    }

    public fly() {
        console.log(this.name + ' flies.')
        this.swim();
    }

    public getName(): string {
        return this.name;
    }
}

const bird: Bird = new Kingfisher(111, 'truefly');
console.log(bird.getName());
bird.fly();

これをVScodeで書くと、以下のように型エラーチェックなどをしてくれます。
これこそ静的型付け言語ならではですね。

f:id:true-fly:20220221225301p:plain

f:id:true-fly:20220221225624p:plain

コンパイル後のjsファイルを実行すると、通常のjsと同様の結果が得られます。

$ node app.js 
truefly
truefly flies.
truefly swims

まとめ

以上、TypeScriptをはじめたので、TypeScriptとはなにかを簡単に紹介しました。
しかしこれだけでは概要しかお伝えできないので、次回は環境構築手順と、実際の開発方法についてご紹介しようと思います!