【超基礎】TypeScript、readonly修飾子について

前提

この記事は、初学者の私が、サバイバルTypeScriptで学んだこと+調べたことをまとめたものになります。

従って、経験則に基づいた発言ではないため、一部慣習とは違っていたり、認知にずれがあったりする可能性がありますので、ぜひコメントで指摘していただけると幸いです。

環境

記事内のコードは以下の環境で動作確認済みです。

• Node.js: v22.10.0
• TypeScript: Version 5.6.3

readonly修飾子とは？

• その要素を読み取り専用にする修飾子
• 配列や、オブジェクトのプロパティに使える
• constの様に再代入を防ぐわけではない

配列へのreadonly

• 編集できない配列として宣言できる
• readonlyを型注釈の前につける方法と、ReadonlyArray<T>型として型注釈する方法がある
• 別のreadonly配列への代入はできるが、通常の配列に対しては不可

let nums1: readonly number[] = [1,2,3]

nums1=[4,5,6]//再代入は可能

nums1[1] = 4 //Error
nums1.push //Error

let nums3: number[] = num1 //Error

オブジェクトへのreadonly

• readonlyをつけたプロパティのみを読み取り専用にする

• プロパティの書き換えはできないが、再代入は可能

• JSにはreadonlyが無いため、コンパイル時にチェックされる

//readonlyのプロパティを持つオブジェクト
let a:{
    readonly num: number;
    str: string
} = { num: 5,str: "hello" }


a.num = 5 //error

a = {num: 4,str: "world" };//再代入は可能
a.str = "こんにちは"//readonlyがついていないため編集可能

ネストされたオブジェクトについて

直下のプロパティのみに作用するため、ネストされたプロパティには効かない
➡読み取り専用にしたいすべてのプロパティにreadonlyを付ける

const obj:{
    readonly a:{
        num: number;
        str: string;
    };
} =  { a: { num: 5, str: "hello"} };

obj.a = {num: 3,str: "world"};// error プロパティaの編集はできない

obj.a.num=5;//ネストされたnumプロパティは書き換え可能

一括でreadonlyにする

• Readonly<T>により、一括で読み取り専用にできる
• ネストされたプロパティには効かない

//通常逐一readonlyを付ける必要がある
let obj1: {
    readonly num: number;//書き換え不可
    readonly str: string;//書き換え不可
} 

//一括でreadonlyにできる
let obj2: Readonly<{
    num: number;//書き換え不可
    str: string;//書き換え不可
}>

//ネストされたプロパティには効かない
let obj3: Readonly<{
    a:{
        num:number;//書き換え可能
        str:string;//書き換え可能
    };
}>;

まとめ

以上になります。

当方初学者なため、認知のずれや、モダンな開発現場ではもう使わない表現などがありましたらコメントで指摘していただけると幸いです。😸