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
5.3k
Nuxt+TypeScriptの事始め #nuxtmeetup / Nuxt and TypeScript
NuxtとTypescriptの対応について
Sue
May 15, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
AI連携の新常識! 話題のMCPをはじめて学ぶ!
makoakiba
0
140
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
3
540
Amazon Athena で JSON・Parquet・Iceberg のデータを検索し、性能を比較してみた
shigeruoda
1
150
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
11k
Observability — Extending Into Incident Response
nari_ex
1
540
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
250
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
sh_fk2
1
670
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
290
OSSで50の競合と戦うためにやったこと
yamadashy
3
1k
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
6
1.2k
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
4
3.6k
Featured
See All Featured
Facilitating Awesome Meetings
lara
57
6.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Optimizing for Happiness
mojombo
379
70k
How STYLIGHT went responsive
nonsquared
100
5.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Code Reviewing Like a Champion
maltzj
526
40k
RailsConf 2023
tenderlove
30
1.3k
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 使っていきましょう
ご清聴ありがとうございました。