kahirokunn

twitter: https://twitter.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がわからない

駄目じゃん😢

本日はこの状況を改善した話をします

話を整理

前回Vue3.0について発表した

スライドのリンクはこちら

スライドのTL;TD;

jsx + composition apiで型安全に開発が可能になる

しかし、次の様なケースはどうだろうか？

.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👍

実装時等の参考資料

リポジトリ: https://github.com/kahirokunn/vuedts
npm: https://www.npmjs.com/package/@kahirokunn/vuedts

実装

Demo

←のソースから↓の.d.tsが出力されてる

公開したpackageのinstall方法は
yarn add -D　@kahirokunn/vuedts