【ISSUE】[TypeScript]constとreadonlyの違い

0

2024年12月23日 8:40

constとreadonlyの違い

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

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

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

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

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

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

const assertionについて

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

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

次は、以下の例です。
img
このサンプルコードの「Continent」のタイプエイリアスがもつプロパティは、readinlyとしているため、以下のように代入することはできません。
img
しかし、次のようなことはできます。
img
これはreadonlyをつけたプロパティ(canada, us, mexico)がオブジェクトである場合、そのオブジェクトのプロパティ(例えば、canadaオブジェクトのnameとcapitalCity)までは、readonlyにしないという仕組みとなっているためです。

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

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

img

img

このように、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]

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。