TypeScriptで幸せになろう

8bc941b1868dfc680dd1e11a797ca385?s=47 puku0x
February 26, 2018

 TypeScriptで幸せになろう

FukuokaJS #2 LT

8bc941b1868dfc680dd1e11a797ca385?s=128

puku0x

February 26, 2018
Tweet

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