odan blog

Vue Developer Experience / VueDXを試した

Vue Developer Experience / VueDX とは

試したいモチベーション

  • このブログに Storybook の導入を試みている中で、.vue ファイルで export した型を .stories.ts ファイルから参照したくなった
    • Storybook には Story という型があり、各 Story を記述するときに利用できる
    • 以下は React の例
// List.stories.tsx

import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';
import { List, ListProps } from './List';

export default {
  component: List,
  title: 'List',
} as Meta;

// Always an empty list, not super interesting
const Template : Story<ListProps> = (args) => <List {...args} />;

https://storybook.js.org/docs/react/writing-stories/introduction#stories-for-two-or-more-components

  • Template 関数の args の型が List のコンポーネントファイルが export する ListProps になる
    • これと同様のことをしたい場合、 TypeScript (tsserver/tsc) に .vue ファイルを理解してもらう必要がある

VueDX で出来ること

  • @vuedx/typecheck を使うと CLI から型チェックが可能
    • .vue ファイルや それを import した .ts ファイルの型チェックが可能
    • tsc のラッパー的な実装になっている
    • ただ、CLI で型チェックすること自体は Vetur の CLI ツールである vti でも可能

VueDX で出来ないこと