Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt+TypeScriptの事始め #nuxtmeetup / Nuxt and Type...
Search
Sue
May 15, 2018
Technology
8
5k
Nuxt+TypeScriptの事始め #nuxtmeetup / Nuxt and TypeScript
NuxtとTypescriptの対応について
Sue
May 15, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
Oracle Database Backup Service:サービス概要のご紹介
oracle4engineer
PRO
0
4.1k
四国クラウドお遍路 2024 in 高知 エンディング
yukataoka
0
200
四国のあのイベントの〇〇システムを45日間で構築した話 / cloudohenro2024_tachibana
biatunky
0
320
不動産 x AIことはじめ~データの真価を拓くために
estie
0
100
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
160
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
300
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
0
13k
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
1
170
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
220
たった1人からはじめる【Agile Community of Practice】~ソース原理とFearless Changeを添えて~
ktc_corporate_it
1
340
Mocking in Rust Applications
taiki45
1
400
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Documentation Writing (for coders)
carmenintech
65
4.3k
Building Flexible Design Systems
yeseniaperezcruz
325
37k
The Cult of Friendly URLs
andyhume
76
6k
Done Done
chrislema
180
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
RailsConf 2023
tenderlove
28
810
A Modern Web Designer's Workflow
chriscoyier
691
190k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
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 使っていきましょう
ご清聴ありがとうございました。