知っておくと便利！TypeScriptの追加要素 (一部)

TypeScriptと使うメリット

素人ながらTypeScriptを使うメリットをまとめてみようと思います。
間違っている部分などありましたらコメントで優しく教えてください。
まだTypeScriptを導入していない方はこちらを確認してみてください。

注意

あくまで初心者を対象に書いています。
厳密にいうと違う表現があるかもしれませんがご了承ください。
今回紹介するのはあくまで一部です。
TSはTypeScriptの事です(一々正式名称だと大変なので省略しています)
.tsはTypeScriptの拡張子です。

1:JSとの互換性

まず大前提としてJSとTSには互換性があります。
つまり…

main.js

console.log("HELLO WORLD");

このコードをそのままmain.tsに入れて実行しても動かすことができます。

2:静的型付けが出来る

JSで静的型付けが使えずに不便だと思ったことはありませんか？
それを解決できるのがTypeScriptです。
例えば…

main.ts

const a:string = "HELLO";
console.log(a);

このように変数に代入する際に型を指定することができます。
主な型名はこんな感じです

型名	どういうものか
String	文字列
boolean	true or false
number	小数を含めた数値の型
null	値がない

あくまで一部なので他にもsymbol型やbigint形など、いろいろな型があります。

3:関数

TSでは関数の引数と戻り値に型注釈をつけることができます。

main.ts

function test(a:number,b:number):string {
    if ((a + b) >= 3) {
        return "答えは3以上です";
    } else {
        return "答えは3未満です";
    }
}

const c = test(1,1)
console.log(c)

この場合だとaとbという引数にnumberという型注釈をつけ戻り値をStringにしました。
今紹介したnumberとString以外にも色々指定できるので是非やってみてください。

4:ジェネリックス

JSだけやっていた人だとこの言葉をあまり知らないかもしれません。

ジェネリックスを簡潔に説明すると…
型の安全性とコードの共通化を両立の実現です。

例を見てみましょう

main.ts

function Random<T>(v1: T, v2: T): T {
    if (Math.random() <= 0.5) {
        return v1
    } else {
        return v2
    }
}

const a = Random<string>("WIN", "LOSE");
const b = Random<number>(3, 4);

console.log(a)
console.log(b)

引用元もよかったらご覧ください

このようなランダムな値を出すものにおいてジェネリックスは非常に役立ちます。
このコードを実行すると

LOSE
4

などと出てきます。
数回実行すると色々なパターンの値が帰ってくると思います。
今はnumberとStringだけでしたが、他の型でもやることができます。
このように任意の型で値を返してほしい時にジェネリックスは最適です。
関数より使う機会は低いかもしれませんが、困った時に是非お使いください。

最後に

今回紹介したもの以外にもTSには色々な追加要素があるので、JSに飽きてきたりJSに不満があったりしたら是非使ってみてください
自分はこれ以外にもいくつかTS関係の記事を上げているので良かったら見ていってください。

引用元

https://typescriptbook.jp/reference
https://www.typescriptlang.org/docs/