Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.js in TypeScript

73b0a25ed03f649ec63ded82ce4ac7cb?s=47 nunulk
January 17, 2019

Nuxt.js in TypeScript

やってみた

73b0a25ed03f649ec63ded82ce4ac7cb?s=128

nunulk

January 17, 2019
Tweet

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) } }