【Typescript】number[]型と[number]型の違いを知っていますか？

Typescript初心者のころnumber[]型を、間違えて[number]と書いた時があり、最初はエラー検出をされなかったのですが、後々つまづいてしまい、この書き方は良くないのだと単純に理解してしまいました

しかし、よくよく勉強してみたら、[number]という型指定にも意味があることを知り、興味深かったので記事にしてみることにしました

結論

number[]は配列だが、[number]はタプルを表している

タプルとは

タプルとはなんぞやと思った方も多いとは思いますが、ざっくり説明すると、
要素数と各要素の型が決められた配列のことを指します

要素数が決まってるので、例えば次のような挙動をします

const arr: number[] = [0];
arr[1] = 1; // OK: 配列なので、要素数は可変

const tuple: [number] = [0];
tuple[1] = 1; // NG: タプルは要素数が固定

また、タプルは要素の型も決まっているので、次のような挙動もします

const tuple: [number, string] = [0, "Hello"];
tuple[0] = "World"; // NG: 1番目の要素はnumber型なので、string型は代入できない
tuple[1] = 1; // NG: 2番目の要素はstring型なので、number型は代入できない
tuple[1] = tuple[1].toUpperCase(); // OK: 2番目の要素はstring型なので、string型のメソッドが使える

こんなところにもタプル

タプルと聞いて、
「何それ使う機会無いから、覚えなくても良いや」
と思った人も多いと思います

しかし、Reactを使ったことのある人の99%はタプルを使ったことがあります
なぜなら、タプルはuseStateの返り値にも使われているからです

const [count, setCount] = useState<number>(0);

useStateは、状態とその状態を更新する関数の2つをタプルとして返しているのです

まとめ

Typescriptを使っていると、タプルであることを意識しなくても何となく使えてしまうので、普段意識することは少ないかもしれませんが、知っておくことで学びのきっかけになれば幸いです！