進めてる(進めていく)教材とか

• HypertextCandy React入門チュートリアル 完了
• りあクト！ TypeScriptで始めるつらくないReact開発 4/14 完了
• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 完了
• Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！ 完了
• React 公式チュートリアル 完了

今日やったこと

• りあクト！ TypeScriptで始めるつらくないReact開発 第4章 TypeScriptで型をご安全に

りあクト！ TypeScriptで始めるつらくないReact開発 第4章 TypeScriptで型をご安全に

ざっくりサマリー

型アサーションと型ガード

• 型がわからない値をどうやって扱うか？ → 型アサーション(Type Assertion)

• 型アサーション

  • assertion = 断定
  • 型がわからなくても開発者が型を断定することで適合していればコンパイルが通るようになる
  • 適合してない場合はぬるぽになる
  • 開発者の判断次第で型安全が保証されなくなってしまう
  • 型アサーションはコンパイラの型解釈が変わるだけで実際の型が変わっているわけではない ≠ 型キャスト
  • 型アサーションは最終手段

• 型ガード

  • あるスコープ内での型を保証するチェックを行う式のこと

  • if(typeof foo === 'string'){略}みたいな
  • typeofだとプリミティブ型(null除く)しか使えない
  • クラスインスタンスならinstanceofでチェックできる
  • クラスでつくられていないオブジェクトの場合はユーザー定義の型ガードをつくって,自分で型を絞り込む必要がある
  • 型述語

  • 戻り値の型でhoge is fugaとした場合,戻り値がtrueのときに型がfugaとなる

    モジュールと型定義

• TSではインポート時に読み込みファイルの拡張子を書くとエラーになる

  • 自動でいろんな拡張子etcでモジュールを検索しているため拡張子が書かれていると逆に都合が悪い
• TSではインターフェースや型エイリアスもimport,exportの対象となる

• TSでは変数宣言空間と型宣言空間の2つの宣言空間があり名前の管理は別々に行っている

  • 同じ名前で型とオブジェクトを定義すると両方ともエクスポート,インポートされる
• npmパッケージとかではd.tsファイルで.jsファイルの型定義を行っている
• パッケージが型ファイルを配布していない場合 → Microsoftの『TypeSearch』で検索する

• DefinitelyTypedというプロジェクトで型定義ファイルを作ってくれている

  • npmパッケージで@types/{パッケージ名}のように提供されている

• 型宣言の優先度

  • ローカル → パッケージ内 → @types

    TypeScript の環境設定

• tsconfig.jsonはコンパイラ設定を保存しておくためのファイル

  • strictオプションで複数のオプションをまとめて有効にしている

• 基本的にCRAで設定してくれるtsconfig.jsonでOK

  • baseUrlオプションで起点ディレクトリを指定すると絶対パスでインポート文を書ける
  • downlevelIterationオプション → コンパイルターゲット(ES5)以前のバージョンに設定されされてる場合でもES5から導入された各種イテレータ周りの記述を実行できるようにしてくれる
• 新機能は早めに取り入れるように随時設定は見直したほうがいい！

まとめ

りあクト パート1が終わりました！
ほぼJSとTS。
Reactやってないw
基礎大事。
型安全も品質の高いソフトウェア作るなら大事。
遠回りのようで一歩ずつ段階を追うのが実は近道なんだろうな。

それではまた明日。