特定の配列の組み合わせタイプに関する TIL

さて、実際には「特定の配列の組み合わせタイプ」とは呼ばれていませんが、調べる前に私が持っていた最高の説明でした.
実際には「タプル型」と呼ばれ、ドキュメントは次の場所にあります: https://www.tutorialsteacher.com/typescript/typescript-tuple

なぜこれが今日私を驚かせたのかについては後で説明しますが、まず、JS/TS プログラミングへの最初のステップのいくつかに戻りましょう.私は Java でプログラミングのキャリアを始めましたが、非常に腹立たしいことの 1 つは、関数から返されるオブジェクトが 1 つしかないという事実でした (これは Pair クラスが導入される前のことです).

しかし、JS では、2 つの値を持つ配列を簡単に返すことができます.

const someFunction = () => {
    return ['Mathias', 28];
}

そして、受信時のいくつかの破壊と組み合わせると、すべてが素晴らしく簡単になりました.

const [myName, myAge] = someFunction();

タイプの追加

今日まで、このようなシナリオに型を追加する必要はありませんでした.通常、配列を操作するときは、基本的な string[] を実行するか、複雑なオブジェクト シナリオで必要な場合は Array<{name: string, age: number}> を実行します.
しかし、タプルを使用すると、実際には名前を付けずに、関数の戻り値の型が [string, number] であると言うことができます.

const someFunction = (): [string, number] => {
    return ['Mathias', 28];
}

ビュー関係

Vue2 と TS を組み合わせて作業しているときにこれに遭遇し、Map で v-for ループを作成しようとしていましたが、Vue2 はこれをサポートしていなかったため、同じ最終目標をサポートする別のアプローチを考え出す必要がありました. .

そこで、新しいタプルが役に立ちました! Map にいくつかのデータを含む例を考えると、次のようになります.

const map = new Map<string, object>();
map.set('key1', {data: 'lots of data'});
map.set('key2', {data: 'more data'});

次に、次のように配列に分解できます.

const asArray = ...map.entries();
// Yielding:
[
    ['key1', {data: 'lots of data'}],
    ['key2', {data: 'more data'}],
]

そして、これを入力するために、次のようになりました.

const asArray: Array<[string, object]> = ...map.entries();

ここまで読んでくれてありがとう、この投稿から何かを得られることを願っています.