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. 2.

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

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

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

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

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

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

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

    ⇢ 暗黙的なthis へのマッピングを解決 Vue.extend({ data() { return { hoge: 0 } }, computed: { foo(): string { return this.hoge; // Error } } });
  5. 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 } })
  6. 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>; } }
  7. 19.

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

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

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

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

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

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

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

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

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

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