Posts

背景 TypeScriptの教材で以下のサンプルコードがあったので、コードリーディングしていく。 概要 以下のコードリーディングをしていく。 非同期データ取得関数をラップして、そこで起きる例外をフォローしつつ正常系と異常系に振り分ける関数を定義している。 type Result<T, E extends Error> = Ok<T, E> | Err<T, E> export class Ok<T, E extends Error> { constructor(readonly val: T) {} isOk = (): this is Ok<T, E> => true isErr = (): this is Err<T, E> => false } export class Err<T, E extends Error> { constructor(readonly err: E) {} isOk = (): this is Ok<T, E> => false isErr = (): this is Err<T, E> => true } export const withResult = <T, A extends any[], E extends Error>(fn: (.

背景 Twitterを眺めていると汎用性が高そうな関数を作成できるTypeScriptのツイートがあったので、整理するためにまとめる。 TypeScript Tip #15 概要 関数の引数のタイプをみて、タイプに応じてpayloadが必要か必要がないかをTypeScriptで判断する。 // 第一引数がSIGN_OUTの場合は、payloadはなし sendEvent('SIGN_OUT') // 第一引数がLOG_INの場合は、payloadは必須 sendEvent("LOG_IN", { userId: '123' }) 成功パターン sendEvent('SIGN_OUT') sendEvent("LOG_IN", { userId: '123' }) 失敗パターン(コンパイルエラー) sendEvent('SIGN_OUT', {}) sendEvent('LOG_IN', { userId: 122 }) sendEvent('LOG_IN', {}) sendEvent('LOG_IN') 本題 以下のコードで実現可能 type AuthEvent = | { type: 'LOG_IN' payload: { userId: string } } | { type: 'SIGN_OUT' } const sendEvent = <Type extends AuthEvent['type']>( ...args: Extract<AuthEvent, { type: Type }> extends { payload: infer TPayload } ?

背景 refとreactiveの使い分けがパッとでてこなかったことがあったのでまとめていく。 概要 どの状況で使い分ければいいのか refとreactiveの違い 本題 1.どの状況で使い分ければいいのか refはプリミティブ型に対して使用する。 reactiveはオブジェクト型に対して使用する。 2.refとreactiveの違い ref const boolean = ref(false) // export function ref<boolean>(value: boolean): Ref<boolean> TypeScriptの場合は、引数(初期値)を型推論してくれる。 明示的にしたい型注釈したい場合は、ref<boolean | null>(false)と使用することもできる。 基本的になんでも(オブジェクト、配列、プリミティブ)refで使用ができる。 引数の値がオブジェクトの場合は、Vue内部でreactiveに更新している。更新している負荷を与えてしまうため、オブジェクトの場合は、reactiveを使用したほうがいいと言われている。 ref.valueでデータを格納する Ex)boolean.value = true reactive const user = reactive({ firstName: '太郎', lastName: '山田', height: 160, weight: 50 }) // const user: {firstName: string, lastName: string, height: number, weight: number} TypeScriptの場合は、引数(初期値)を型推論してくれる。 型注釈をつけたい場合は、ジェネクリスを使用できる const user = reactive<{ firstName?: string lastName?

背景 Vue.jsを使用する際にwatchを使う頻度はそこまで多くなく、使う度にドキュメントを確認するので、記事にまとめておく。 概要 Vue3のwatchとwatchEffectの仕様をまとめていく。また、それぞれの違いもまとめる。 本題 watch 説明 指定したデータを監視して、変化があればコールバック関数が実行する。 使い方 単一のデータ監視と複数のデータ監視の2種類の使い方が存在する。 1. 単一のデータを監視する場合 const count = ref(0) // 第一引数に監視したいデータを記載する watch(count, (newCount, prevCount) => { /* ... */ }) const state = reactive({ count: 0 }) // 第一引数に監視したいデータをコールバック関数で記載する watch(() => state.count, (newCount, prevCount) => { /* ... */ } ) 2. 複数のデータを監視する場合 配列を使用することで、複数のデータを監視できる 複数の監視データが同時に変更する時には、コールバック関数は一度して動かないため注意 const firstName = ref('') const lastName = ref('') // 第一引数を配列にしている watch([firstName, lastName], (newValues, prevValues) => { console.