# TypeScriptと仲良くなる
はじめまして、初投稿です。
私は約半年前から現場でReact、TypeScriptを扱うプロジェクトにアサインしています。
当時は、1行改修するにも丸一日かかるようなチュートリアルレベルでした、、
そんな半年前の自分に向けてTypeScriptで躓いた構文をまとめたいと思います。
若干ボリューミーに見えますが、簡単なコードが多いだけですw
① typeの書き方
まずは基本
type Engineer = {
name: string
age: number
sex: string
languages: string[]
};
const engineer: Engineer = {
name: 'ホゲ',
age: 25,
sex: 'man',
languages: ['TypeScript', 'React', 'Java'],
};
typeはオブジェクトの型を定義しています。
typeを定義しなくてもオブジェクトは問題なく作れるのですが、
各valueに好きな値を入れられてしまうため、いつの間にか変テコなオブジェクトになっていて
なんかしらんけどバグってる。ってことになりかねません。
値の不正代入も防げて、IDEの入力補完も効くので型無しのJavaScriptよりも開発効率が良いと個人的に思います。
② オブジェクトからtypeを作る
const Sex = {
man: '男',
woman: '女',
};
type SexType = keyof typeof Sex;
type Engineer = {
name: string
age: number
sex: SexType
languages: string[]
};
この構文も初めて見たときは何が起きているのかさっぱりでした。
結論としてはsexに入れられる値をmanまたはwomanの文字列だけに制限しています
1つずつ解説
const Sex = {
man: '男',
woman: '女',
};
constで定義されているのでこれ単体だとただのオブジェクトです。
type SexType = keyof typeof Sex;
見慣れない構文keyof、typeofですが、一つずつ見ると
typeof Sex;
/*
↓オブジェクトの構造がそのままtypeになる
{
man: '男',
woman: '女',
}
*/
keyof typeof Sex;
/*
↓typeofでtypeになったSexのkey(文字列)のみを持つtypeになる
'man' | 'woman'
*/
文字で説明すると逆にややこしい気がしますが、、
type Engineer = {
name: string
age: number
sex: SexType /* 'man' | 'woman' */
languages: string[]
};
const engineer: Engineer = {
name: 'ホゲ',
age: 25,
sex: 'weman' /* 怒られる */,
languages: ['TypeScript', 'React', 'Java'],
};
もともとstringだったところをSexTypeに置き換えると、
man, woman以外の文字列を入れようとするとコンパイルエラーになります。
コンパイルエラーになる以外にも、
sexがmanだったときに男を画面に表示することもとても楽になります。
console.log(engineer.sex); /* man */
console.log(Sex[engineer.sex]); /* 男 */
同じようにLunguageTypeを作るのもいいですね
③ 任意の型を追加する
Engineerのプロフィールが寂しいので追加で
hobbyとfavoriteFoodを任意で設定出来るようにしましょう
type Engineer = {
name: string
age: number
sex: SexType
languages: LanguageType[]
otherInfo: {
hobby: string | undefined
favoriteFood: string | undefined
}
};
type Engineer = {
name: string
age: number
sex: SexType
languages: LanguageType[]
otherInfo: {
hobby?: string
favoriteFood?: string
}
};
type OtherInfo = {
hobby: string
favoriteFood: string
};
type Engineer = {
name: string
age: number
sex: SexType
languages: LanguageType[]
otherInfo: Partial<OtherInfo>
};
3通り書きましたが、typeとしてはすべて同じ内容になります。
3番めのPartial<>ですが、これはUtility Typesの一つで使いこなせると便利なやつです。
詳しくははこちらの方の記事がおすすめです。
【TypeScript】Utility Typesをまとめて理解する
④ typeを繋げる
type Name = {
name: string;
}
type Age = {
age: number
}
type Engineer = Name &
Age & {
sex: SexType
languages: LanguageType[]
otherInfo: Partial<OtherInfo>
};
こんな感じで細かくtypeを定義して&でつなげてひとまとめにできます。
もちろんName、Age以外も同じように定義しておいてすべて&でつなげることも可能です。
おまけ
BrandedType
type Engineer = {
firstName: string
lastName: string
age: number
sex: SexType
languages: LanguageType[]
};
nameだったところをfirstNameとlastNameに分ける事になった場合、
どちらも型としてはstringで区別することはできません。
type FirstName = string & { _brand: 'FirstName' };
type LastName = string & { _brand: 'LastName' };
type Engineer = {
firstName: FirstName
lastName: LastName
age: number
sex: SexType
languages: LanguageType[]
};
stringに{ _brand: (型名等) }という他と被らないプロパティを付けることで、区別出来るようになります。
BrandedTypeは自身で把握出来る程度の規模であれば無くてもいいのかなと思いますが、
細部まで型が定められていると、参照が増えたり複雑な構造になった際にもミスを防げるし、自分以外の人が見たときにも分かり易いんじゃないかなと思います。
まとめ
今ではどれも当たり前のように使えるようになりましたが、
当時は本当に分からなくて頭に定着するまで何度も調べていました、、笑
TypeScriptで書くと、開発効率が良くなるのはもちろんですが、他の人が見たときに分かりやすいのもメリットだと思います。← とても大事 (頑張ります)
奥が深くまだまだ知らないこともあるので引き続き頑張ります。
最後まで見ていただきありがとうございました！