Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sue
May 15, 2018

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

NuxtとTypescriptの対応について

Sue

May 15, 2018
Tweet

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 自己紹介
    Masaki Sueda
    github: sue71
    twitter: @sue__71
    Merpay web
    フロントエンド/iOS
    ソリューションチーム
    便利屋
    技術課題を解決する人

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Vue
    プロジェクトの型定義状況
    コンポーネント 対応状況 備考
    vue
    ◯ ver 2.5=>
    で改善
    vue-template ✕
    型解析されない
    vuex
    △ 型定義はあるが...
    nuxt ✕
    型定義がない

    View full-size slide

  7. 環境構築

    View full-size slide

  8. IDE
    VSCode
    Typescript
    補完バッチリ
    Vetor for VSCode
    Vue
    公式プラグイン
    Language-Service-Protocol
    準拠
    Vue
    ファイルの補完

    View full-size slide

  9. Lint
    eslint-plugin-vue
    を使いたい -> eslint
    TypeScript -> typescript-eslint-parser
    で対応
    Interface
    などがlint
    に引っかかる場合があるので幾
    つかルールをOFF
    にする
    no-unused-vars
    no-undef

    View full-size slide

  10. Vue + TypeScript

    View full-size slide

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


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

    View full-size slide

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

    View full-size slide

  13. hello.vue

    Hello

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

    View full-size slide

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

    View full-size slide

  15. Vuex-Store
    declare module "vue/types/options" {
    interface ComponentOptions {
    store?: Store;
    }
    }
    declare module "vue/types/vue" {
    interface Vue {
    $store: Store;
    }
    }

    View full-size slide

  16. Vuex + TypeScript

    View full-size slide

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

    View full-size slide

  18. 型定義ファイル
    type MutationTree = {
    [key: string]: (
    state: State,
    payload: any,
    rootState: RootState
    ) => void
    }
    実装
    const mutations: MutationTree<{}, {}> = {
    increment(state, payload /*any*/) {
    }
    };

    View full-size slide

  19. 型定義を改善する
    TypeScript2.1
    から提供されているMappedType

    利用

    キーと引数の型の組み合わせが定義できる

    View full-size slide

  20. 追加の型パラメータ
    type Couter = {
    increment: number;
    }
    改善した型定義
    type MutationTree = {
    [K keyof Mutations]: (
    state: State,
    payload: Mutations[K] /*Counter[increment]*/,
    rootState: RootState
    ) => void
    }

    View full-size slide

  21. 実装
    const mutation: MutationTree<{}, {}, Counter> = {
    increment(state, payload /*number*/) {
    state.count = payload
    }
    }

    View full-size slide

  22. Actions
    dispatch
    やcommit
    の定義もtypesafe
    にできる
    const actions: ActionTree<..., CouterA, CounterM> = {
    increment(context, payload) {
    context.commit("increment", "hoge"); // Error
    context.commit("incremento", 1) // Error
    }
    }

    View full-size slide

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

    View full-size slide

  24. Nuxt + Typescript

    View full-size slide

  25. NuxtContext
    Nuxt
    から提供されるコンテキストAPI
    export interface NuxtContext {
    app: Vue;
    isClient: boolean;
    isServer: boolean;
    isStatic: boolean;
    // ...
    beforeNuxtRender: Function;
    }
    参照: https://nuxtjs.org/api/context/

    View full-size slide

  26. nuxtServerInit
    declare module 'vuex/types/index' {
    interface ActionTree {
    nuxtServerInit?: (..., context: NuxtContext) => void;
    }
    }

    View full-size slide

  27. Pages
    /pages
    配下のコンポーネントに対して与えられる
    拡張
    interface PageComponentOptions {
    layout?: string | (ctx: NuxtContext) => string;
    ...
    middleware?: string | string[]
    }

    View full-size slide

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

    Nuxt
    みたいに機能の多いAPI
    を覚えるのは大変
    定義があるとAPI
    にどこで何ができるかすぐ分か
    るしプロジェクトの皆で共有できる

    取り敢えずTypeScript
    使っていきましょう

    View full-size slide

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

    View full-size slide