TypeScript

「関数を引数に取る」とは、責任を“相手に渡す”設計まずイメージからいきます。function doTwice(fn: () => void) { fn(); fn();}doTwice(() => {...

前提：関数にも「interface で形を決める」という発想があるまず押さえたいのは、「関数の型は type だけじゃなく、interface でも書ける」ということです。type FnByType ...

まず「関数型エイリアス」とは何かをはっきりさせる関数型エイリアスは、かんたんに言うと「よく使う関数の“形”に名前をつけること」です。type StringToNumber = (value: stri...

ゴール：map / filter / reduce の「関数型」を言葉で説明できるようになるまず目標からはっきりさせます。map / filter / reduce は、「配列に対して“どう変換するか...

まず「高階関数」をちゃんと定義しておく高階関数（higher-order function）は、ざっくり言うと「関数を受け取る」か「関数を返す」か、あるいはその両方をする関数のことです。functio...

まず「コールバック関数」をちゃんとイメージするコールバック関数は、ざっくり言うと「関数に“あとで呼んでね”と渡される関数」です。function doTwice(callback: () => voi...

「可変長引数」は型の世界だとどう見えるのかまず、可変長引数は JavaScript 的にはこうです。function sum(...numbers: number[]) { return number...

rest引数ってそもそも何をしているのかまずは「rest引数」の正体からいきます。function sum(...numbers: number[]) { // numbers は「配列」として受け取...

「デフォルト引数」と「型」はセットで考えるものまず前提から整理します。TypeScript の「デフォルト引数」は、「引数が渡されなかったときに使う値を、関数の宣言側で決めておく仕組み」です。func...

まず「オプション引数って何者か」を整理するTypeScript で「オプション引数」と言うとき、だいたい次の2つの書き方を指します。function greet(name: string, title...

前提：「全部書く」か「全部省略」か、の二択ではないまず大事なのは、戻り値型は「常に書くべき」でも「常に省略すべき」でもない、ということです。すでに話してきたように、外部公開の関数・複雑な処理・ジェネリ...

まず前提：「いつも書け」ではなく「ここぞで書く」TypeScript は戻り値型をかなりうまく推論してくれます。だから「全部に : 型 を書け」という話ではありません。大事なのは、「推論に任せると“危...

「引数の型」と「戻り値の型」はセットで設計するものまず一番大事な前提から。関数の型は、「何を受け取って（引数）、何を返すか（戻り値）」この2つの組み合わせで決まります。function add(a: ...

まず「アロー関数の型推論」で何が起きているかアロー関数はこういう形の関数です。const add = (a, b) => a + b;const add = (a, b) => a + b;TypeS...

まず「関数宣言」と「関数式」をざっくり区別する最初に形だけ見て違いを押さえましょう。関数宣言（function declaration）function add(a: number, b: numbe...

「TypeScriptらしい書き方」って何を指しているのかまず前提をはっきりさせます。「TypeScriptらしい書き方」というのは、単に「: string とか : number をつけること」では...

「型設計ルール」を決めておく意味最初に、なぜ「ルール」を意識した方がいいかから話します。TypeScript は、とりあえず書いてもそれなりに動いてくれる言語です。でも「何となく型を付ける」だけだと、...

なぜ「union型なのにすぐエラーになる」のかまず、よくあるつまずきから整理します。function printId(id: string | number) { console.log(id.toU...

まず「Discriminated Union」をざっくり日本語にすると難しいカタカナですが、意味はシンプルです。Discriminated Union（判別可能ユニオン）＝「ある1つのプロパティの値に...

「型の絞り込み」とは何かを一言でつかむ型の絞り込み（narrowing）は、「最初はざっくりした型だったものを、条件分岐などを通して“より具体的な型”に狭めていくこと」です。TypeScript では...

まずイメージでつかむ：unionとintersectionは「または」と「かつ」最初に一番大事なことだけ頭に入れてください。A | B（union型）→ 「A または B」。どちらか一方ならOK。A ...

intersection型は「AもBも両方持つ」型まず一言でいうと、intersection型（インターセクション型、&）は 「AかつB」＝「Aの性質もBの性質も同時に持つ型」 です。対比でいうとこう...

「union型の共通プロパティ」とは何かまず前提から整理します。union型は「A か B かどちらか」の型でした。type User = { id: number; name: string;};t...

union型とif分岐の関係をまずイメージでつかむunion型は「A か B かどちらか」という“選択肢のある型”でした。そして if 分岐は、「今この瞬間は A なのか B なのかを確かめるための問...

union型は「AかBかどちらか」の型まずイメージからいきます。union型（ユニオン型）は、「この値は“これか、あれか”のどれかです」という“選択肢のある型」です。書き方はとてもシンプルで、型と型の...

はじめに：型エラーは「怒られている」のではなく「守られている」関数まわりで出る型エラーは、最初かなりストレスになりますよね。でも本質的には、「その書き方だと、実行時にバグる可能性が高いよ」と Type...

そもそも「nullチェック」って何のためにやるのかまず一番大事なところから。nullチェックは「そこに“あるはずのもの”が、本当にあるかを確認する行為」です。プログラムを書いていると、ついこう思いがち...

「in演算子による型ガード」は何をしてくれるのかin 演算子による型ガードは、「このオブジェクトは、このプロパティを持っているか？」を調べることで、型を絞り込む仕組みです。人間の感覚だと、こうです。「...

typeofによる型ガードとは何かtypeof による型ガードは、「値の実行時の型をチェックして、その結果をもとに TypeScript が変数の型を“狭くする”仕組みです。人間の感覚としてはこうです...

「型ガード」とは何かを一言でつかむまずイメージからいきます。型ガードは、「この if を通ったなら、この変数は“この型”だと安全に言えるよ」ということを、TypeScript にちゃんと分かってもらう...