https://gyazo.com/b8d2fa330b2c656c8afb6e091d4fa273
ゴール
型システムに関するメリットの言語化・理解の向上、楽しく使っていける
JSに型を加えて拡張する
DX（開発体験）の向上
型システム
プログラミング言語が値と種類に沿って分類し、正しく振る舞う性質を保証する手法
略式形式手法（メリット）
厳密な言語を用いることで仕様を明確化
記述中に隠れている不具合を開発早期に発見
テスティングの不具合
用語
型
型検査
性質
安全性
可読性
抽象化・モジュール化
IE6のシェアは0.01%
Cascade Framework
IE6 に対応することとは
IE6 環境を用意する
tsconfig で "target": "ES3" という設定ができますが、今回は使用しません。
バンドラを使うと結局バンドラがコードを結合するために書き足している部分が ES5 のため、バンドル後の JS に対して Babel の ES3 向けのプラグインを使って変換する処理を書きます。 これは構文変換してるだけなので、 ES5 や ES6 などで追加されたメソッド (Array.prototype.map や Promise など) は使えない、全ての構文が動作するように変換されない 外部ライブラリに対応する
最初 v2 で実装
エラーは出てないしHTMLも出力されてるのになぜか画面が描画されなくて、時間切れ
残念ながら v1 で実装
JScript 独自実装に対応する
EventLister
対応方法として、 Document.createElement_ を作って、 addEventLister メソッドを追加し
バンドラで Document.createElement を Document.createElement_ に書き換えます。
setAttribute
対処方法として、 Document.createElement_ に element.setAttribute_ を追加し、
バンドラで setAttribute を setAttribute_ に書き換えます。
hashchange
対処方法として、 location.hash の変更を setInterval で検知する方式をとる
insertBefore
バンドラで該当の式を差し替えてしまう
バージョン毎に実装が異なるスタイルと向き合う
CSSStyleSheet が IE8 以下非対応なので使えない
大枠のパーツは Cascade Framework という古い CSSフレームワーク を使用し、手で書くところは IE6 ハックのみ使って、 IE7 以降の CSS でできる範囲のスタイルにした
Icon は古い FontAwesome でも IE6 非対応なのですが、意外なことに Material design icons が対応しています。
Web API を JSONP で作る
IE7 以下は CORS 非対応
XP の IE は SSL 2.0, SSL 3.0, TLS 1.0 にしか対応していない
Google App Engine なら上記環境に対応しつつ、Node.js アプリケーションにも、静的ファイルにも対応している
allowJSでどうなるのか？
vue add typescript
extendsを書き換え（ESLint）
PropTypeで怒られる
vue.extendを使用
mixinはas InstanceTypeで定義
pluginはinterfaceを定義する
テンプレート解析
propsとemitの解析は難しい
課題:
フロントエンドからバックエンドまで型の恩恵を受けたい。
だが、Web APIの部分で型がない or 多くの手作業が生じてしまう。
npm i @aspida/axios --save
aspida用のWeb APIの型を書く
aspidaコマンドでAPIの型定義を生成
型の恩恵を受けたWeb APIクライアントが用いれる
npx strapi install documentation
backend
frontend
strapiのOpenAPIからOpenAPI2Aspidaに型を生成させる
npx openapi2aspida --build
aspida.config.jsonにOpenAPIのjsonファイルのパスを指定する
UnwrapPromise<T>を作成する
Promiseっぽいならthenの引数を用いる
そうでないならその型自身を用いる
最近のTS新機能
Null Coalescing
value ?? orValue
元来、0や空文字がvalueのときorValueに引っかかる可能性
nullと比較することで三項演算子で通る
if (value ?? true)みたいに使う
null/undefinedの場合はプロパティアクセスを実行せずundefinedを返す
Top Level Await
もともとawaitはasync関数でしかかけなかった Recursive Type Alias
自分の型の再帰ができなかった
interfaceで継承せざるをえなかった
Tips
const assertion
値のあとにas constをつける
リテラルタイプで定義できる
文字列にリテラル型を与える
String literal type
文字列でのenumの取り扱いが難しい
すべてstring型になる
文字列のを使うのはやめたほうがいいのでは？
Compiler API を使ったツール作例
Migrate to Type only
3.8で型定義のみを明示的に読み込む構文
flow-typeには昔からあった
コードが膨大だと移行は大変
AST relocation
組み替えることが可能
旧来のSRCから新しいSRC
ts.TypeChecker & Symbol
型定義なのか？ランタイム実装なのか？を判定する
checker.getSymbolAtLocation
checker.getAliasSymbol
ts.Symbolを取得
Folloe new APIs
ドキュメントはすくないが保守されている
Type-onlyに関する情報やAPIも追加されている