https://www.oreilly.co.jp//books/9784873119045/

本書の練習用Githubリポジトリ

https://github.com/oreilly-japan/programming-typescript-ja

1章 イントロダクション

更に詳しく見るには...

TypeScriptの場合だと

『テキストエディターで入力した時』にエラーメッセージを与えてくれる。

3 + []
// エラー TS2365: 演算子 '+' を型 '3' および 'never[]' に
// 適用することができません。

2章 TypeScript : 全体像

プログラムがコンパイラーによって解析されるまで

1. プログラムがASTへと解析される

AST（抽象構文木（abstract syntax tree））とは、空白類文字やコメントのようなものを無視したデータ構造のこと

もっと詳しく...
通常の構文木（具象構文木あるいは解析木とも言う）から、言語の意味に関係ない情報を取り除き、意味に関係ある情報のみを取り出した（抽象した）木構造のツリーのこと
引用 : Wikipedia

2. ASTがバイトコードにコンパイルされる

バイトコードとは、ソースコードからコンピュータが効率よくプログラムを実行する形にしたもの

3. バイトコードがランタイムによって評価される

ランタイムとは、「実行時」のことで、プログラムが実行されている状態のこと

更に詳しく...
すべてのプログラミング言語において実行モデルが規定されており、多くの言語でそのモデルの少なくとも一部がランタイムシステムに実装されている

TypeScriptのコンパイルプロセス

TypeScript

1. TypeScriptソース → TypeScript AST
2. ASTが型チェッカーによってチェックされる
3. TypeScript AST → JavaScriptソース

JavaScript
4. JavaScriptソース → JavaScript AST
5. AST → バイトコード
6. バイトコードがランタイムによって評価される

2章 - 2

型システム

型システムとは、プログラマーが作成したプログラムに型を割り当てるために型チェッカーが使用するルールの集まり

2種類ある。

1. 明示的な構文で型をコンパイラーに伝える（アノテーション）
2. 型を自動的に推論するもの
   トレードオフの関係にある。

明示的に伝える（アノテーション）

let a: number = 1 // aはnumber
let b: string = 'hello' // bはstring

最小限にしても構わない

let a = 1 // aはnumber
let b = 'hello' // bはstring

TypeScriptは型を推論するのが得意なので、アノテーションは必要な場合のみでも大丈夫

3章 型について

❗TypeScriptの型の階層構造

引用 : プログラミングTypeScript.. OREILLY

any

TypeScriptでは、コンパイル時にすべてのものが型を持っている必要がある。
あるものの型がわからない場合のデフォルトの型がanyになる。

unknown

前もって本当に型がわからない場合は、unknownを使用する。
anyと同様に任意の値を表すが、それが何であるかチェックすることで絞り込むまでTypeScriptでは、unknown型の値の使用を許可しない。※any厳重版

let a: unknown = 10 // unknown
let b = a + 5 // エラー
// ここでtypeofを使用することで上記の10の代入を元にnumber型に確定する
if (typeof a === 'number') {
  let c = a + 5                            // number
}  

boolean

trueかfalseの2つの値がある。それらを比較、否定などはできるがほかはあまりできない。

let a = true // boolean
const b = true // true
let c: boolean = true // boolean
let d: true = true // true

ここで注目すべきは、最後の行のコード let d: true = trueの部分である。
これは、「ただのbooleanではなく、特定のboolean trueだよ」とより詳しく指定している。
※厳密に型を決めている。このようなことをリテラル型という。
もう1つのポイントは、constを使用しているときもリテラル型になっていること
constを使用すると変更がないことがTypeScriptが知っているので、最も狭い型を推論する。

リテラル型とは、ただ1つの値を表し、それ以外の値は受け入れない型

number

整数、浮動小数点数、正数、負数、Infinity、NaN（非数）などすべての数値の集まり
+, -, %, < なども含まれる。

let a = 1234 // number
const b = 5678 // 5678
let c = a > b //boolean

bigint

丸めのエラーに遭遇することなく、大きな整数を扱える。
numberでは。2の53乗めでしか表せないが、bigintならもっと多くの整数を扱える。
``javascript
let a = 1234n // bigint
let b = 22.4n // エラー bigintは整数しか扱えない
let c: 100n = 100n // 100n

:::message alert
可能な限り、bigint型はTypeScriptに推論させるようにする
:::
### string
すべての文字列とそれらを使ってできること（連結、スライス）の集まり
```javascript
let a = 'hello' // string
const b = '!' // '!'
let c = a + ' ' + b // string

symbol

使用頻度は少ない。
オブジェクトやマップにおいて文字列のキーの代わりとして、既存のキーが適切に使われ、うっかり誤った値が設定されていないことを強く確信した場合に使用される。

let sym2 = Symbol("key");
let sym3 = Symbol("key");
sym2 === sym3; // false, symbols are unique

let sym = Symbol();
let obj = {
    [sym]: "value"
};
console.log(obj[sym]); // "value"

オブジェクト

オブジェクトの形状を指定する。

より詳しく...

// 以下だとエラーになる
let a: object = {
  b: 'x'
}
a.b //　エラー

じゃあオブジェクトってなんの役に立つのか

objectは、anyの少し限定されてるものでもさほど変わらない。

以下のようにオブジェクトを型付けできる（オブジェクトリテラル型）

let a: {b: number} = {
  b: 12
}  // {b: number}

...多くのプロパティある可能性がある場合はどうするか

let a: {
  b: number
  // aはstringであるプロパティcを持つ可能性がある。
  c?: string 
  [key: number]: boolean
}

インデックスシグネチャとは、[key: T]: Uみたいな構文のこと
オブジェクトが多くのキーを含む可能性があることをTypeScriptに伝える方法
※keyは任意の名前でも使用できる。

TypeScriptのオブジェクト宣言まとめ

• オブジェクトリテラル表記（{a: string}みたいな）
  • オブジェクトがどんなフィールドを持つかわかる時
  • オブジェクトの値がすべて同じ型を持つ時
• object型オブジェクトがどんなフィールドを持つか重視しない場合に使用する
• 空のオブジェクトリテラルは使用しない（{}）
• Object型は使用しない。上記と同じ

型エイリアス

変数宣言（let, constとか）を使用して、値のエイリアスとなる宣言ができる
使用する利点

• 型名が直感的になる
• 複雑な方も一度の宣言でいいのでDRYに書ける
• letやconstと同様にブロックスコープなので扱いやすい

type Age = number
type Person = {
  name: string
  age: Age
}
// Personというオブジェクトの定義が理解しやすくなる
// 以下のようにもできる
let age = 25
let driver: Person = {
  name: 'James Role',
  age: age
}

合併型（共用体型、共用型、union型）と交差型

合併は、|
交差は、&

type Cat = { name: string, purrs: boolean }
type Dog = { name:string, barks: boolean, wags: boolean }
type CatOrDogOrBoth = Cat | Dog

// Cat
let a: CatOrDogOrBoth = {
  name: 'Bonkers',
  purrs: true
}

// Dog
a = {
  name: 'Domino',
  barks: true,
  wags: true
}

// 両方
a = {
  name: 'Donkers',
  barks: true,
  purrs: true,
  wags: true
}

配列

要素の連結、追加、検索、スライスのような操作をサポートする

let a = [1, 2, 3] // number[]
var b = ['a', 'b'] // string[]
const c = [2, 'b'] // (string | number)[]

let d = []
d.push(1)
d.push(true) // エラー

let e: number[] = [] // number[]
e.push(1) // number[]
e.push('red') // エラー

TypeScriptで配列を使用する場合は、T[]とArray<T>がある。
これは、パフォーマンス等もまったく同じ

配列 > タプル

可変長の配列を型付けするための方法

let trainFares: [number, number?][] = [
  [2.35],
  [3.45, 5.40],
  [6.75]
]

// 少なくても1つの要素を持つ、文字列のリスト
let friends: [string, ...string[]] = ['Iru', 'Tura', 'Mina', 'Kima' ]

 // 不均一なリスト
let list: [number, boolean, ...string[]] = [1, false, 'w', 'e']

null, undefined, void, never

それぞれの違い

• undefined（あるものがまだ定義されていない）
• null（値が欠如している）
• void（明示的に何も返さない関数の戻り値の型）
• never（決して戻ることのない関数の型）

enum（残挙型）

ある値について取り得る値を列挙する方法

慣例で、enumは大文字で始める単数形

enum Language {
  English,
  Japanese,
  Spanish
}

// 明示的に値を設定できる
enum Language {
  English = 0,
  Japanese = 1,
  Spanish = 2
}

4章 関数

関数の宣言・呼び出し

JSでは、関数は第一級のオブジェクトだから他のオブジェクトと全く同じように扱える。
通常は、関数のパラメータをアノテートする

// 名前付き関数
function greet(name: string) {
  return 'hello' + name
}

// アロー関数式
let  greet2 = (name: string) => {
  'hello' + name
}

// (a: number, b: number)は引数でここは必ず記述する
// (...): number これは戻り値の型、任意でいい
let add = (a: number, b: number): number {
  a + b
}

オプションパラメータ

「?」を使用して、パラメータを省略可能に指定することができる。

function distance(p1: Point, p2?: Point): number {
  return ((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2) ** (1 / 2);
}
distance(q1, q2);
distance(q1);

デフォルトパラメータ

「?」を=...のような記述に変更するとデフォルト値を設定できる。

function log(message: string, userId = 'Not signed in') {
  console.log(message, userId)
}
log('User signed out')

レストパラメータ

ある関数が引数のリストを取る場合、そのリストを配列として渡せる。

function sum(numbers: number[]): number {
  return numbers.reduce((total, n) => total + n, 0)
}
sum([1, 2, 3]) // 6

// 可変長引数を受け取りたい時に、レストパラメータを使用する。
function sum(...numbers: number[]): number {
  return numbers.reduce((total, n) => total + n, 0)
}
sum([1, 2, 3]) // 6

call, apply, bind

丸括弧()をつけて呼ぶ他にも方法がある。それが上記のメソッド。詳しくは省略

thisの型付け

TypeScriptでは

関数でthisを使用する場合は、期待するthisの型を、関数の最初のパラメーターとして宣言する。

ジェネレーター

一連の値を生成するための方法
ジェネレーターは、ジェネレーター関数によって生成される。

function* createFibonacciGenerator() {
  let a = 0
  let b = 1
  white (true){
  yield a;
  [a, b] = [b, a + b]
  }
}
let fibonacciGenerator = createFibonaciGenerator() // Generator<number>
fibonacciGenerator.next() // { value: 0, done: false }
.....

イテレーター

ある値を利用するための方法（ジェネレーターは生成に対して）

反復可能オブジェクト（Iterable）とは、Symbol.iteratorというプロパティを含んでいるオブジェクト、このプロパティの値は、イテレーターを返す関数

イテレーターとは、nextと呼ばれるメソッドを定義しているオブジェクト、nextメソッドは、value, doneというプロパティを持つオブジェクトを返す

呼び出しシグネチャ

関数そのものの完全な型を表現する方法
まず以下を見てみる。

function add(a: number, b: number): number {
  return a + b
}

このaddの型はなにか... Functionです。
Functionはすべての関数の包括的な型なので、特定の関数についてなにもわからない。
そんな時、TypeScriptでは、以下のように表現する。

(a: number, b:number) => number

型レベル、値レベルについては書籍P59を参照

文脈的型付け

関数のパラメーターの型を明示的にアノテートしないパターン

• 呼び出しシグネチャを使用してlog: Logのように宣言している場合（事前にLogを宣言しているものとする）
• コールバック関数の場合（ある関数に値を渡す時、実行関数をインラインで宣言している場合、その関数を明示的にアノテートする必要がない）

オーバーロードされた関数の型

複数の呼び出しシグネチャを持つ関数のこと
ここは深堀り必要...

4章 - 2

ポリモーフィズム

ポリモーフィズムとは、プログラミング言語の持つ性質の一つで、ある関数やメソッドなどが、引数や返り値の数やデータ型などの異なる複数の実装を持ち、呼び出し時に使い分けるようにできること

関数について、具体的な型がわからないときにどうするか

ジェナリック型とは

• ジェネリック型パラメータは(<>)で囲って使用する
• 山括弧の場所によってスコープが決まる
• スコープ内でジェネリック型パラメータのすべてのインスタンスを最終的に同じ具体的な型にバインドする

型駆動開発

すらすらとコードリーディングできるレベルにならないとまずい
採用頻度がかなり多いように感じる
逆にこれがすらすらできれば関数内のコードを見なくても型で共同を直感的に判断できる