TypeScriptタプル

特定の型の配列に値を格納したい場合があります。 anyタイプを使用すると、もちろんこの問題を解決できますが、不要な特定のタイプも許可されます。これはタプルが入ってくるところです。

userNameとuserIdのuser配列を作成するとします。

let user: any;
let userId = 1;
let userName = "Alf";

let randomBoolean = true;

user = [userId, userName]; // valid
user = [userId, randomBoolean]; // also valid

userをanyタイプに設定することで、任意のタイプを割り当てることができます。これにより、numberであるuserIdの目的が無効になります。 ]とstringタイプのuserName。これを解決するには、タプルを使用できます。

let user: [number,string];
let userId = 1;
let userName = "Alf";
let randomBoolean = true;

user = [userId, userName]; // valid
user = [userId, randomBoolean]; // error: Type 'true' is not assignable to type 'string'

タプルは、目的のタイプを角かっこで囲み、コンマで区切って定義します。この場合は、numberとstringです。ここで、タプルで定義されていないタイプ、たとえばbooleanを渡すと、次のようなエラーメッセージが表示されます。

タイプ「true」はタイプ「string」に割り当てることができません。

これは、2番目の入力としてstringを受け入れるようにタプルを定義したが、booleanを渡したためです。

タプル内の要素へのアクセス

タプル内の要素にアクセスするには、配列の場合と同じようにそのインデックスを使用します。

console.log(user[0])  // 1
console.log(user[1])  // Alf

タプルは、辞書またはキーと値のペアを作成するときに非常に役立ちます。上記の例を使用すると、後で問題を引き起こすために誤って別のタイプを渡すことなく、ユーザー名とそのIDの配列を取得できます。

let users: [number, string][] = [[1,"Alf"],[2,"Jane"],[3,"Nii"]];

タプルに値を割り当てる場合、最初の2つの値は、タプルで定義されているタイプと正確に一致する必要があります。

たとえば、上記の例では、最初の要素はnumberであり、2番目の要素はstringである必要があります。値を交換すると、タプルでタイプが定義されていてもエラーが発生します。

let user: [number,string];
user = ["Alf", 1]; // invalid

上記のコードは無効です。userは最初の要素がnumberで、2番目の要素がstringであると想定していますが、その逆はありません。

タプル変数に追加する後続の値は、特定の順序で事前定義されたタプルタイプのいずれかになります。

user[2] = "John"; // valid
user[3] = 4; // valid
user[4] = true; // invalid.

上記のコードでは、タプルはnumberとstringで宣言されているため、stringまたはnumberのいずれかの要素を入力できます。それらが最初の2つの要素でない場合は順序付けます。タプルがbooleanタイプで宣言されていないため、要素にboolean値を割り当てることはできません。

それでおしまい。この投稿がお役に立てば幸いです。 ✨