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
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
320
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
420
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
130
【LT】ソフトウェア産業は進化しているのか? -Javaの想い出とともに- #jjug_ccc
takabow
0
170
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
100
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
720
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
210
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
450
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
170
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
Featured
See All Featured
How to Ace a Technical Interview
jacobian
275
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Music & Morning Musume
bryan
46
6.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
KATA
mclloyd
29
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
RailsConf 2023
tenderlove
29
880
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Practical Orchestrator
shlominoach
186
10k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Why Our Code Smells
bkeepers
PRO
334
57k
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 使っていきましょう
ご清聴ありがとうございました。