satisfiesオペレーターを使用した型チェックを行う

TypeScript4.9から追加になったsatisfiesオペレーターを使用して、型チェックを行う方法を紹介します。

想定する状況

Personality型を使って、personalityオブジェクトに対し型チェックを行います。

type Personality = {
    name: string
    age: number
    hobby: string[] | string
}

const personality = {
    name: 'goq',
    age: 30,
    hobby: ['reading book', 'programming'],
}

型注釈を使用

まずは型注釈を使用して、型チェックを行います。
型にないjobプロパティを追加して、エラーが出るか確認します。

const personality: Personality = {
    name: 'goq',
    age: 30,
    hobby: ['reading book', 'programming'],
    job: '' // Type '{ name: string; age: number; hobby: string[]; job: string; }' is not assignable to type 'Personality'
}

しっかりエラーが出ています。
では、hobbyの値を出力しようとしたらどうなるでしょうか。

// Property 'forEach' does not exist on type 'string | string[]'.
personality.hobby.forEach(x => {})

型注釈では型チェックはできますが、プロパティの中身まで推論することはありません。
よって、stringかstring[]か推論できずにエラーが出てしまっています。

satisfiesを使用

型注釈のデメリットを補う方法として、satisfies機能があります。
設定した値が、型条件を満たすか確認し型推論されます。

型注釈と違うのは、プロパティの型推論を行なっている点にあります。

const personality = {
    name: 'goq',
    age: 30,
    hobby: ['read books', 'programming'],
} satisfies Personality

personality.hobby.map(x => {}) // (property) hobby: string[]

as constによる強固な型付け

型チェックはできましたが、このままでは値が書き換えられてしまう可能性があります。

personality.name = 'a'
console.log(personality.name) // 'a'

より強固にするためにas constを併用していきます。
as constについては詳しく説明しませんが、それぞれの値をreadonlyに変換し、書き換えできないようにします。また、各値の型をunknownにすることで、型の推論を受け入れるようにします。

type Personality = {
    [key in 'name' | 'age' | 'hobby']: unknown
}

const personality = {
    name: 'goq',
    age: 30,
    hobby: ['read books', 'programming'],
} as const satisfies Personality

まとめ

型チェックをする際にはsatisfiesを使用していきましょう。
さらに強固にするならば、as constを併用していけば良いでしょう。

さいごに

GoQSystemでは一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。