Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Nuxt+TypeScriptの事始め #nuxtmeetup / Nuxt and TypeScript
Sue
May 15, 2018
Technology
8
4.3k
Nuxt+TypeScriptの事始め #nuxtmeetup / Nuxt and TypeScript
NuxtとTypescriptの対応について
Sue
May 15, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
220428event_karibe_part
caddi_eng
0
180
THETA Xの登場はジオ業界を変えるか?
furuhashilab
0
160
SRENEXT2022 組織にSREを実装していくまでの道のり
marnie0301
1
220
ISUCON で使えるツールを作った
shotakitazawa
0
350
エンタープライズにおけるSRE立ち上げとNew Relic選定に至った背景とは / SRE Startup and New Relic in the Enterprise
tomoyakitaura
2
140
次期LTSに備えよ!AOS 6.1 HCI Core 編
smzksts
0
170
Adopting Kafka for the #1 job site in the world
ymyzk
1
270
プロダクトグロースと技術のベースアップを両立させるRettyのアプリ開発スタイル / Achieve Product Growth and Tech Update
imaizume
1
270
1,000万人以上が利用する「家族アルバム みてね」のSRE組織は4年間でどのように作られてきたのか/SRE NEXT 2022
isaoshimizu
4
2.6k
Steps toward self-service operations in eureka
fukubaka0825
0
420
220428event_matsuda_part
caddi_eng
0
240
220428event_ogura_part
caddi_eng
0
180
Featured
See All Featured
Designing with Data
zakiwarfel
91
3.9k
Robots, Beer and Maslow
schacon
152
7.1k
GitHub's CSS Performance
jonrohan
1020
410k
Bootstrapping a Software Product
garrettdimon
295
110k
GraphQLの誤解/rethinking-graphql
sonatard
24
6.2k
What’s in a name? Adding method to the madness
productmarketing
11
1.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
WebSockets: Embracing the real-time Web
robhawkes
57
5k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
212
11k
Web development in the modern age
philhawksworth
197
9.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Transcript
Nuxt+TypeScript 事始め #NuxtMeetup @sue71 2018/05/15
自己紹介 Masaki Sueda github: sue71 twitter: @sue__71 Merpay web フロントエンド/iOS
ソリューションチーム 便利屋 技術課題を解決する人
今日話すこと Vue プロジェクトのTypeScript 対応状況や相性 Nuxt+TypeScript の対応方法 Vue Vuex Nuxt
TypeScript?
TypeScript の特徴 静的型付け言語でJavascript が書ける 型定義による型の後付け
TypeScript のメリット Type Safe Less test / documentation
Vue プロジェクトの型定義状況 コンポーネント 対応状況 備考 vue ◯ ver 2.5=> で改善
vue-template ✕ 型解析されない vuex △ 型定義はあるが... nuxt ✕ 型定義がない
環境構築
IDE VSCode Typescript 補完バッチリ Vetor for VSCode Vue 公式プラグイン Language-Service-Protocol
準拠 Vue ファイルの補完
Lint eslint-plugin-vue を使いたい -> eslint TypeScript -> typescript-eslint-parser で対応 Interface
などがlint に引っかかる場合があるので幾 つかルールをOFF にする no-unused-vars no-undef
Vue + TypeScript
Vue Component v2.5 からComponentOption 形式に対応 tscon g にてnoImplicitThis をtrue に
⇢ 暗黙的なthis へのマッピングを解決 Vue.extend({ data() { return { hoge: 0 } }, computed: { foo(): string { return this.hoge; // Error } } });
Vue Stateless Component template のみのファイルを読み込むためのtweak declare module "*.vue" { import
Vue from "vue"; export default Vue }
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 } })
Vue-Plugin Vue にインジェクトされるもの型を定義する $store, $router, etc... VueComponentOption に提供されるメソッドの型 を定義する
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>; } }
Vuex + TypeScript
Vuex データフローは最も重要な部分 → TypeSafe に書きたい 型定義はあるがany で定義されるものが多い → TypeSafe じゃない
型定義ファイル type MutationTree<State, RootState> = { [key: string]: ( state:
State, payload: any, rootState: RootState ) => void } 実装 const mutations: MutationTree<{}, {}> = { increment(state, payload /*any*/) { } };
型定義を改善する TypeScript2.1 から提供されているMappedType を 利用 → キーと引数の型の組み合わせが定義できる
追加の型パラメータ type Couter = { increment: number; } 改善した型定義 type
MutationTree<State, RootState, Mutations> = { [K keyof Mutations]: ( state: State, payload: Mutations[K] /*Counter[increment]*/, rootState: RootState ) => void }
実装 const mutation: MutationTree<{}, {}, Counter> = { increment(state, payload
/*number*/) { state.count = payload } }
Actions dispatch やcommit の定義もtypesafe にできる const actions: ActionTree<..., CouterA, CounterM>
= { increment(context, payload) { context.commit("increment", "hoge"); // Error context.commit("incremento", 1) // Error } }
TypeSafe ではあるが、、 実装と一致しないInterface を定義する気持ち悪さ は残る namespaced ではない場合さらに型パラメーターを 渡さなければならない
None
Nuxt + Typescript
NuxtContext Nuxt から提供されるコンテキストAPI export interface NuxtContext { app: Vue; isClient:
boolean; isServer: boolean; isStatic: boolean; // ... beforeNuxtRender: Function; } 参照: https://nuxtjs.org/api/context/
nuxtServerInit declare module 'vuex/types/index' { interface ActionTree<S, R> { nuxtServerInit?:
(..., context: NuxtContext) => void; } }
Pages /pages 配下のコンポーネントに対して与えられる 拡張 interface PageComponentOptions { layout?: string |
(ctx: NuxtContext) => string; ... middleware?: string | string[] }
まとめ
Vue プロジェクトでTypeScript 採用するなら型定義 書くくらいの気持ちは必要 完全にTypeSafe に書きたいならAngular, React を推 奨 Nuxt
みたいに機能の多いAPI を覚えるのは大変 定義があるとAPI にどこで何ができるかすぐ分か るしプロジェクトの皆で共有できる → 取り敢えずTypeScript 使っていきましょう
ご清聴ありがとうございました。