TypeScriptの as const を理解する

に公開

型アサーション自体は使用することを推奨されていないが、こちらのas constに関しては使用することでより安全に使用できるとのこと。

・as const とは?

typeof を使用して配列やオブジェクトから型を生成する際に、すべての要素、プロパティにreadonlyの機能を一気に追加することが可能。

これがどうおいしいのかは以下で確認

・配列で使用

【as const なし】

const colors = ['red', 'blue', 'yellow'];

// type ColorType = string となる
type ColorType = typeof colors[number];


ここにas constを使用すると
【as const あり】

// 配列の後に as const を追加
const colors = ['red', 'blue', 'yellow'] as const;

// type ColorType = "red" | "blue" | "yellow" とユニオン型になる
type ColorType = typeof colors[number];

となる

・オブジェクトで使用

const user = {
  name: '矢野',
  age: 53,
} as const;

type UserType = typeof user;


この場合UserTypeはどうなるかというと

type UserType = {
    readonly name: "矢野";
    readonly age: 53;
}

となる。

もちろんここで生成した型を使用することで安全性を高めることができます。

const user2: UserType = {
  name: '岡田',
  age: 64,
}

と使用してみると、下記のように怒られてしまします。
nameの箇所で

Type '"岡田"' is not assignable to type '"矢野"'.

ageの箇所で

Type '64' is not assignable to type '53'.ts(2322)


ちなみに追加もできなくなるようです。

// nameとageはクリア。positionが追加されている状態
const user2: ProfileType = {
  name: '矢野',
  age: 53,
  position: 'second'
}

だと

Type '{ name: "矢野"; age: 53; position: string; }' is not assignable to type '{ readonly name: "矢野"; readonly age: 53; }'.
  Object literal may only specify known properties, and 'position' does not exist in type '{ readonly name: "矢野"; readonly age: 53; }'.


とういう事でas constに関しては積極的に使用していきたいと思いました。