TypeScriptとVue

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

Transcript

1. TypeScript
   Vue
   @Daikids2
   

   View Slide

2. H G (Daiki Kojima)
   • 2 JG N
   • P ),
   • : 2 , :
   • 2 FDC
   • @ 2
   • ( ) :
   

   View Slide

3. https://bit.ly/2MQ1qLL
   !!
   

   View Slide

4. Topics…
   • Vue
   • TypeScript
   • VueTypeScript
   …
   

   View Slide

5. Vue
   

   View Slide

6. …
   • vue-clideprecated (#"&) !
   • !%$
   vue+vuex
   …
   •
   
   !
   npm install -g @vue/cli
   

   View Slide

7. vue-cli
   • $"!
   !
   • TypeScriptscss
   
   • $"
   #%
   •
   !
   • Class Component…
   • UI mode
   …
   

   View Slide

8. UI mode...
   • UI(
   )
   !
   

   View Slide

9. vue-cli
   • $"!
   !
   • TypeScriptscss
   
   • $"
   #%
   •
   !
   • Class Component…
   • UI mode
   …
   

   View Slide

10. TypeScript
    …
    

    View Slide

11. TypeScript?
    

    View Slide

12. TypeScript?
    • MicrosoftaltJS
    •
    
    •
    • Interface(Java )
    •
    
    …
    

    View Slide

13. 
    • JS =>
    •
    TypeScript
    !
    

    View Slide

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]
    

    View Slide

15. …
    • add(a, b): ‘1string’()
    • 1string
    
    • mul(a, b): ‘NaN’ ()
    • 1 * ‘string’ …
    

    View Slide

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]
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. Interface
    • Javainterface +1
    ./
    • Java*()%!'$ ,
    TypeScript,
    • “
    %!'$&"#$0-?”
    !
    

    View Slide

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
    

    View Slide

22. VueTypeScript
    
    …
    

    View Slide

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

    View Slide

24. 
    …
    • TypeScriptVue
    
    !!
    

    View Slide

25. 
    
    !!
    

    View Slide

26. 1: class-style component syntax
    • Vue:
    • Object
    !
    • Class-styleVue:
    •
    !!
    • Class-style TypeScript! ()
    

    View Slide

27. 
    <br/>export default {<br/>name: 'HelloWorld’,<br/>props: {<br/>msg: String<br/>}<br/>}<br/>
    

    View Slide

28. Class-Style…
    <br/>@Component<br/>export default class HelloWorld extends Vue {<br/>@Prop() private msg!: string;<br/>}<br/>
    

    View Slide

29. 
    • TypeScript !
    • Component
    
    String, Number
    Vue …
    

    View Slide

30. Interface
    • Props
    
    •
    @Component({
    props: {
    members: {
    type: Object as () => Member[]
    },
    },
    })
    

    View Slide

31. Class Style…
    •
    …
    @Component
    export default class MemberList extends Vue {
    @Prop() private members!: Member[]
    }
    

    View Slide

32. Vuex
    ?
    

    View Slide

33. 
    • Tree<>vuex Store !
    • Vuexmodule
    
    !
    

    View Slide

34. Action…
    • Action"(Interface) !
    • #
    
    
    !!!
    doSignin({ commit }, userInfo: SigninForm) {
    services.singInWithUser(userInfo,
    (user: firebase.User) => {
    _procToken(commit, user);
    });
    },
    

    View Slide

35. Mutation…
    •
    !
    
    
    !!
    • StateComponentProps
    
    !
    getMembers(state: State): Member[] {
    return state.members;
    },
    

    View Slide

36. …
    

    View Slide

37. …
    •
    
    Vue TypeScript
    • Class-Style Component!
    

    View Slide

38. 
    
    TypeScript
    
    
    !
    

    View Slide