TypeScriptとVue - Speaker Deck

Slide 1

Slide 1 text

TypeScript Vue @Daikids2

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Topics… • Vue • TypeScript • VueTypeScript …

Slide 5

Slide 5 text

Vue

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

UI mode... • UI( ) !

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

TypeScript …

Slide 11

Slide 11 text

TypeScript?

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

• JS => • TypeScript !

Slide 14

Slide 14 text

• 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]

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

• 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]

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

VueTypeScript …

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

… • TypeScriptVue !!

Slide 25

Slide 25 text

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

export default { name: 'HelloWorld’, props: { msg: String } }

Slide 28

Slide 28 text

Class-Style… @Component export default class HelloWorld extends Vue { @Prop() private msg!: string; }

Slide 29

Slide 29 text

• TypeScript ! • Component String, Number Vue …

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Vuex ?

Slide 33

Slide 33 text

• Tree<>vuex Store ! • Vuexmodule !

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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