TypeScript で readonly を使用する場合の注意事項-jsチュートリアル-php.cn

TypeScript で readonly を使用する場合の注意事項

WBOY

リリース： 2024-08-11 06:02:01

オリジナル

362 人が閲覧しました

Cautions When Using readonly in TypeScript

読み取り専用プロパティの基本

Type Script では、オブジェクトのプロパティのオブジェクトを読み取り専用にすることができます。

const person: { readonly name: string  } = { name: 'Mike' }

person.name = 21;
// → Cannot assign to 'name' because it is a read-only property.

ログイン後にコピー

⚠️① readonly はコンパイル時のみです

コンパイルされた JavaScript コードでは、readonly 宣言が削除されるため、実行時にエラーとして検出されません。

⚠️② readonly は再帰的ではありません。

const person: {
  readonly name: string;
  readonly academicBackground: {
    primarySchool: string
  }
} = {
  name: 'Mike',
  academicBackground: {
    primarySchool: 'School A'
  }
}

person.academicBackground.primarySchool = 'School B'
// You can change `person.academicBackground.primarySchool`

ログイン後にコピー

読み取り専用にしたい場合は、primarySchool にも readonly を設定する必要があります。

const person: {
  readonly name: string;
  readonly academicBackground: {
    readonly primarySchool: string
  }
} = {
  name: 'Mike',
  academicBackground: {
    primarySchool: 'School A'
  }
}

person.academicBackground.primarySchool = 'School B'
// → Cannot assign to 'primarySchool' because it is a read-only property.

ログイン後にコピー

読み取り専用

プロパティの数が増えると、それぞれに readonly を追加するのは面倒になり、コード量も増加します。
Readonly を使用してリファクタリングできます。

const obj: {
  readonly a : string;
  readonly b: string;
  readonly c: string;
  readonly d: string;
} = {
  a: 'a',
  b: 'b',
  c: 'c',
  d: 'd'
}

// ↓

const obj: Readonly<{
  a : string;
  b: string;
  c: string;
  d: string;
}> = {
  a: 'a',
  b: 'b',
  c: 'c',
  d: 'd'
}

ログイン後にコピー

コーディングを楽しんでください☀️

以上がTypeScript で readonly を使用する場合の注意事項の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。