【TypeScript】【constアサーション】について

はじめに

この記事は【【TypeScript】【constアサーション】についての備忘録である。

【TypeScript】【constアサーション】とは

• オブジェクトリテラルの末尾にas const を記述すればプロパティでreadonlyリテラルタイプで指定した物と同等の扱いになる。

【readonly】と【constアサーション】の違い

• readonlyはプロパティごとにつけられる。
• const assertionはオブジェクト全体に対する宣言なので、すべてのプロパティが対象になる。
• const assertionは再帰的にreadonlyにできる
  オブジェクトの中にオブジェクトがあるときの挙動が異なる。
  たとえば次のようなオブジェクトがあるとする。

// サンプルコード
type Country = {
  name: string;
  capitalCity: string;
};
 
type Continent = {
  readonly name: string;
  readonly canada: Country;
  readonly us: Country;
  readonly mexico: Country;
};
 
const america: Continent = {
  name: "North American Continent",
  canada: {
    name: "Republic of Canada",
    capitalCity: "Ottawa",
  },
  us: {
    name: "United States of America",
    capitalCity: "Washington, D.C.",
  },
  mexico: {
    name: "United Mexican States",
    capitalCity: "Mexico City",
  },
};

ここでContinentのタイプエイリアスがもつプロパティはすべてreadonlyである。よって次のようなことはできない。

// Cannot assign to 'name' because it is a read-only property.
america.name = "African Continent";
// Cannot assign to 'canada' because it is a read-only property.
america.canada = {
  name: "Republic of Côte d'Ivoire",
  capitalCity: "Yamoussoukro",
};

しかしながら、次のようなことは問題なくできてしまう。

america.canada.name = "Republic of Côte d'Ivoire";
america.canada.capitalCity = "Yamoussoukro";

as constをつけると全てのプロパティを固定する。

const america = {
  name: "North American Continent",
  canada: {
    name: "Republic of Canada",
    capitalCity: "Ottawa",
  },
  us: {
    name: "United States of America",
    capitalCity: "Washington, D.C.",
  },
  mexico: {
    name: "United Mexican States",
    capitalCity: "Mexico City",
  },
} as const;

以下全てがエラーとなる。

// Cannot assign to 'name' because it is a read-only property.
america.name = "African Continent";
// Cannot assign to 'canada' because it is a read-only property.
america.canada = {
  name: "Republic of Côte d'Ivoire",
  capitalCity: "Yamoussoukro",
};
// Cannot assign to 'name' because it is a read-only property.
america.canada.name = "Republic of Côte d'Ivoire";
// Cannot assign to 'capitalCity' because it is a read-only property.
america.canada.capitalCity = "Yamoussoukro";