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

Transcript

1. 1.

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

2. 2.

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

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

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

4. 4.

   TypeScript?

5. 5.

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

6. 6.

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

7. 7.

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

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

   環境構築

9. 9.

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

   準拠 Vue ファイルの補完
10. 10.

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

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

    Vue + TypeScript

12. 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. 13.

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

    Vue from "vue"; export default Vue }
14. 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. 15.

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

16. 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. 17.

    Vuex + TypeScript

18. 18.

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

19. 19.

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

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

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

21. 21.

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

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

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

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

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

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

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

25. 25.

    None
26. 26.

    Nuxt + Typescript

27. 27.

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

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

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

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

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

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

    まとめ

31. 31.

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

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

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