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.2k
Nuxt+TypeScriptの事始め #nuxtmeetup / Nuxt and TypeScript
NuxtとTypescriptの対応について
Sue
May 15, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
Create Ruby native extension gem with Go
sue445
0
110
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
190
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
380
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
280
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
590
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
100
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
730
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
4
380
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Side Projects
sachag
455
43k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Balancing Empowerment & Direction
lara
3
620
Become a Pro
speakerdeck
PRO
29
5.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Speed Design
sergeychernyshev
32
1.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
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 使っていきましょう
ご清聴ありがとうございました。