TypeScriptとVue

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.   
     •   
     add
    mul

      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    add
    mul 

     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’() • 1
    string • mul(a, b):

    1 •  1 number ! • 
     !

18. ! … • add(a, b): ‘11’() • 1
    string • 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  
    
    
    !