kahirokunn
twitter: https://twitter.com/kahirokunn
qiita: https://qiita.com/kahirokunn
iCareでフロントの技術顧問させて頂いてる
令和元年最後の誕生日だったのでtwitterで欲しい物リストを共有したら沢山の本が届いた。嬉しみ🥰
最近あった嬉しいこと
CarelyでVueコンポーネントのTypescript型定義を自動生成し改善した技術の話
Vue3いいですよね〜😍
Vue Composition APIのお陰でコンポーネント自身の型定義や記述の満足度は向上した
マジ最高!
もうこれで書いていくべさ!
<template>
<div>
<h2>mouse pointer</h2>
<div>x: {{ x }}</div>
<div>y: {{ y }}</div>
<button @click="setDummyPos">setDummyPos</button>
</div>
</template>
<script lang="ts">
import { createComponent } from "@vue/composition-api";
import { useMouse } from "@/hooks/useMouse";
export default createComponent({
setup() {
const { x, y } = useMouse();
return {
x,
y,
};
}
});
</script>
いざ、Vue composition apiで書いたコンポーネントを組み合わせてコンポーネントを作る!
.vueファイルから何がexportされてるかtypescriptがわからない
駄目じゃん😢
本日はこの状況を改善した話をします
話を整理
.vueファイルから何がexportされてるかtypescriptがわからない
え、って感じ
解決策1: .vue拡張子からVueがexportされてる事にする
欠点
-
optionとかが抜け落ちるので、どんなpropsやmethodsがあるのかとか型からではわからない
- そうするとtsでの単体テストもasとか使って誤魔化しながらじゃないとほぼ書けない
解決策2: .vue拡張子の型定義ファイルを自分で1つずつ書く
欠点
- コンポーネントを編集する度にメンテしなければならず漏れて実態と型が乖離するリスクが高い
-
そもそももれなくても自前定義めんどくさい。めんどくさいのは長く続かない
- なんでvueでts書いてるのかって考えがよぎるぐらいには悲しい気持ちになる
これならVue + Tsやりたくない👎
解決策3: .vue拡張子の型定義ファイルを自動生成ツールを作る
これも自動生成した型定義ファイル
※ 元々ktsnさんのvuetypeというtsの型定義生成の実装はあったが、見た感じプロトタイプであり、何年か前にメンテされなくなっており、最新版だと動かない。なのでそれをフォークして作っている
自分でやろうと思ったきっかけはtakepepeさんのcomiler api本
これならOK👍
実装時等の参考資料
実装
Demo
←のソースから↓の.d.tsが出力されてる
公開したpackageのinstall方法は yarn add -D @kahirokunn/vuedts
ご清聴ありがとうございました
CarelyでVueコンポーネントのTypescript型定義を自動生成し改善した技術の話
By kahirokunn
CarelyでVueコンポーネントのTypescript型定義を自動生成し改善した技術の話
- 1,642