TypeScriptとVue

06a095e125c2016e983e183e10209b9a?s=47 jiko21
February 01, 2019

 TypeScriptとVue

関西Node学園#5の登壇資料です!

06a095e125c2016e983e183e10209b9a?s=128

jiko21

February 01, 2019
Tweet

Transcript

  1. TypeScript Vue @Daikids2

  2. H G (Daiki Kojima) • 2 JG N • P

    ), • : 2 , : • 2 FDC • @ 2 • ( ) :
  3. https://bit.ly/2MQ1qLL !!

  4. Topics… •  Vue  • TypeScript   •

    Vue TypeScript …
  5. Vue

  6. … • vue-clideprecated (#"&) ! •  !%$  vue+vuex

      … •    ! npm install -g @vue/cli
  7. vue-cli •   $"! ! • TypeScriptscss  

    • $" #%  •    ! • Class Component… • UI mode …
  8. UI mode... •   UI( )   !

  9. vue-cli •   $"! ! • TypeScriptscss  

    • $" #%  •    ! • Class Component… • UI mode …
  10. TypeScript …

  11. TypeScript?

  12. TypeScript? •  MicrosoftaltJS •   •  •

    Interface(Java ) • …
  13.  •  JS =>  •   

    TypeScript  !
  14.    •      addmul

      function add (a, b) { return a + b; } function mul (a, b) { return a * b; } const a = 1; const b = "string"; add(a, b); mul(a, b); [Node2019]
  15. … • add(a, b): ‘1string’() • 1string  • mul(a,

    b): ‘NaN’ () • 1 * ‘string’  …
  16.    • b    addmul 

     function add (a, b) { return a + b; } function mul (a, b) { return a * b; } const a = 1; const b = ”1"; add(a, b); mul(a, b); [Node2019]
  17. … • add(a, b): ‘11’() • 1string • mul(a, b):

    1 •  1 number ! •  !
  18. ! … • add(a, b): ‘11’() • 1string • mul(a,

    b): 1 •  1 number ! •  !
  19. … •       string !

    function add(a: number, b: number): number { return a + b; } function mul(a: number, b: number): number { return a * b; } const a = 1; const b = "1"; console.log(add(a, b)); console.log(mul(a, b));
  20. Interface • Javainterface +1  . / • Java*()%!'$ ,

     TypeScript, • “ %!'$&"#$0- ?”  !
  21. Interface interface Hoge { firstName: string, lastName: string, action: ()

    => void,//    }; const hoge: Hoge = { firstName: 'Daiki’, lastName: 'Kojima’, action: () => { console.log('hogehoge’); }, }; function doHoge(hoge: Hoge) { hoge.action(); } doHoge(hoge);// hogehoge
  22. VueTypeScript   …

  23.   … https://jp.vuejs.org/v2/guide/typescript.html

  24.  … • TypeScript Vue   !!

  25.     !!

  26. 1: class-style component syntax •  Vue: • Object 

    ! • Class-style Vue: •  !! • Class-style  TypeScript! ()
  27.  <script> export default { name: 'HelloWorld’, props: { msg:

    String } } </script>
  28. Class-Style… <script> @Component export default class HelloWorld extends Vue {

    @Prop() private msg!: string; } </script>
  29.  • TypeScript  ! •  Component String, Number

     Vue  …
  30. Interface • Props   •  @Component({ props: {

    members: { type: Object as () => Member[] }, }, })
  31. Class Style… •  … @Component export default class MemberList

    extends Vue { @Prop() private members!: Member[] }
  32. Vuex ?

  33.  • Tree<> vuex Store ! • Vuexmodule  

     !
  34. Action… • Action"(Interface) ! • #    

     ! !! doSignin({ commit }, userInfo: SigninForm) { services.singInWithUser(userInfo, (user: firebase.User) => { _procToken(commit, user); }); },
  35. Mutation… •   !  !! •  StateComponent

    Props    ! getMembers(state: State): Member[] { return state.members; },
  36. …

  37. … •      Vue TypeScript 

    • Class-Style Component!
  38.     TypeScript    !