TypeScriptタプル

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

作成したいとします user の配列 userName と userId;

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

let randomBoolean = true;

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

私たちを設定することによって user の any タイプ、私たちはそれに任意のタイプを割り当てることができ、これは私たちの目的を打ち負かします userId これは number と userName これは string タイプ。 これを解決するには、タプルを使用できます。

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」に割り当てることができません。

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

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

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

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

---

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

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

たとえば、上記の例では、最初の要素は number そして第二に、 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 タイプ。

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