Nuxt+TypeScriptの事始め #nuxtmeetup / Nuxt and TypeScript

Transcript

1. Nuxt+TypeScript 事始め #NuxtMeetup @sue71 2018/05/15

2. 自己紹介 Masaki Sueda github: sue71 twitter: @sue__71 Merpay web フロントエンド/iOS

   ソリューションチーム 便利屋 技術課題を解決する人

3. 今日話すこと Vue プロジェクトのTypeScript 対応状況や相性 Nuxt+TypeScript の対応方法 Vue Vuex Nuxt

4. TypeScript?

5. TypeScript の特徴 静的型付け言語でJavascript が書ける 型定義による型の後付け

6. TypeScript のメリット Type Safe Less test / documentation

7. Vue プロジェクトの型定義状況 コンポーネント 対応状況 備考 vue ◯ ver 2.5=> で改善

   vue-template ✕ 型解析されない vuex △ 型定義はあるが... nuxt ✕ 型定義がない

8. 環境構築

9. IDE VSCode Typescript 補完バッチリ Vetor for VSCode Vue 公式プラグイン Language-Service-Protocol

   準拠 Vue ファイルの補完

10. Lint eslint-plugin-vue を使いたい -> eslint TypeScript -> typescript-eslint-parser で対応 Interface

    などがlint に引っかかる場合があるので幾 つかルールをOFF にする no-unused-vars no-undef

11. Vue + TypeScript

12. Vue Component v2.5 からComponentOption 形式に対応 tscon g にてnoImplicitThis をtrue に

    ⇢ 暗黙的なthis へのマッピングを解決 Vue.extend({ data() { return { hoge: 0 } }, computed: { foo(): string { return this.hoge; // Error } } });

13. Vue Stateless Component template のみのファイルを読み込むためのtweak declare module "*.vue" { import

    Vue from "vue"; export default Vue }

14. hello.vue <template> <div>Hello</div> </template> hello-container.vue import Vue from "vue"; import

    hello from "hello.vue"; export default Vue.extend({ components: { hello } })

15. Vue-Plugin Vue にインジェクトされるもの型を定義する $store, $router, etc... VueComponentOption に提供されるメソッドの型 を定義する

16. Vuex-Store declare module "vue/types/options" { interface ComponentOptions<V extends Vue> {

    store?: Store<RootState>; } } declare module "vue/types/vue" { interface Vue { $store: Store<RootState>; } }

17. Vuex + TypeScript

18. Vuex データフローは最も重要な部分 → TypeSafe に書きたい 型定義はあるがany で定義されるものが多い → TypeSafe じゃない

19. 型定義ファイル type MutationTree<State, RootState> = { [key: string]: ( state:

    State, payload: any, rootState: RootState ) => void } 実装 const mutations: MutationTree<{}, {}> = { increment(state, payload /*any*/) { } };

20. 型定義を改善する TypeScript2.1 から提供されているMappedType を 利用 → キーと引数の型の組み合わせが定義できる

21. 追加の型パラメータ type Couter = { increment: number; } 改善した型定義 type

    MutationTree<State, RootState, Mutations> = { [K keyof Mutations]: ( state: State, payload: Mutations[K] /*Counter[increment]*/, rootState: RootState ) => void }

22. 実装 const mutation: MutationTree<{}, {}, Counter> = { increment(state, payload

    /*number*/) { state.count = payload } }

23. Actions dispatch やcommit の定義もtypesafe にできる const actions: ActionTree<..., CouterA, CounterM>

    = { increment(context, payload) { context.commit("increment", "hoge"); // Error context.commit("incremento", 1) // Error } }

24. TypeSafe ではあるが、、 実装と一致しないInterface を定義する気持ち悪さ は残る namespaced ではない場合さらに型パラメーターを 渡さなければならない

25. None

26. Nuxt + Typescript

27. NuxtContext Nuxt から提供されるコンテキストAPI export interface NuxtContext { app: Vue; isClient:

    boolean; isServer: boolean; isStatic: boolean; // ... beforeNuxtRender: Function; } 参照: https://nuxtjs.org/api/context/

28. nuxtServerInit declare module 'vuex/types/index' { interface ActionTree<S, R> { nuxtServerInit?:

    (..., context: NuxtContext) => void; } }

29. Pages /pages 配下のコンポーネントに対して与えられる 拡張 interface PageComponentOptions { layout?: string |

    (ctx: NuxtContext) => string; ... middleware?: string | string[] }

30. まとめ

31. Vue プロジェクトでTypeScript 採用するなら型定義 書くくらいの気持ちは必要 完全にTypeSafe に書きたいならAngular, React を推 奨 Nuxt

    みたいに機能の多いAPI を覚えるのは大変 定義があるとAPI にどこで何ができるかすぐ分か るしプロジェクトの皆で共有できる → 取り敢えずTypeScript 使っていきましょう

32. ご清聴ありがとうございました。