constとreadonlyの違い

JavaScriptでは、constで宣言した変数は代入不可になります。
TypeScriptではオブジェクトの型のプロパティにreadonly修飾子をつけると、そのプロパティが代入不可になります。

constは変数への代入を禁止にするもの

constは変数への代入を禁止するもの。例えば、constで宣言されたxに値を代入しようとすると、TypeScriptではコンパイルエラーになり、JavaScriptでは実行時エラーになります。

このように、変数そのものに代入をすることはできません。
以下のように、変数のプロパティへの代入は許可されています。

readonlyはプロパティへの代入を禁止にするもの

TypeScriptのreadonlyはプロパティへの代入を禁止するものです。
例えば、readonlyがついたプロパティxに値を代入しようとすると、コンパイルエラーになります。

const assertionについて

TypeScriptにおいて const assertion は、変数やプロパティに対して型を推論せず、明示的にその変数やプロパティが不変であることを宣言するための機能です。
通常、TypeScriptは変数の初期化時にその型を推論しますが、const assertion を使うとその変数が後で変更されないことをコンパイラに伝えることができます。

この例では、as const を使って変数 y およびオブジェクト obj のプロパティに const assertion を適用しています。これにより、変数やプロパティが後で変更されないことを示し、TypeScriptはそれに基づいて型を厳密に制約します。

次は、以下の例です。

このサンプルコードの「Continent」のタイプエイリアスがもつプロパティは、readinlyとしているため、以下のように代入することはできません。

しかし、次のようなことはできます。

これはreadonlyをつけたプロパティ(canada, us, mexico)がオブジェクトである場合、そのオブジェクトのプロパティ(例えば、canadaオブジェクトのnameとcapitalCity)までは、readonlyにしないという仕組みとなっているためです。

const assertionはすべてのプロパティを固定する

先ほどのコードにas constを付け加えます。

こうすることによって、以下のように、as constをつけたオブジェクト(america)の中身のオブジェクト(canada, us, mexico)もreadonlyとして、代入をできなくすることができます。

このように、const assertionを使用することで、より堅牢なオブジェクトを作ることができます。

参考

https://typescriptbook.jp/

最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]