ひびのログ

日々ではないけどログを出力していくブログ

TypeScript

@vue/test-utils で「<Component name> has been modified to ensure it has the correct instance properties」と言われた時

前置き Vue.js + JavaScript 環境に TypeScript を導入しようとしたときの話です。 コンポーネントを TypeScript 化してコンパイルはでき、テスト(Jest)が通るか確かめたときの話です。 前置き やったこと バージョン エラー内容 なぜこのメッセージが表示…

ライブラリの中で定義しているインターフェースを拡張したかったんですよ

タイトルのとおりで、TypeScript をある程度やっている人なら当然のことかと思いますが。 interface の拡張 TS の interface って拡張できるじゃないですか。 interface Foo { bar: string } interface Foo { baz: number } /* // 結果 Foo: { bar: string b…

「実践 TypeScript ―BFF と Next.js & Nuxt.js の型定義―」を読みました

はじめに 「JavaScript ではなく TypeScript で書け」と、去年くらいからかなり言われています。 私も JavaScript と TypeScript を使っているので、それにすごい共感します。 しかし、実際に型付けするときには結構困ることがあると思います。 そこで、つい…

【資料公開】TypeScript の社内勉強会を開催しました!

タイトルどおりなのですが、TypeScript の社内勉強会を開催しました! 勉強会で使用した資料 https://gitpitch.com/tee-talog/try-typescript 今回は GitPitch を利用してスライドを作成しました。 簡単にスライドが作れるので、それほどデザインにこだわら…

勇なま:マップを作った

現時点のソースはこちら github.com 進捗どうですか マップを表示して、カーソル移動をできるようにした。押しっぱなしも OK。 アローキーと WASD でカーソル移動。G で初期位置に戻る。 今後負荷がかかりそうなので、軽減のためにマップは表示されていると…

勇者のくせになまいきだ。を再現してみたかった

記事リンク まだないよ。 リポジトリ github.com 導入 皆様は「勇者のくせになまいきだ。(略して勇なま)」をご存じでしょうか? 一言で表すと、神ゲー です。 思い出補正がかかっている可能性は否めないですが、モンスターを増やして勇者を倒すという、簡…

Vue.js でアクセシビリティを考慮したダイアログのフォーカス移動を考えてみた

UI フレームワーク等ではすでに対応しているかもしれませんが、自分でも作ってみました。 リポジトリ github.com src/App.vue : 親コンポーネント src/components/MyDialog.vue : ダイアログ本体 サンプル https://tee-talog.github.io/vue-dialog-focus/ 背…

TypeScript で動的にメソッドを追加する

JavaScriptでは、prototypeに適当に代入してあげればメソッドやプロパティの追加ができますが、 型という楽園を手に入れた TypeScript では簡単にはできません。 でもどうにかこうにかやる方法があったので、ググって色々試した結果を載せておきます。 ちな…