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

4158047d9e45e9e52ac6e7bb9ebc7c05?s=47 Sue
May 15, 2018

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

NuxtとTypescriptの対応について

4158047d9e45e9e52ac6e7bb9ebc7c05?s=128

Sue

May 15, 2018
Tweet

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. ご清聴ありがとうございました。