参考

この記事では、主に「サバイバルTypeScript」を参考または引用しています。

一部ではこちらも参考または引用しています。

予備知識

用語	特徴
メタ構文変数	「foo」「bar」「baz」「qux」「quux」「foobar」
リテラル	定数
acc	accumulator、累積
arg	argument、引数
i	index、添え字
nth	Number + th、n回目
v	value、要素
RegEx(p)	Regular Expression、正規表現
T	template、定型文

命名規則

対象	命名規則
変数、関数	`lowerCamelCase`（ロワーキャメル）
型、クラス	`UpperCamelCase`（アッパーキャメル）

変数や関数は、プロパティだと捉えることができます。
型やクラスは、明示的にプロパティを持つため、それらと区別するために UpperCamelCase（アッパーキャメル）を用います。
プロパティは、変数と関数の命名規則に従います。
正確には、関数とメソッドは区別され、オブジェクトのプロパティである関数をメソッドといいますが、どちらにも lowerCamelCase（ロワーキャメル）を用います。
関数構文とメソッド構文の違いは以下の通りです。

構文	特徴
関数構文	独立した機能単位
メソッド構文	オブジェクトの一部として定義され、プロパティとして振舞う

関数型プログラミング

関数の組み合わせによってプログラムを構成する手法です。

関数合成

関数合成とは、複数の小さい関数を合成することで、コードの保守性や再利用性を高めるものです。

値・型・変数

静的型付けと動的型付けの違い

型付け	特徴
静的型付け	一度、型が決定されるとその後、変更できない。
動的型付け	代入される値の型により、常に型は変更される。

これは、静的型付けの大きなメリットです。一度、型が決定された後に、その変数の型が何であるかを考える必要はありません。初めに宣言された場所を見れば一目瞭然だからです。

型推論

コンパイラは代入された値 から、変数や関数の型を自動で判別します。具体的には、初期化のための代入式の右辺値 や関数呼び出し時の実引数 などが参照されます。
多くの場面で型推論がされます。
関数の返り値 が型推論される場合もあるが、可読性のために記述します。

プリミティブ型

JSのデータ型は、プリミティブ型 とオブジェクト の2つに分類されます。
TS及びJSでは、7つのイミュータブル（不変）なプリミティブ型に限られます。そのため、プリミティブ型以外はすべてオブジェクトであると捉えることが出来ます。

プリミティブ型	説明
boolean型	真偽値型です。
number型	数値型です。
string型	文字列型です。
undefined型	undefind型では未定義の値であることを表します。
null型	null型では値が空であることを表します。
symbol型	一意で不変の値です。
bigint型	bigint型では、number型では収まらない大きさの数字を扱うことができます。

文字列リテラルには、一般的に""が使われます。
undefined型とnull型には微妙な違いしかなく、わざわざ使い分ける必要はありません。そのため、基本的にはundefind型 に統一されます。

プリミティブ型とJSのオブジェクトの関連性

プリミティブ型は一般的にプロパティをもちませんが、TSではundefind型とnull型を除く、5つの型でプロパティをもっています。これを自動ボックス化といいます。例えば、文字列型からは文字列の長さを取得できます。
JSの5つのプリミティブ型の自動ボックス化で変換先となるオブジェクト をラッパーオブジェクト(wrapper object)と言います。

プリミティブ型	オブジェクト
boolean	Boolean
number	Number
string	String
symbol	Symbol
bigint	Bigint

JSのメソッドには、これらのオブジェクトからなるものがあります。代表例は、String型です。

オブジェクト	特徴
Bigint	コンストラクターと静的メソッド(2)、インスタンスメソッド(3)がありますが、活用する機会は少ないでしょう。
Boolean	コンストラクターとインスタンスメソッド(2)がありますが、活用する機会は少ないでしょう。
Number	コンストラクターと静的メソッド(6)、静的プロパティ(8)、インスタンスメソッド(6)があります。他のオブジェクトに比べ多くのメソッドをもちますが、やはり使用頻度は高くなさそうです。
String	文字の並びを表したり操作したりするために使用されます。コンストラクターと静的メソッド(3)、インスタンスメソッド(49)、インスタンスプロパティ(1)をもちます。インスタンスプロパティ数が他のオブジェクトと微比較しとても多いです。このオブジェクトのメソッドは高い頻度で使用されます。
Symbol	このオブジェクトは、コンストラクターやメソッドをもちません。そのため、使用頻度は低いでしょう。

ほとんどのオブジェクトは、toStringメソッドをもち引数の値を文字列型へ変換することが出来ます。

オブジェクト

JSでは、オブジェクトリテラル {} という記法を用いて、簡単にオブジェクトを生成できます。これは、データシリアライズ形式のJSONの由来になったものです。そのため、JSではJSONをそのままオブジェクトリテラルとして解釈できます。
TSでオブジェクトの型注釈は、JSオブジェクトリテラルのような書き方で、オブジェクトプロパティをキーと値の型のペアを書きます。プロパティの区切り文字には、；（セミコロン）を使用することが推奨されます。のちに説明しますが、型エイリアスという表現方法もあります。こちらが主な型注釈です。

let box: { width: number; height: number };

配列

型エイリアス

type キーワードを使うことで、型エイリアスを宣言することができます。
型エイリアスは、プリミティブ型と同様に変数や引数、戻り値の型注釈などで使えます。

型注釈（型アノテーション）

TypeScriptでは変数宣言するときに、その変数にどんな値が代入可能かを指定できます。その指定のことを型注釈(type annotation; 型アノテーション)と言います。変数宣言の型注釈は、次のように変数名の右に型を書きます。

const num: number = 123;

型注釈のなかには関数型というものがあります。

// 引数を受け取らず返り値をもたないことを宣言
const method: () => void // 続く

等価

等価には、==（等価演算子）と ===（厳密等価演算子）の2通りの記述方法があります。
意図しない動作を避けるという観点から、基本的には、===（厳密等価演算子）を使用するとよいでしょう。

ジェネリクス（generics）

ジェネリクスを用いて、「型を変数のように扱うこと」ができる。これを型変数 と呼びます。
ジェネリクスを用いることで、特定の型 に限定されない汎用的な関数 を定義することができます。

// <T>で、型変数名を定義できます。
const method<T> = (arg: T): T => {}

型が代入される変数のことを型変数 (type variables)と呼ぶのに対して、型変数に代入した型のことを型引数 (type arguments)と言います。
型変数名には、慣習的に T が使用されます。
ジェネリクスが使用される標準ライブラリの代表例は以下の通りです。

標準ライブラリ	説明	例
Arrayオブジェクト	Arrayオブジェクトは、stringやnumberなど状況に応じて色々な型の要素を保持する必要があります。このとき、型を抽象的にすることで汎用性をもたせます。 `.map()` メソッドを含みます。	`Array.prototype.map<T>()`
Promiseオブジェクト	Promiseオブジェクトでは、非同期処理を見通しよく書くことができます。	`Promise<T>`
Mapオブジェクト	Mapオブジェクトでは、Kにキーの型を指定しVにキーに紐づく値の型を指定します。このオブジェクトは、`.map()` メソッドではありません。	`Map<K, V>`

三項演算子 (ternary operator)

条件分岐ができる演算子です。条件式、真の場合の値、偽の場合の値の三項を取るため三項演算子と呼ばれています。

// 三項演算子
条件式 ? 真の場合の値 : 偽の場合の値;

// if文
if(条件式) return 真の場合の値;
else 偽の場合の値;

演算の結果は変数に代入できます。（if文はできません）

JavaScript

組み込みオブジェクト

Array

メソッド		説明
静的メソッド
`.from()`	配列を生成します。	反復可能オブジェクト¹や配列風オブジェクトから配列を生成します。`String` は反復可能オブジェクトであるため、引数として渡すことで1文字ずつを分割し配列に格納できる。 `Array.from('foo')` //=> `Array ["f", "o", "o"]` また、連番を生成できます。`Array.from({ length: 5 }, (v, i) => i);`
インスタンスメソッド
`.filter()`	要素をフィルタリングします。	指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。
`.forEach()`		与えられた関数を、配列の各要素に対して一度ずつ実行します。`map()` と異なり、 `forEach()` は常に `undefined` を返し、連鎖させることはできません。典型的な使用する用途は、チェーンの終わりで副次効果を実行することです。これはコピーメソッドです。反復処理メソッドです。ただし、返り値はありません。
`.join()`	配列を1つの文字列にします。	配列の全要素を順に連結した新しい文字列を返します。区切り文字はカンマ、または指定された文字列です。`.join('')` とすることで区切り文字をなくすことも出来ます。
`.keys()`	添え字をそのまま配列にします。	与えられた配列の添え字を要素に格納した、新たな配列を生成します。
`.map()`	要素をマッピングします。	配列外で処理をします。与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。オブジェクトの配列から特定のプロパティの配列を生成することもできます。これはコピーメソッドです。反復処理メソッドです。 `.forEach()` とは異なり、戻り値として配列データを取得します。
`.reduce()`	要素を減らします。	配列内で処理をします。配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。配列の要素を左から右へと累積的に処理して、1つの値に縮小するためのメソッドです。コールバック初回時には、配列の要素 0 が初期値として使用され、次の要素から反復処理が開始されます。これはコピーメソッドです。

組み込み反復可能オブジェクト(6)：String、Array、TypedArray、Map、Set、Segments （Intl.Segmenter.prototype.segment() で返される）

Number

メソッド	説明
`Number.MAX_SAFE_INTEGER`	これは定数であり、JavaScript における安全な整数の最大値 (253 – 1) を表します。これより大きな値を取り扱うには `Bigint` を使用します。初期値として役に立ちます。
`Number.MIN_SAFE_INTEGER`	これは定数であり、JavaScript における安全な整数の最小値 (-(253 - 1)) を表します。これより小さな整数値を取り扱うには、 `BigInt` を使用します。初期値として役に立ちます。

Object

メソッド	説明
`.toString()`	このメソッドは、文字列型へ型を変換します。独自の型変換ロジックのために派生オブジェクトがオーバーライドするために使用されます。

Math

Mathオブジェクトは、静的メソッド(34)と静的プロパティ(8)をもちます。
主要なメソッド以外の使用頻度は、低そうです。

メソッド	説明
`Math.ceil()`	小数点の切り上げを行い、その整数を返します。
`Math.floor()`	小数点の切り捨てを行い、その整数を返します。
`Math.max()`	与えられた引数から最大の値を返します。配列を渡すことも出来ます。
`Math.min()`	与えられた引数から最大の値を返します。配列を渡すことも出来ます。

String

メソッド	説明
`.padStart()`	文字列を指定した文字列で延長します。
`.toUppreCase`	呼び出す文字列の値を大文字に変換して返します。
`.toLowerCase`	呼び出す文字列の値を小文字に変換して返します。

ASCIIコードを利用することで、文字を操作することもできます。

`.parseFloat()`

関数	説明	例
`.parseFloat()`	文字列の引数を受け取り浮動小数点値を返します。	`.parseFloat('3.14')` //=> 3.14

`.parseInt()`

関数	説明	例
`.parseInt()`	文字列の引数を受け取り整数値を返します。	`.parseInt('123')` //=> 123

正規表現（略して RegEx(p)）

文字列から特定の文字列を検索する際に使用します。
基本的には早見表を用いて記述するため、これらを暗記する必要はありません。

正規表現はオブジェクトでもあります。これらのパターンは RegExp (2) の exec() および test() メソッドや、String (6) の match()、matchAll()、replace()、replaceAll()、search()、split() メソッドで使用できます。

RegExp オブジェクト

コンストラクターと静的プロパティ(7)、インスタンスメソッド(9)、インスタンスプロパティ(11)をもちます。
RegExp オブジェクトを生成するには 2 通りの方法があります。リテラル記法とコンストラクターです。

テスト

標準組み込みオブジェクト

Errorオブジェクト

このオブジェクトには、コンストラクター(1)とインスタンスメソッド(1)、インスタンスプロパティ(7)があります。
コンストラクターでは、new Error("人間が読めるエラーの説明")でエラーオブジェクトを生成します。

Jestフレームワーク

Expect関数

テストを作成する時に、値が特定の条件に合致することを確認する必要がよくあるでしょう。 expect によって様々な事柄を検証するための数多くの「マッチャ」を利用することができます。

修飾子(3)

Matchers（マッチャ関数）(36)

主なマッチャ関数を整理します。

マッチャ	説明
`.toBe()`	厳密な等価性（`===`）を確認します。
`.toStrictEqual()`	オブジェクトや配列が同じ構造と型を持つかどうかを確認します。
`.toThrow()`	関数が例外をスローするかどうかを確認します。

組み込み反復可能オブジェクト(6)：String、Array、TypedArray、Map、Set、Segments （Intl.Segmenter.prototype.segment() で返される） ↩