TypeScript でマップ型またはリスト型を宣言する

Shuvayan Ghosh Dastidar 2023年6月21日
  1. TypeScript で RecordMap 型を宣言する
  2. TypeScriptでListタイプを宣言する
TypeScript でマップ型またはリスト型を宣言する

マップとリストは、アプリケーション ロジックを記述するためにすべてのプログラミング言語で使用される基本的なデータ構造です。 マップはストアからデータ項目をすばやく取得するために使用されますが、リストはデータ項目が順番に格納されるデータ構造です。

TypeScript 自体は Map 型または List 型をサポートしていません。 ただし、TypeScript の組み込み型を使用して必要な型を作成するのは非常に簡単です。

TypeScript で RecordMap 型を宣言する

TypeScript は Record タイプを導入しました。これは、キーと値のペアを持つマップ タイプをサポートでき、さまざまなタイプのマップをサポートするためのジェネリック タイプを備えています。

より具体的には、Record<K,V> は、オブジェクトが型 K のキーのみを受け入れ、キーに対応する値は型 V でなければならないことを示します。

key of Record<K,V> は型として K を生成し、Record<K,V>[K] は V と同等です。 Record 型は { [ キー : K] : V }.

const colorMap : Record<string, string> = {
    'ylw' : 'yellow',
    'blk' : 'black',
    'bl' : 'blue'
};

したがって、ジェネリック型を使用すると、TypeScript の Map または Record 型に複数の型を設定できます。 コンパイル後、次の型付きオブジェクトは JavaScript の単純なオブジェクトになります。

型付きオブジェクトとは別に、ネイティブ Javascript には新しい Map インスタンスを初期化できる Map 関数があります。 それに関連するサポートされている機能がかなりあります。

次のコード セグメントは、Map 関数を使用して新しい Map オブジェクトを初期化する方法を示します。

const colorMap = new Map<string, string>();
colorMap.set("ylw", "yellow");
colorMap.set("blk", "black");

colorMap.forEach( ( v, k , _) => {
    console.log( "key : " + k + ", value : " + v);
})

// keys
var keyList : string[] = [...colorMap.keys()];
console.log(keyList);
// values
var valueList : string[] = [...colorMap.values()];
console.log(valueList);

出力:

"key : ylw, value : yellow"
"key : blk, value : black"
["ylw", "blk"]
["yellow", "black"]

表示されている関数とは別に、deleteclear などの他の関数もサポートしています。 これらはそれぞれ、マップから単一のエントリを削除するか、マップからすべてのエントリをクリアするために使用されます。

TypeScriptでListタイプを宣言する

TypeScript には組み込みの list 型はありません。 ただし、TypeScript は、連続したデータ要素を格納するための Array 型を提供します。 Array 型を使用してリスト データ構造 ADT を作成するのは簡単です。

class List<T> {
    private items : Array<T>;

    constructor(n? : number, defaultValue? : T){
        if ( n === undefined) {
            this.items = [];
        } else {
            if ( n && defaultValue){
                this.items = Array(n).fill(defaultValue);
            } else {
                this.items = Array(n);
            }
        }
    }

    push(item : T){
        this.items.push(item);
    }

    pop(item : T){
        return this.items.pop();
    }

    get(index : number) : T | undefined {
        return this.items[index];
    }

    set( index : number, item : T){
        this.items[index] = item;
    }

    getItems() : Array<T> {
        return this.items;
    }

}

List.prototype.toString = function listToString(){
    return JSON.stringify(this.getItems());
}

var list : List<string> = new List(5, "default");
list.set(1, "second");
list.set(0, "first");

console.log(list.toString());

出力:

"["first","second","default","default","default"]"

上記は、リスト ADT を構築するための基本的な例を示しています。 いくつかの基本的な関数を使用すると、アプリケーション ロジックで必要なリストをサポートするように簡単に拡張できます。

Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website

関連記事 - TypeScript Map