筆者の経歴
エンジニア未経験で思い切って転職して二年目エンジニアです。主にフロントエンド担当でベソかきながら足掻いている男...
現在はフリーランスで業務に携わってます！
TypeScriptって？
めっちゃ簡単にいうとJavaScriptの上位互換!!(と思ってます)
変数や関数の戻り値とかに型というのをつけてあげると
「この変数には文字列しか許しません！」
「関数の戻り値はコイツだ！」
っていう風に決めることで、実装中にもエラーが発生して教えてくれたり安全性を担保できるのがめちゃめちゃに良い代物なのです。
もう理解している人はここなんて飛ばしてよかろうかと//
概要
ではでは、本題。
1. ユーティリティタイプの重要性
ユーティリティタイプは、コードの安全性と効率を向上させるための便利なツール。
これのおかげでコードの品質を上げてくれるもの。実務でも多用するから、用途に応じて使うべし
未経験の人がしっかり理解して使用していたらきっと褒められること間違いなし！(保証しません。)
2. ユーティリティタイプの基本的な使い方
既存の型を簡単に変更して新しい型を作成するためのツール。
なので、同じような型を作り続けなくても、一つのベースの方を作成したらそれを用いて型を柔軟的に使っていけたりできる。
ユーティリティタイプの詳細
Partial< T >
このタイプは、オブジェクト全てのプロパティをオプショナル(任意)にすることが可能になる。
本来のオプショナルのタイプの場合...
type Props = {
name: string // 必須
email?: string // 任意
}
上記のような記述でキー名の最後に「?」をつければ可能になるが、
「このProps使いたいけど、必須じゃないんだよね...どうしよう...」
って時は、このユーティリティタイプの出番！
type Props = {
name: string // 必須
email: string // 必須
}
type PartialProps = Partial<Props>
/** 結果として以下のように変えてくれている。
type PartialProps = {
name?: string; // 任意
email?: string; // 任意
}
*/
Required< T >
逆に、Required< T >を使うと、オブジェクトのすべてのプロパティを必須にできる。
type Props = {
name?: string // 任意
email?: string // 任意
}
type RequiredProps = Required<Props>
/** 結果として以下のように変えてくれている。
type PartialProps = {
name: string; // 必須
email: string; // 必須
}
*/
ReadOnly< T >
Readonly< T >を使うと、オブジェクトのすべてのプロパティを読み取り専用にできます。
読み取り専用になるので、そのプロパティの値を変えられないようにできる！
変えたくない値に対しては安全性が保てていいと思う。けど私自身は使用することは少なかった...
type Props = {
name: string
email: string
}
type ReadOnlyProps = ReadOnly<Props>
// 宣言
const example: ReadOnlyProps = {
name: 'テスト太郎',
email: 'test@example.com'
}
example.name = '変更太郎' // この代入がエラーとなる
Record< K , T >
Record< K, T >を使うと、特定のキーと値の型を持つオブジェクトを作成できます。これは、オブジェクトの構造を簡単に定義できる便利な方法。
型宣言で、ユニオン型を作成して使用したりする事がある時に、ユニオン型の方も使うけどそのユニオンと同じキー名でオブジェクトを作りたい場合はこのユーティリティを用いると便利！
第一引数に設定したいキー名、または型。
第二引数に値の型
type UnionType = 'sample' | 'example'
type RecordType = Record<UnionType, string>
const example : RecordType = {
sample: 'sample',
example: 'example'
}
Pick< T , K >
これは結構使う...
作成した型宣言から全部ではなく一部のプロパティだけを使用したいときにそれを引き抜いて新しい型に変えることができる。
type Props = {
name: string
email: string
}
type PickProps = Pick<Props, 'name'>;
const example: PickProfile = { name: "Alice"}
Omit< T , K >
これも使う...
作成した型宣言から全部ではなく一部のプロパティだけを使用したいときにそれを除外して新しい型に変えることができる。
type Props = {
name: string
email: string
}
type OmitProps = Omit<Props, 'name'>;
const example: OmitProfile = { email: "test@example.com"}
Exclude< T , U >
Excludeを使うと、一つの型から別の型の値を除外できます。これは、特定の値を排除するための便利な方法です。
要は別々の型を比較して第一引数に当たる型から排除することができる。
type T = 'a' | 'b' | 'c';
type U = 'a' | 'd';
type Result = Exclude<T, U>; // 'b' | 'c' - 'a'は除外されます
Extract< T , U >
Extractを使うと、二つの型の共通の値を見つけることができます。
一致する型を見つけたい！そんな時に使いませう。
type T = 'a' | 'b' | 'c';
type U = 'a' | 'd';
type Result = Extract<T, U>; // 'a' - 'a'は共通の値です
NonNullable< T >
NonNullableを使うと、型からnullやundefinedを除外できます。これにより、値が存在することが保証されます。
意図してnullとかを設定した型を変換して使いたい時に是非つかいませう。
type T = string | null | undefined;
type Result = NonNullable<T>; // string - nullとundefinedが除外されます
ReturnType< T >
ReturnTypeを使うと、関数の戻り値の型を簡単に取得できます。
関数の戻り値の型を他の場所で再利用したいときに非常に便利なのでタイミングあれば使うのがよろすぃかと思いまする。
function greet(): string {
return "Hello, TypeScript!";
}
type GreetingType = ReturnType<typeof greet>;
const sayGreeting: GreetingType = "Hello, TypeScript!"; // ここでGreetingTypeはstring型として認識されます
終わりに
初めての投稿で拙いことばかり、また「ここ違うくない？」と思われるところがあるかもしれません。
もしそれを見つけたら遠慮なく「おい！お前、ここ違うじゃねぇか！あんぽんたん！」と教えてください。
これから少しずつ自分の勉強したことや気になったことを書いていこうと思っているので温かい目、かつ厳しくご指摘ください！！！