Nuxt.js in TypeScript

やってみた

Transcript

1. Nuxt.js in TypeScript ΍ͬͯΈͨ nunulk ΒΒͼΎ͏ʮ΍ͬͯΈͨʯറΓͷLTେձ
2. ࣗݾ঺հ 
 const name: Name = 'nunulk(͵͵Δ͘)' let job: Job = 'ϑϦʔϥϯεͷ΢ΣϒΞϓϦέʔγϣϯΤϯδχΞ' let languages: Language[] = [
 'C/C++', ‘Java', 'PHP', ‘JavaScript', ‘TypeScript’,
 ] let frameworks: Framework[] = [
 'CodeIgniter', 'Symfony', 'CakePHP', ‘Laravel', ]
3. ຊ೔࿩͢͜ͱ • Nuxt.js ͱ TypeScript ͷ঺հ • Nuxt.js ͷ TypeScript ରԠঢ়گ • Nuxt.js Λ TypeScript Ͱಈ͔ͯ͠ΈΔ
4. Nuxt.js, TypeScript ͷ঺հ
5. Nuxt.js ͱ͸ “Nuxt.js ͸ Vue ΞϓϦέʔγϣϯΛ࡞੒͢ΔϑϨʔϜϫʔ ΫͰ͢ɻϢχόʔαϧΞϓϦέʔγϣϯɺ੩తʹੜ੒͞Ε ΔΞϓϦέʔγϣϯɺγϯάϧϖʔδΞϓϦέʔγϣϯͷ த͔Β࡞੒͢ΔΞϓϦέʔγϣϯΛબͿ͜ͱ͕Ͱ͖·͢ɻ” - ͸͡Ίʹ - Nuxt.js
6. Nuxt.js ͱ͸ “Nuxt.js ͸ Vue ΞϓϦέʔγϣϯΛ࡞੒͢ΔϑϨʔϜϫʔ ΫͰ͢ɻϢχόʔαϧΞϓϦέʔγϣϯɺ੩తʹੜ੒͞Ε ΔΞϓϦέʔγϣϯɺγϯάϧϖʔδΞϓϦέʔγϣϯͷ த͔Β࡞੒͢ΔΞϓϦέʔγϣϯΛબͿ͜ͱ͕Ͱ͖·͢ɻ” - ͸͡Ίʹ - Nuxt.js
7. Nuxt.js ͱ͸ “Nuxt.js ͸ Vue ΞϓϦέʔγϣϯΛ࡞੒͢ΔϑϨʔϜϫʔ ΫͰ͢ɻϢχόʔαϧΞϓϦέʔγϣϯɺ੩తʹੜ੒͞Ε ΔΞϓϦέʔγϣϯɺγϯάϧϖʔδΞϓϦέʔγϣϯͷ த͔Β࡞੒͢ΔΞϓϦέʔγϣϯΛબͿ͜ͱ͕Ͱ͖·͢ɻ” - ͸͡Ίʹ - Nuxt.js
8. Nuxt.js ͱ͸ • vue, vuex, vue-router, vue-server-renderer, vue-meta શ෦ೖΓ • ϧʔςΟϯάͷࣗಈԽɺmiddleware • Vue ίϯϙʔωϯτͱ Vuex Store ͷ࣮૷ʹઐ೦ Ͱ͖Δ
9. TypeScript ͱ͸ “TypeScript ͸ϚΠΫϩιϑτʹΑͬͯ։ൃ͞Εɺϝϯςφϯε ͞Ε͍ͯΔϑϦʔͰΦʔϓϯιʔεͷϓϩάϥϛϯάݴޠͰ͋Δɻ TypeScript͸JavaScriptʹରͯ͠ɺলུ΋Մೳͳ੩తܕ෇͚ͱΫ ϥεϕʔεΦϒδΣΫτࢦ޲ΛՃ͑ͨݫີͳεʔύʔηοτͱͳͬ ͍ͯΔɻ” - Wikipedia
10. TypeScript ͱ͸ “TypeScript ͸ϚΠΫϩιϑτʹΑͬͯ։ൃ͞Εɺϝϯςφϯε ͞Ε͍ͯΔϑϦʔͰΦʔϓϯιʔεͷϓϩάϥϛϯάݴޠͰ͋Δɻ TypeScript͸JavaScriptʹରͯ͠ɺলུ΋Մೳͳ੩తܕ෇͚ͱΫ ϥεϕʔεΦϒδΣΫτࢦ޲ΛՃ͑ͨݫີͳεʔύʔηοτͱͳͬ ͍ͯΔɻ” - Wikipedia
11. 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 } }
12. Nuxt.js ͷ TypeScript ରԠঢ়گ
13. Template
14. Packages • nuxt-property-decorator: vue-class- component ͷϥούʔ • vuex-class: vuex ؔ࿈ͷܕఆٛ • axios: ඇಉظHTTP௨৴
15. Nuxt.js Λ TypeScript Ͱಈ͔ͯ͠ΈΔ
16. υϝΠϯͷܕͱ RootState ͷఆٛ 
 export interface Task { title: string; status: TaskStatus; } export enum TaskStatus { Open = 'open', Doing = 'doing', Closed = 'closed', } 
 export interface RootState { tasks: Task[]; }
17. Vue, Decorator ͷ import 
 <script lang="ts"> import { Vue, Component, Prop } from 'nuxt-property-decorator' @Component({}) export default class extends Vue { @Prop() value: Task }
18. 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) } }