TypeScriptで幸せになろう

FukuokaJS #2 LT

Transcript

1. TypeScriptͰ޾ͤʹͳΖ͏ FukuokaJS #2 2018/02/23
2. 
 (ג)Ϩεί ΤϯδχΞ
 ng-fukuoka୅ද ৽෱
   ٓါ
 !QVLVY
3. JavaScriptॻ͍ͯ·͔͢ʁ
4. var a = 1; a = a + ‘1’; console.log(a / 2); // 5.5
6. ʮܕʯཉ͍͠ʂ
8. TypeScript • MS੡ͷAltJS • ੩తܕ෇͚ + ES201xͷߏจ ES6 TS ES5
9. ੩తܕ෇͚ • ม਺ • ؔ਺ text: string function value(): number let a: number; a = 100; // OK a = ‘100’; // Error !! ίϯύΠϧ࣌
 ʹ൑ఆ
10. ϓϦϛςΟϒܕ • จࣈྻʢstringʣ • ਺஋ʢnumberʣ • ਅِ஋ʢbooleanʣ nullͱ͔undefinedͱ͔΋͋Δ
11. Anyܕ • ैདྷͷJSͰ࢖ͬͯͨ΍ͭ • ઃఆͰېࢭ͢Δ͜ͱ΋ग़དྷΔ value: any
12. Anyܕ͸ԿͰ΋͋ΓͳͷͰ ཚ༻͠ͳ͍ͰͶ
13. TypeScriptͰ ޾ͤʹͳΖ͏
14. classॻ͍ͯ·͔͢ʁ
15. Ϋϥε • ES2017൛ class Person { constructor(name) { this.name = name; } } Ҿ਺૿͑Δͱ Կ౓΋ॻ͘ͷ໘౗…
16. ίϯετϥΫλ ؆୯ʹॻ͖͍ͨ
17. Ϋϥε • TypeScript൛ class Person { constructor(public name?: string) {} } ͋Γ͕ͱ͏ΞΫηεम০ࢠʂ
 ʢͱΦϓγϣφϧʣ
18. ΦϒδΣΫτͷ୅ೖ
19. ΦϒδΣΫτͷ୅ೖ • ES2017൛ let person = new Person(); person = { name: ‘ςετଠ࿠’, gender: ‘MALE’, // উखʹ௥Ճ }; มͳΦϒδΣΫτ ೖͬͨΓ͠ͳ͍͔ͳ…
20. ಛఆͷΦϒδΣΫτ
 ͷΈ୅ೖ͍ͤͨ͞
21. ΦϒδΣΫτͷ୅ೖ • TypeScript൛ ͪΌΜͱ஄͍ͯ͘ΕΔʂ let person = new Person(); person = {ɹ name: ‘ςετଠ࿠’, gender: ‘MALE’, // Error };
22. ΦϒδΣΫτͷ୅ೖ • ΠϯλʔϑΣʔεΛ࢖ͬͨ৔߹ interface IPerson { name: string; } const person: IPerson = {ɹ name: ‘ςετଠ࿠’, gender: ‘MALE’, // Error }; ͋Γ͕ͱ͏ΠϯλʔϑΣʔεʂ
23. ஋ͷ୅ೖ
24. ஋ͷ୅ೖ • ES2017൛ class Person { gender; // ‘MALE’ or ‘FEMALE’ } มͳ஋͕ ೖͬͨΓ͠ͳ͍͔ͳ…
25. ಛఆͷ஋ͷΈ ୅ೖ͍ͤͨ͞
26. ஋ͷ୅ೖ • TypeScript൛ class Person { gender: ‘MALE’ | ‘FEMALE’; } ͋Γ͕ͱ͏ڞ༻ܕʂ EnumͰ΋͍͍Αʂ
27. Union Typeʢڞ༻ܕʣ • ਺஋Ϧςϥϧ • จࣈྻϦςϥϧ type Grade = 1 | 2 | 3 | 4 | 5; type Gender = ‘MALE’ | ‘FEMALE’;
28. ʮܕʯ͍͍ͬͯΑͶ
29. TypeScript
 ͸͡ΊͯΈ·ͤΜ͔ʁ
30. ؀ڥͷ༻ҙ $ npm install -g typescript $ tsc -—init $ tsc —-watch • ίϯύΠϥͷΠϯετʔϧ
31. ओཁFW΋TSରԠ • Angularʢඪ४ʣ • ReactʢTSXʣ • Vue.jsʢv2.5ʙʣ
32. IUUQTBOHVMBSKQ Angular΋ΑΖ͘͠Ͷʂ
33. TypeScriptͰ ޾ͤʹͳΖ͏ʂ
34. ͝ਗ਼ௌ
 ͋Γ͕ͱ͏͍͟͝·ͨ͠