目次

はじめに

今回はTypescriptで新しく導入されたrestとspreadに配列で型付けを試してみたいと思います。

やってみる

今までの書き方は以下のような感じ。interface中で!をつけていないとエラーが出てしまう。

なぜなら静的なデフォルトの値が入る前に型判定が行われていまうからだ。

そうすると中身がnullになってしまう。そこで!をつけてnullをつけて許容するのだがこれは良くない。

データの中で本当に中身が入っていなかったらエラーの判定を入れなければならない。

これは結構手間がかかってします。

export interface Props {
    name!: string
}

const Greet({ name = "world" }: Props) {
    return <div>Hello {name.toUpperCase()}!</div>;
}

そこで今回便利にTypescript3で便利になったdefault Propsのサポート

これからはエラー処理を気にせずにdefaut propsの型判定まで行うことができる。

以下のような感じ。これで問題なくPropsの型判定がdefaultの段階から行うことができるようになった。

export interface Props {
    name: string
}

const Greet({ name = "world" }: Props) {
    return <div>Hello {name.toUpperCase()}!</div>;
}

まとめ

今回はTypescript3で新しく導入されたdefalt propsのサポートを紹介した。ぜひこのサポートを活かしてガンガンコーディングしていこう