TypeScriptで幸せになろう

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
5. None

6. ʮܕʯཉ͍͠ʂ

7. None

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. ͝ਗ਼ௌ
 ͋Γ͕ͱ͏͍͟͝·ͨ͠