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. H G (Daiki Kojima) • 2 JG N • P

    ), • : 2 , : • 2 FDC • @ 2 • ( ) :
  2. … • vue-clideprecated (#"&) ! •  !%$  vue+vuex

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

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

    • $" #%  •    ! • Class Component… • UI mode …
  5.  •  JS =>  •   

    TypeScript  !
  6.    •      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]
  7. … • add(a, b): ‘1string’() • 1string  • mul(a,

    b): ‘NaN’ () • 1 * ‘string’  …
  8.    • 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]
  9. ! … • add(a, b): ‘11’() • 1string • mul(a,

    b): 1 •  1 number ! •  !
  10. … •       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));
  11. Interface • Javainterface +1  . / • Java*()%!'$ ,

     TypeScript, • “ %!'$&"#$0- ?”  !
  12. 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
  13. 1: class-style component syntax •  Vue: • Object 

    ! • Class-style Vue: •  !! • Class-style  TypeScript! ()
  14. Interface • Props   •  @Component({ props: {

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

    extends Vue { @Prop() private members!: Member[] }
  16. Action… • Action"(Interface) ! • #    

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

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