Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Nuxt.js in TypeScript
nunulk
January 17, 2019
Programming
1
95
Nuxt.js in TypeScript
やってみた
nunulk
January 17, 2019
Tweet
Share
More Decks by nunulk
See All by nunulk
nunulk
0
160
nunulk
1
130
nunulk
0
56
nunulk
0
170
nunulk
1
820
nunulk
0
620
nunulk
1
1.1k
nunulk
0
210
nunulk
3
420
Other Decks in Programming
See All in Programming
viteinfinite
0
140
takahi5
0
200
komagata
1
1.8k
akatsukinewgrad
0
130
yamotuki
0
120
prtimes
0
590
line_developers_tw
0
370
line_developers_tw2
0
560
nbkouhou
1
1k
chichou
1
800
ken3ypa
0
150
nrslib
20
13k
Featured
See All Featured
trallard
13
640
shpigford
165
19k
gr2m
83
11k
kastner
54
1.9k
vanstee
116
4.8k
marcelosomers
220
15k
schacon
145
6.6k
carmenhchung
26
1.3k
bryan
30
3.3k
wjessup
338
16k
cromwellryan
101
5.9k
edds
56
9.3k
Transcript
Nuxt.js in TypeScript ͬͯΈͨ nunulk ΒΒͼΎ͏ʮͬͯΈͨʯറΓͷLTେձ
ࣗݾհ const name: Name = 'nunulk(͵͵Δ͘)' let job: Job
= 'ϑϦʔϥϯεͷΣϒΞϓϦέʔγϣϯΤϯδχΞ' let languages: Language[] = [ 'C/C++', ‘Java', 'PHP', ‘JavaScript', ‘TypeScript’, ] let frameworks: Framework[] = [ 'CodeIgniter', 'Symfony', 'CakePHP', ‘Laravel', ]
ຊ͢͜ͱ • Nuxt.js ͱ TypeScript ͷհ • Nuxt.js ͷ TypeScript
ରԠঢ়گ • Nuxt.js Λ TypeScript Ͱಈ͔ͯ͠ΈΔ
Nuxt.js, TypeScript ͷհ
Nuxt.js ͱ “Nuxt.js Vue ΞϓϦέʔγϣϯΛ࡞͢ΔϑϨʔϜϫʔ ΫͰ͢ɻϢχόʔαϧΞϓϦέʔγϣϯɺ੩తʹੜ͞Ε ΔΞϓϦέʔγϣϯɺγϯάϧϖʔδΞϓϦέʔγϣϯͷ த͔Β࡞͢ΔΞϓϦέʔγϣϯΛબͿ͜ͱ͕Ͱ͖·͢ɻ” -
͡Ίʹ - Nuxt.js
Nuxt.js ͱ “Nuxt.js Vue ΞϓϦέʔγϣϯΛ࡞͢ΔϑϨʔϜϫʔ ΫͰ͢ɻϢχόʔαϧΞϓϦέʔγϣϯɺ੩తʹੜ͞Ε ΔΞϓϦέʔγϣϯɺγϯάϧϖʔδΞϓϦέʔγϣϯͷ த͔Β࡞͢ΔΞϓϦέʔγϣϯΛબͿ͜ͱ͕Ͱ͖·͢ɻ” -
͡Ίʹ - Nuxt.js
Nuxt.js ͱ “Nuxt.js Vue ΞϓϦέʔγϣϯΛ࡞͢ΔϑϨʔϜϫʔ ΫͰ͢ɻϢχόʔαϧΞϓϦέʔγϣϯɺ੩తʹੜ͞Ε ΔΞϓϦέʔγϣϯɺγϯάϧϖʔδΞϓϦέʔγϣϯͷ த͔Β࡞͢ΔΞϓϦέʔγϣϯΛબͿ͜ͱ͕Ͱ͖·͢ɻ” -
͡Ίʹ - Nuxt.js
Nuxt.js ͱ • vue, vuex, vue-router, vue-server-renderer, vue-meta શ෦ೖΓ •
ϧʔςΟϯάͷࣗಈԽɺmiddleware • Vue ίϯϙʔωϯτͱ Vuex Store ͷ࣮ʹઐ೦ Ͱ͖Δ
TypeScript ͱ “TypeScript ϚΠΫϩιϑτʹΑͬͯ։ൃ͞Εɺϝϯςφϯε ͞Ε͍ͯΔϑϦʔͰΦʔϓϯιʔεͷϓϩάϥϛϯάݴޠͰ͋Δɻ TypeScriptJavaScriptʹରͯ͠ɺলུՄೳͳ੩తܕ͚ͱΫ ϥεϕʔεΦϒδΣΫτࢦΛՃ͑ͨݫີͳεʔύʔηοτͱͳͬ ͍ͯΔɻ” - Wikipedia
TypeScript ͱ “TypeScript ϚΠΫϩιϑτʹΑͬͯ։ൃ͞Εɺϝϯςφϯε ͞Ε͍ͯΔϑϦʔͰΦʔϓϯιʔεͷϓϩάϥϛϯάݴޠͰ͋Δɻ TypeScriptJavaScriptʹରͯ͠ɺলུՄೳͳ੩తܕ͚ͱΫ ϥεϕʔεΦϒδΣΫτࢦΛՃ͑ͨݫີͳεʔύʔηοτͱͳͬ ͍ͯΔɻ” - Wikipedia
TypeScript ͱ let t: [string, number] = ['Jan', 1] enum
Color { Red, Green, Blue } const c: Color = Color.Green interface Food { name: string calories: number } class Menu { items: string[] pages: number constructor(items: string[], pages: number) { this.items = items this.pages = pages } }
Nuxt.js ͷ TypeScript ରԠঢ়گ
Template
Packages • nuxt-property-decorator: vue-class- component ͷϥούʔ • vuex-class: vuex ؔ࿈ͷܕఆٛ
• axios: ඇಉظHTTP௨৴
Nuxt.js Λ TypeScript Ͱಈ͔ͯ͠ΈΔ
υϝΠϯͷܕͱ RootState ͷఆٛ export interface Task { title: string;
status: TaskStatus; } export enum TaskStatus { Open = 'open', Doing = 'doing', Closed = 'closed', } export interface RootState { tasks: Task[]; }
Vue, Decorator ͷ import <script lang="ts"> import { Vue,
Component, Prop } from 'nuxt-property-decorator' @Component({}) export default class extends Vue { @Prop() value: Task }
Store ͷ࣮ export const state = (): RootState => ({
tasks: [], }) export const mutations: MutationTree<RootState> = { setTasks(state: RootState, tasks: Task[]): void { state.tasks = tasks }, addTask(state: RootState, task: Task): void { state.tasks.push({...task}) }, } export const actions: ActionTree<RootState, RootState> = { async fetchTasks({ commit }) { const tasks: Task[] = await api.fetchTasks() commit("setTasks", tasks) } }