TypeScript学習備忘録
学習記録をまとめたほうが良い足跡になるとのことなので、まとめを始めてみました。
日々の学習の中でまとめた内容をここで吐き出して復習できるようにしたいと思います。
初日からまとめられているわけではないので、
初学者の人の参考にはあまりならないかもです。
目次
1-型エイリアス
- 型に対して型の名前を付けるために使われる
かたかた言ってますが、型にも別名をつけてあげてコード上でわかりやすくしようってことみたいですね
type User = {
id: string;
name: string;
age?: number;
};
これがあれば、毎回Userについていちいち書かなくても
const hoge: User = {
id: "001",
name: "wash",
};
でオブジェクト型で便利にですね。
const User:{
id:string;
name:string;
age?:number;
} = {
id:"001",
name:"wash",
}
ちなみにエイリアスを使わないとこうなるみたいです。
しっかり名前学ぶ前から使っていたので、こちらのほうが馴染みがないですね
2-interface
- オブジェクト型専用の方を定義するもの
かたかたのオブジェクト専用です
なので、最小構成の例文は型エイリアス一緒ですね。
ただしっかりと利点もあって、「再宣言」ができる優秀なものです。
継承も少し変わりますが、type君もできるので再宣言のほうが目を引くものがあありますね。
3-useEffect
- 画面表示や値が変わった時に処理を実行する
useEffect(() => {
// 実行したい処理
}, []);
見た目を整えた後にお仕事するってことを言っていますね。
例えばボタンを押してcountが変わった時にだけ動くとかするもの。
初回だけ実行したいもの、とかAPI使って何かを引っ張ってきたときに、表示されたら処理する、みたいな処理が欲しいときに実装するみたいです。
まだしっかりと活躍させてあげられてないですね。いずれスタメンに迎えたいです。
4-union
- 状態や入力を制限するもの
type Status = "success" | "error" | "loading";
こうすると、Status はこの3つのどれかになります。
条件分岐や API のレスポンスでよくつかわれる子ですね。
制限することで間違いを防げるのでタイポした時のエラー防げます。
5-Generics
- 型を後から決められる仕組み
型を変数化しているみたいなイメージですね
const Hoge<T>(value: T): T {
return value;
}
呼び出しは下記です
identity<string>("hello");
identity<number>(123);
同じ関数なのに方だけ変えられて便利ですね
一番最初は、「うーん型なんて決められないTをいれよー」
かと思ってました。
6-Utility Types
- 既存の方を加工する仕組み
代表的なのはこれら：
Partial<T> → すべてのプロパティを「任意」にする
Pick<T, K> → 必要なプロパティだけ抜き出す
Omit<T, K> → 指定したプロパティを除く
Readonly<T> → すべて読み取り専用にする
type User = {
id: string;
name: string;
age: number;
};
type UserDelete = Pick;
User の一部だけ使いたいときに便利です。
7-intersection
- 型を「合体」させる仕組み
特記事項は特にないですね。
そのまんま過ぎます。
type A = { id: string };
type B = { age: number };
type C = A & B;
// C = { id: string; age: number
interfaceの再宣言と似てますね。
こっちのほうが二回書かなくていいし、直感的で好きです。