TypeScriptとVue

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

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  
    
    
    !