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

TypeScriptとVue

jiko21
February 01, 2019

 TypeScriptとVue

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

jiko21

February 01, 2019
Tweet

More Decks by jiko21

Other Decks in Programming

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