りあクト！TypeScript で始めるつらくない React 開発 第 3.1 版【Ⅰ. 言語・環境編】
version manager
nvm
nodenv
anyenv経由で他の言語もまとめて管理できる
anyenv install
zsh$ brew install anyenv
$ echo 'eval "$(anyenv init -)"' >> ~/.zshrc
$ exec $SHELL -l
$ anyenv install --init
$ anyenv install nodenv
$ exec $SHELL -lplugin install
zsh$ mkdir -p $(anyenv root)/plugins
$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
$ mkdir -p "$(nodenv root)"/plugins
$ git clone https://github.com/nodenv/nodenv-default-packages.git "$(nodenv root)/plugins/nodenv-default-packages"
$ touch $(nodenv root)/default-packages % nodeenv global 14.4.0 とした Nodeをupdateする前はは
anyenv update を実行する．インストール可能なリストが更新される
Fabebook製の改良版npmコマンド
npmより高速
サブコマンドのタイピング数が少ない
.help :コマンド一覧 .load :指定したファイル内容を現在のセッションに読み込むよく使うから便利らしい
おすすめVS Code拡張リスト(未インストール)
stylelint
インストールしてみた
Visual Studio IntelliCode
API サジェスト一覧の精度を向上
Import Cost
モジュールインポート時に算出したバンドルサイズを表示
Debugger for Chrome
インストールしてみた
大量のソースコードファイルを一つにまとめ，最適化
ファイル変更を検知し，自動ロード
ユニットテストの記述
一回限りのコマンドにうってつけ
ローカルになければ最新版をネットからダウンロード
実行後，パッケージを削除
TypeScriptが記述できるJSXファイル
yarn upgrade-interactive [--latest] pagege.json の情報に従い，パッケージの更新情報をチェックし，対話形式で一括アップデート実行後の動作は保証されない
--latest : 強制的に最新の安定版verに一括アップデート yarn test コマンド起動したままにすると，差分を自動検知しテストが実行される
yarn eject react-scriptsの庇護から抜け出す
webkackの設定をいじれる
DSLをBabelにコンパイルさせることができる
一度実行すると元に戻せない
茨の道
ドメイン固有言語
特定分野のタスク向けに設計されたコンピュータ言語
正規表現，SQLなど
undefinedはリテラルではない．
プリミティブ値が格納された「undefinded」という名前のグローバル変数
ややこしい
JSのオブジェクト
狭義
連想配列
json
広義
プリミティブ値でないもの
Object という標準組み込みオブジェクトを最終的な継承元に持つ関数宣言
関数式をconstで宣言した方が良い
プロトタイプベース
オブジェクトの抽象としてのクラスが存在しない
オブジェクトは直接，他のオブジェクトを継承する
継承元のオブジェクトをプロトタイプと呼ぶ
JSでは分割代入を積極的に使った方が良い
オブジェクトのコピー
Spread構文を使う
シャローコピー
基本これで良い
オブジェクトの場合，参照がコピーされる
jsconst original={a:1,b:2,c:3};
const copy = { ...original };ネストが深い場合，どうすればいいか
一旦JSONにパースする
Dateオブジェクトや関数，
undefind がある場合，うまくいかない Lodash というライブラリの cloneDeep() を使う rfdc というライブラリを使うcppconst hello = undefined || null || 0 || NaN || '' || 'Hello!';ヌリッシュ・コアレッシング
基本的にグローバルオブジェクト
メソッドでない関数
new 演算子を付けずに実行される関数実行コンテキストのオブジェクトが引数
this としてメソッド，関数へと暗黙的に渡されるjsfunction(this, arg){}呼び出し側から任意のオブジェクトに指定して関数を実行する必要がある
call() apply() call() または apply() が使われない時 this 実行コンテキストのオブジェクトを示す
問題点
意図せずグローバルオブジェクトを参照してしまう可能性
js function() {
console.log(this.name, this);
}対処法
this はclass構文内のみで使うアロー関数を使う
暗黙の引数としての
this を持たない this を参照すると関数外のスコープの this が使われる new 演算子1. prototypeオブジェクトをコピーして新規にオブジェクトを作成
2. 関数に暗黙の引数
this として渡す3. 関数が
return this で終わってない場合，それを実行 globalThis グローバルオブジェクト参照
モジュールシステムの一つ
静的解析を念頭に設計
同期，及び非同期のローディング双方のサポート
import , export 文が簡潔モダンブラウザのほとんどが対応ずみ
つまりブラウザで実行可能
モジュールバンドラーの一つ
JSだけでなく，様々な形式のファイル依存関係を検出してまとめる
デフォルトはJSのみサポート
拡張モジュールにより，画像，JSON，CSSなども扱える
異なるモジュール構文が入り混じっていても適切に依存関係を解決できる
可変性
不変性
式を組み合わせてプログラムを構成
パラダイム
無名関数の定義
変数に関数を代入可能
高階関数
関数の引数，戻り値に関数が使える
引数として使える関数をコールバック関数と呼ぶ
部分適応
カリー化された関数の一部の引数を固定し，新たな関数を生成
>複数の引数 を取る関数を、より少ない引数を取る関数に分割して入れ子にすること
高階関数を使った書き方
関数合成
第一引数が第二引数より優先度が高い場合，
-1 を返す第一引数が第二引数より優先度が低い場合，
1 を返す第一引数と第二引数の優先度が同じ場合，
0 を返す sort() 非破壊的に使いたい場合，
slice() を挟む関数定義時に決定され，固定される
関数と，その関数が作られた環境が一体となったオブジェクト
クロージャを閉じ込めている外側の関数
TypeScript実行環境
型アノテーション
型を定義する
インターフェース(Interface)
オブジェクトの方に名前を付けられる
プロパティ
readonly 修飾子書き換え不能になる
末尾に
? 省略可能となる
インデックスシグネチャ(Index Signature)
任意のキーのプロパティ値を定義
文字列と数値の型のみ使える
文字列リテラル型を列挙型の代わりに使う
オーバーロードができない
タプル型
以下の制約がある配列の型
個々の要素の型
順番
様子数
使われる場面
関数の引数の型によく使う
API関数の戻り値に異なる値を設定する
分割代入で必要な値だけ抽出
any型
何でもOKな型
あんまよくなさそう
何でもOKな型
何のプロパティもプロトタイプメソッドも持たない
型ガードを用いて型安全を保証させながらコンパイルを通す
何も代入できない型
使い方
neverを使ったcase文漏れのテクニック
すごい!
常に例外を投げる
無限ループの戻り値
任意の型を
<> によって引数として渡す型推論によって抽象化する
再利用性を向上
型安全を維持
js> const toArray = <T>(arg1: T, arg2: T): T[] => [arg1, arg2];
undefined
> toArray(8, 3);
[ 8, 3 ]
> toArray('foo', 'bar');
[ 'foo', 'bar' ]
> toArray(5, 'bar')
[eval].ts:4:12 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.クラス
public 自クラス，子クラス，インスタンスからアクセス可能
protected 自クラス，子クラスからアクセス可能
インスタンスからアクセス不可
private 自クラスのみからアクセス可能
子クラス，インスタンスからアクセス不可
型でもあり，関数でもある
クラス定義時，2つの宣言を同時に行う
インターフェース型宣言
コンストラクタ関数宣言
型エイリアス
任意の方に別名を与えて再利用できる
インターフェースよりこっちを使うべき
保守性の高いコードが書ける
容易に拡張できてしまう
マップ型，条件付き型などが記述できない
非 Null アサーション演算子
! Nullもundefinedも入らない，とコンパイラを黙らせる
よほどの保証がない限り使わない
as const 定数としての型注釈を付与
テンプレートリテラル型
テンプレートリテラルによる文字列を型として扱うことができる
タイポに強力だ
inferと組み合わせることにより，文字列のパターンマッチができる
infer: 中身の型を取得できる
組み込みユーティリティ型
Partical<T> : Tのプロパティを全て省略可能 Required<T> : Tのプロパティを全て必須 Readonly<T> : Tのプロパティを全て読み取り専用 Pick<T,K> : TからKが指定するキーのプロパティのみ抽出 Omit<T,K> : TからKが指定するプロパティを省く Extract<T,U> : TからUの要素のみ抽出 Exclude<T,U> : TからUの要素を省く NonNullable<T> : Tから null と undefined を省く Record<K,T> : Kのようをキー，プロパティ値の方をTとしてオブジェクトの型を生成 Parameters<T> : Tの引数の型を抽出し，タプル型で返す ReturnType<T> : Tの戻り値の型を返す Uppercase<T> : Tの各要素の文字列を全て大文字 Lowercase<T> : Tの各要素の文字列を全て小文字 Capitalize<T> :Tの各要素の文字列の頭を大文字 Uncapitalize<T> : Tの各要素の文字列の頭を小文字オーバーロード
あまり理解できてない．リスト97は，jsで関数が上書きされた時の挙動と何が違うんだ．p198
transform(); で void 返されるべきじゃないのかな? 型アサーション
型がわからない値をTS扱う場合に使う
開発者が型を断定し，コンパイラに押し付ける
型が動作に’適応してなかったらエラーはく
まず型ガードを使うべき
スコープ内で型を保証するチェックを行う
typeof instanceof ユーザー定義の型ガード
型述語を用いる
arg is User のとき，関数がtrueなら arg はUserである． export , import 変数，関数，型で同一の名前を持てる
tsは名前空間として変数宣言空間，型宣言空間が存在するため
JavaScript モジュールを TypeScript から読み込む
アンビエンド宣言
既存のJSモジュールに型情報を付加する宣言