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

Nuxtと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 ではない場合さらに型パラメーターを 渡さなければならない
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. ご清聴ありがとうございました。