TypeScriptを使う上で理解しておきたい便利な3つの機能

今回はTypeScriptを使う上で理解しておきたい3つの便利な機能について解説していきます。
その中でも型推論とジェネリクスに焦点を当てて、その魅力と応用を深掘りしてみましょう。

型推論の効果とその働き

まずは一つ目のテーマ、型推論について紹介します。
型推論はTypeScriptのコーディングを 簡潔で効率的にする 重要な要素です。

let welcomeMsg = 'Hello, TypeScript!';

上記のコード例を見てみましょう。
ここで注目するべきは welcomeMsg の型を明示的に宣言していないにも関わらず、TypeScriptが この変数がstring型であることを見抜いている 点です。

これが型推論の力です。
これによって型を明示的に書く必要がない場面が増えるためコーディングがすっきりします！

超便利なTypeScriptの8つのユーティリティ型で効率アップ

使いこなすととても便利なTypeScriptのPartial、Readonly、Pick、Required、Record、Omit、Exclude、Extractのユーティリティ型について特徴と使い所を解説します。

gizanbeak.com

ジェネリクスを用いた柔軟な型管理

次にジェネリクスについて紹介します。
ジェネリクスはTypeScriptの柔軟性を引き出す鍵となる要素の一つです。

function getArray<T>(items : T[] ) : T[] {
    return new Array<T>().concat(items);
}

let myNumArr = getArray<number>([100, 200, 300]);
let myStrArr = getArray<string>(["Hello", "World"]);

上記の例では getArray 関数がジェネリクスを使用しています。

ここでの <T> 部分がジェネリクスで、この関数が呼び出された時に特定の型（この場合はnumberやstring）に 置き換わる のです。

このようにジェネリクスを用いることで一つの関数やクラスが多様な型に対応できるようになります！

TypeScript のアロー関数でジェネリクスを使いこなす方法

アロー関数でジェネリクスを使いこなすTypeScriptテクニックを分かりやすく解説！

gizanbeak.com

TypeScriptの型ガードとは？

最後に型ガードという有益な機能を見ていきましょう。

function isNumber(x: any): x is number {
    return typeof x === 'number';
}

function processContent(x: number | string) {
    if (isNumber(x)) {
        return x.toFixed(2); // number型のメソッドです
    }
    return x.trim(); // string型のメソッドです
}

上記のコードでは isNumber 関数が型ガードとして機能しています。

型ガードとは 特定の場所で変数の型を狭める（特定する） 機能のことです。
これによって特定の型のメソッドやプロパティを安全に利用することができます。

コード内では isNumber がnumber型の場合は toFixed を実行し、string型なら trim を実行するといったように型によって処理を変えていますね。

型ガードで TypeScript コードを強化！わかりやすい解説と実践例

型ガードを使ってTypeScriptのコードを安全・堅牢に！具体例も紹介しています。

gizanbeak.com

まとめ

TypeScriptを使う上で理解しておきたい3のつ便利な機能として、型推論、ジェネリクス、そして型ガードといったTypeScriptの便利な機能を紹介しました。

これらの機能はTypeScriptが強力な型安全性と同時に柔軟で効率的なコーディングを可能にする要素です。

皆さんもこれらの知識を活かして、よりスマートなコーディングを楽しんでみてくださいね。

Gizanbeak