はじめに
この記事は general.ts を確認し、自分用のメモとしてリスト形式にまとめています。
general.ts について
Vue全体で使う汎用ユーティリティの集合（型チェック・文字列変換・定数など）が定義されれいる
このファイルから学べること
Vue で使われているユーティリティは、そのまま自分が書くコードにも使うことができる。
| 知ると得られること |
具体例 |
| 型チェックの書き方 |
Object.prototype.toString を使った isArray / isMap など |
| キャッシュのパターン |
cacheStringFunction で文字列変換結果をメモ化 |
| 予約名・名前空間設計 |
isReservedProp で「避けるべきキー」をどう決めるか |
など‥
general.ts 関数一覧
定数・スタブ
※ スタブ | 定番のダミー定数
| 関数/定数 |
意味 |
EMPTY_OBJ |
空オブジェクト（dev 時は freeze） |
EMPTY_ARR |
空配列（dev 時は freeze） |
NOOP |
何もしない関数 |
NO |
常に false を返す関数 |
型チェック
| 関数 |
意味 |
isArray |
配列かどうか |
isMap |
Map かどうか |
isSet |
Set かどうか |
isDate |
Date かどうか |
isRegExp |
RegExp かどうか |
isFunction |
関数かどうか |
isString |
文字列かどうか |
isSymbol |
Symbol かどうか |
isObject |
null でないオブジェクトかどうか |
isPromise |
Promise かどうか |
isPlainObject |
純粋なオブジェクト（{}）かどうか |
toTypeString |
[object Xxx] 形式の型文字列を取得 |
toRawType |
[object Xxx] から Xxx 部分を取得 |
hasOwn |
オブジェクトの自身のプロパティかどうか |
isIntegerKey |
整数インデックス（配列用）として有効な文字列かどうか |
Vue 固有判定
| 関数 |
意味 |
isOn |
イベントハンドラ用キー（onClick など）かどうか |
isModelListener |
v-model の onUpdate:xxx 形式かどうか |
isReservedProp |
Vue の予約プロパティ（key, ref など）かどうか |
isBuiltInDirective |
組み込みディレクティブ（v-if, v-for など）かどうか |
文字列変換
| 関数 |
意味 |
camelize |
kebab-case → camelCase（foo-bar → fooBar） |
hyphenate |
camelCase → kebab-case（fooBar → foo-bar） |
capitalize |
先頭を大文字にする（foo → Foo） |
toHandlerKey |
イベント名 → ハンドラ名（click → onClick） |
汎用ユーティリティ
| 関数 |
意味 |
extend |
Object.assign のエイリアス |
remove |
配列から指定要素を削除 |
hasChanged |
2つの値が異なるか（NaN 対応） |
invokeArrayFns |
関数配列を順に実行 |
def |
非列挙プロパティを定義 |
getGlobalThis |
実行環境に応じたグローバルオブジェクトを取得 |
数値変換
| 関数 |
意味 |
looseToNumber |
v-model の .number 用の緩い数値変換（"123-foo" → 123） |
toNumber |
文字列を数値へ変換し、数値でなければそのまま返す |
コンパイラ用
| 関数 |
意味 |
genPropsAccessExp |
<script setup> の props アクセス式を生成 |
genCacheKey |
テンプレートキャッシュ用のキーを生成 |
さいごに
自分用のメモの為、今後更新等入ると思います。🙇♀️
