TypeScript

Transcript

1. TypeScript Bootcamp 2021 1

2. ߨࢣͦͷ1 - ໊শɿ૔ݟ༸ี ʢ@Quramy / ͘ΒΈʔ ͱݺ͹ΕΕΔ͜ͱ͕ଟ͍ʣ - ॴଐɿԣஅΤϯδχΞϦϯά෦ ASG

   - ৬ྺɿϦΫϧʔτʹདྷͨͷ͸2020/2݄ɻ ࠃ಺SIer -> Webܥϕϯνϟʔ2ࣾʹ͍·ͨ͠

3. QuramyͱTypeScript - 2015೥3݄5೔͔ΒTS΍ͬͯ·͢ - ౰࣌͸VSCͳ͔ͬͨͨΊɺVim޲͚ͷTypeScript pluginΛॻ͍ͨΓ - ࠷ۙ΋ESLint޲͚ͷΤσΟλ֦ு΍GarphQL༻ͷΤσΟλ֦ுΛ࡞ͬͨ Γ͍ͯ͠·͢ɻASTܥͷٕज़ׂ͕ͱಘҙͰ͢ -

   https://github.com/microsoft/TypeScript-Website ͰTSຊՈαΠτͷ຋ ༁׆ಈΛ͍ͯͨ࣌͠ظ΋ʢͨͩ͠࠷ۙશવܞΘͬͯͳ͍ʣ

4. ߨࢣͦͷ2 - ໊শɿ٢Ҫ݈จ ʢa.k.a. @Takepepeʣ - ॴଐɿԣஅΤϯδχΞϦϯά෦ ASG, ϑϩϯτΤϯυΤϯδχΞ -

   ৬ྺɿϦΫϧʔτʹདྷͨͷ͸2020/10݄ɻ Web੍࡞ -> DeNA -> RTC

5. TakepepeͱTypeScript - ʮ࣮ફTypeScriptʯͱ͍͏ຊΛաڈॻ͖·ͨ͠ɻ - TypeScript ͕ΒΈͷͪΐͬͱͨ͠ΞΠσΟΞͳͲ΋ npm publish ͨ͠Γͯ͠·͢ -

   TypeScript ͸͡Ίͨͷ͸ Conditional Types ͕͖͔͚ͬ - Conditional Types ͗͢͢͝໘ന͍ʂ - ͨ·ͨ·ٕज़ॻయʹग़ల͢ΔػձͱॏͳΔ - ͨ·ͨ·ٕज़ॻయͰग़൛ࣾͷਓͷ໨ʹͱ·Δ - ࣥච͢Δ͜ͱʹͳͬͨ - ࠷ۙ͸ಉਓࢽ͸ॻ͍͍ͯͳ͍Ͱ͕͢ɺͨ·ʹ React ΍ TS ͷهࣄΛ zenn ʹ౤ߘͨ͠Γͯ͠·͢

6. ͳʹ΍Δͷ - ຊߨ࠲Ͱ͸ԼهΛֶΜͰ͍͖·͢ - TypeScriptͷجຊతͳจ๏΍ίʔυͷॻ͖ํʢ࠲ֶ + ԋशʣ - TypeScriptʹؔ܎͢ΔϑϩϯτΤϯυπʔϧνΣΠϯʢ࠲ֶͷΈʣ 6

7. ΍Βͳ͍͜ͱ - ෳࡶոحͳܕૢ࡞ - VSCͳͲɺಛఆΤσΟλͷศརػೳ঺հ - TypeScriptࣗମͷAPI

8. ࠓ೔ͷΰʔϧ ʮίϯύΠϧΤϥʔ͸ૂͬͯ֫Γʹ͍͘΋ͷͩʯ ͜ͷײ֮Λ਎ʹண͚ͯؼ͍ͬͯͩ͘͞

9. ໨࣍ 1. TypeScript is Կ 2. TypeScriptʹ৮ΕΔ ※ 3. ܕͷૢ࡞

   ※ 4. ϥΠϒϥϦͷܕఆٛ 5. TypeScriptͱϞδϡʔϧ 6. TypeScriptͱϏϧυΤίγεςϜ

10. TypeScript is Կ 10

11. TypeScript - Microsoft͕։ൃɾϝϯςφϯε͍ͯ͠Δϓϩάϥϛϯάݴޠ - ੩తͳܕ෇͚ - JavaScriptʹͳΔ 11

12. TypeScript is Alt JS - TypeScriptͷιʔείʔυ͸JavaScriptʹίϯύΠϧ͞Ε·͢ɻʮτϥϯ εύΠϧʯͱ΋ݺͿ͜ͱ΋͋Γ·͢ - ੜͰJavaScriptΛॻ͔ͣʹɺผݴޠͰॻ͍ͯJavaScriptΛੜ੒͢ΔΞϓ ϩʔν͸Alt

    JSʢ͓Δͱ͐͡ʔ͑͢ʣͱݺΜͩΓ͢Δ͜ͱ΋ 12

13. ͍ͬͺ͍͋ΔͧAltJS - AltJS͍Ζ͍Ζ - Flow Type, CoffeeScript, Dart, Reason, Hexa,

    Elm, JSX (not React) , ScalaJS, ClojureScript, asm.js, GopherJS, GWT, etc… - ϒϥ΢βͰಈ͔ͤΔݴޠ͸جຊతʹJavaScript͚ͩͳͷͰ※1 ɺੈͷதʹ͸ ͍ͬͺ͍Alt JS͕͋Γ·͢ - ※1 ࠷ۙ͸WebAssembly΋͋Δ͚ͲɺͦΕ͸আ֎ͨ͠ͱͯ͠ - Ұ࣌ظ͸Ӎޙͷ஛ͷࢠͷ͝ͱ͘ཚཱ͍ͯ͠·͕ͨ͠ɺ࠷ۙ͸TypeScriptʹ ܉഑্͕͕Γͭͭ͋Δؾ഑ 13

14. ͦͦ͜͜ਓؾ΋͋Δ Developers who are developing with the language or technology

    and have expressed interest in continuing to develop with it 14 https://insights.stackoverflow.com/survey/2020#technology-most-loved-dreaded-and-wanted-languages

15. ͳΜͰTypeScript࢖͏ͷʁ - शಘ͕ൺֱత͔ΜͨΜ - ૉͷJavaScriptίʔυ͸ਖ਼͍͠TypeScriptίʔυ - JavaScriptͱ஍ଓ͖ͰशಘͰ͖Δʂ 15

16. ·ͣ͸৮ͬͯΈΑ͏ - TypeScript Playground ʹ͓खܰ؀ڥ͕͋Γ·͢ - ৮ͬͯΈΑ͏Playgroundɿ - Run /

    LogsͰ࣮ߦΛ֬ೝ͠Α͏ - JSλϒ͔ΒτϥϯεύΠϧ͞ΕͨJavaScriptίʔυΛ֬ೝ͠Α͏ 16

17. ͳΜͰTS࢖͏ͷʁͨͩͷJS͡Όμ ϝͳͷʁ - TypeScriptͷྑ͍ͱ͜Ζɿ - ܕνΣοΫ͕Ͱ͖Δʂʂʂ - ݹ͍ϒϥ΢βͰ΋ಈ͘ʂʂʂ - ΤσΟλαϙʔτ͕༏लʂʂʂ

    17

18. ܕνΣοΫ͕Ͱ͖Δ - JavaScript͸ಈతܕ෇ݴޠ - ࣮ߦ͢Δ·ͰΘ͔Βͳ͍͜ͱ͕͍ͬͺ͍ 😇 🤔 hoge͸είʔϓʹఆٛ͞Εͨม਺ ʁ 🤔

    hoge͸objectͰɺfooͱ͍͏ϓϩύςΟ͕ଘࡏ͍ͯ͠Δʁ 🤔 hoge.foo͸ؔ਺ͱ࣮ͯ͠ߦͰ͖Δʁ console.log(hoge.foo()); 18

19. ܕνΣοΫ͕Ͱ͖Δ - TypeScript͸੩తʹܕΛ෇༩ͯ͠ɺhoge.foo() ͕࣮ߦͰ͖Δ͔Ͳ͏͔ ΛιʔείʔυͷϨϕϧͰνΣοΫ͠·͢ - ʮܕΤϥʔͰౖͬͯ΋Β͑Δʯͷ͸޾ͤͳ͜ͱͰ͢ - ςετ͕ޮ཰తʹʢςετ͠ͳ͍͍ͯ͘ͱ͍͏༁Ͱ͸ͳ͍ʣ -

    ಈతݴޠʹܕΛ༩͑ͯɺ੩తʹνΣοΫͰ͖ΔΑ͏ʹ͢Δ͜ͱΛ઴࣍త ܕ෇ʢGradual typingsʣͱ͍͍·͢ 19

20. ܕνΣοΫ͸બ΂Δ - TypeScript as ઴࣍తܕ෇ͷΑ͍ͱ͜Ζɿ - طଘͷJavaScript͚ͩͰॻ͔ΕͨιʔείʔυʹঃʑʹܕΛ෇͚͍͚ͯΔ - ৽نϓϩδΣΫτͰ͸ɺ࠷ॳ͔Β੩తܕ෇ݴޠͱಉ͡Α͏ʹ࢖͏͜ͱ΋ Ͱ͖Δ

    - TypeScript as ઴࣍తܕ෇ͷ஫ҙ఺ɿ - ॴḨ͸ޙ෇ͷػߏɻJavaScriptͷࣗ༝౓ͱ૬൓͢ΔՕॴ΋͋Δ͠ɺӕͭ ͍ͯܕγεςϜ͕ὃ͞ΕΔ͜ͱ͢Β͋Γಘ·͢ 20

21. Downleveling - τϥϯεύΠϧͷաఔͰɺ৽͍͠࢓༷ͷJavaScriptߏจΛɺݹ͍ϒϥ΢ βͰ΋ಈ࡞͢ΔΑ͏ʹม׵͠·͢ - e.g. async / await ͸InteretExplorerͰ͸ಈ࡞͠·ͤΜ͕ɺTypeScript

    ͕ؤுͬͯίʔυΛม׵ͯ͘͠Ε·͢ 21

22. Downleveling - ʮ·ͬͨ͘downlevelΛߦΘͳ͍ʯͱ͍͏ઃఆ΋ՄೳͰ͢ - ͜ͷ৔߹ɺग़ྗ͞ΕΔJavaScriptϑΝΠϧͷίʔυ͸ɺݩͷTypeScript ίʔυͱຆͲࠩ෼͕ແ͍ঢ়ଶʹͰ͖·͢ - ݴ͍׵͑ΔͱʮͦͷؾʹͳΕ͹͍ͭͰ΋ࣺͯΔ͜ͱ͕Ͱ͖Δʯπʔϧ Ͱ͢ 22

23. ΤσΟλαϙʔτ͕༏ल - TypeScriptͦͷ΋ͷʹҎԼͷػೳؚ͕·Ε͍ͯΔͷͰɺΤσΟλ͕շదͰ͢ - ΤϥʔνΣοΫ - ิ׬ - ఆٛδϟϯϓ -

    ࢀরՕॴͷදࣔ - ϦϑΝΫλϦϯάิॿػೳ - etc… 23

24. ΤσΟλαϙʔτ͕༏ल - ʢ༨ஊʣ - TypeScriptͷݴޠαʔϏεʢtsserverʣ΍C#ͷ࢓૊ΈΛݩʹɺ LSP(Language Service Protocol) ͱ͍͏ʮΤσΟλͱϓϩάϥϛϯά ݴޠؒͷΠϯλʔϑΣʔεʯ͕ੜ·Εͨ΄Ͳ

    - ࢒೦ͳ͜ͱʹTypeScript͸LSP४ڌ͍ͯ͠·ͤΜ 24

25. TypeScriptͷΞϑΥʔμϯε - UI/UXͷੈքͰ͸ʮϢʔβʔʹ஌֮Λଅ͢؀ڥɾͦΕ͕΋ͨΒ͢Ձ஋ʯ ͷ͜ͱΛΞϑΥʔμϯεͱݺͿ͜ͱ͕͋Γ·͢ʢe.g. υΞͱϊϒʣ - TypeScript͸ʮΤϥʔΛૉૣ͘දࣔ͢Δʯʮิ׬ՄೳͳΩʔϫʔυ΍ม ਺໊Λදࣔ͢Δʯͱ͍͏ԸܙΛ΋ͨΒ͠·͢ - ͜Ε͸DeveloperʹΞϑΥʔμϯεΛఏڙ͍ͯ͠Δɺͱߟ͑Δ͜ͱ͕Ͱ

    ͖·͢

26. த·ͱΊ TypeScriptͬͯԿ ʮޙ෇ͰܕΛ෇͚Δ͜ͱͷͰ͖ΔڧԽ൛JavaScriptʯ 26

27. TypeScriptʹ৮ΕΔ 27

28. ͸͡Ίʹ - ͜ͷνϟϓλͰ͸ɺTypeScriptͷجຊతͳจ๏Λݟ͍͖ͯ·͢ - ʮ͜Μͳجૅจ๏͸஌ͬͯΔͥʂʯͬͯਓ͸ܕύζϧͰ༡ΜͰ͍ͯͩ͘͞ - TypeScript PlaygroundΛ࢖͍͖ͬͯ·͢ - https://www.typescriptlang.org/play

    28

29. Playground৮Δͱ͖ͷ஫ҙ ͜ͷύʔτͰ͸ɺStrict Checks͸શ෦ONʹ͓͍͍ͯͯͩ͘͠͞ 29

30. Type annotation - TypeScriptͰ͸ɺܕΛ໌ࣔతʹએݴ͢Δ͜ͱΛʮܕ஫ऍΛ෇͚Δʯͱݴ ͍·͢ - ܕ஫ऍ͸৭ʑͳͱ͜Ζʹ෇༩Ͱ͖·͕͢ɺ·ͣ͸ؔ਺ͷҾ਺ʹܕ஫ऍΛ ෇༩ͯ͠Έ·͠ΐ͏ 30

31. Function parameters - ؔ਺ͷԾҾ਺ʹ஫ऍΛ෇༩ͯ͠Έ·͢ - 📝 PlaygroundͰԼهΛॻ͍ͯΈͯɿ function add(a: number,

    b: number) { return a + b; } console.log(add(100, 100)); 31

32. Function parameters - 📝 ஫ऍ͢ΔܕΛҎԼͷΑ͏ʹॻ͖׵͑ͯɺΤϥʔνΣοΫ͞ΕΔ͜ͱΛ ֬ೝͯ͠Έͯɿ function add(a: string, b:

    string) { return a + b; } 32

33. Type inference - ʮؔ਺ͷҾ਺ʹ͑͞ܕ͕͋Ε͹ଞ͸ਪ࿦͞ΕΔʯ͕TypeScriptܕਪ࿦ͷ جຊͰ͢ - ྫ͑͹ɺؔ਺໊ͷ্ͰϚ΢εΦʔόʔ͢Δͱɺ໭Γ஋ͱͳΔܕͷਪ࿦ ݁Ռ͕දࣔ͞Ε·͢ 33

34. ஫ऍͰ͖Δͱ͜Ζ - ଞʹ΋ : ܕ໊ Ͱ஫ऍͰ͖Δͱ͜Ζ͸৭ʑ͋Γ·͢ const a: string =

    "hoge"; let b: string; var c: string; function d(): string { return "hoge"; } class MyClass { e: string = ""; } 34

35. ஫ऍͱਪ࿦ͷিಥ - ஫ऍͨ͠ܕͱਪ࿦݁Ռ͕৯͍ҧ͏ͱɺίϯύΠϧΤϥʔʹͳΓ·͢ - 📝 ԼهͷίʔυͰΤϥʔʹͳΔ͜ͱΛ֬ೝͯ͠Έͯɿ - ى͖ͨΤϥʔΛमਖ਼͢Δʹ͸ͲͷΑ͏ʹ͢Ε͹ྑ͍Ͱ͠ΐ͏ʁ function add(a:

    number, b: number) { return a + b; } const a: string = add(100, 100); 35

36. Primitive types - ਺஋Ҏ֎ʹ΋ɺจࣈྻ΍ਅِ஋ͳͲ΋primitive typeͱͯ͠༻ҙ͞Ε͍ͯ ·͢ const bool: boolean =

    true; const num: number = 100; const str: string = "hogehoge"; const nullObj: null = null; const undefVal: undefined = undefined; 36

37. Function type - JavaScriptͷੈքͰ͸ɺؔ਺΋ΦϒδΣΫτͷҰछͰ͋Δ͜ͱ͔Βɺ TypeScriptʹ΋ʮؔ਺ࣗମͷܕʯ͕͋Γ·͢ - ྫɿ - ໭Γ஋͕ଘࡏ͠ͳ͍ؔ਺ͷ৔߹͸ɺ=> void

    ͱॻ͖·͢ (a: number, b: number) => number 37

38. Object / Array type const obj: { name: string, age:

    number } = { name: "Bob", age: 20, }; const arr: number[] = [1, 2, 3]; 38

39. Type alias - typeߏจͰܕʹผ໊Λ෇͚ͯ࠶ར༻Ͱ͖·͢ɻ”type alias” ͱݺ͹Ε· ͢ɻ͔ͳΓසൟʹ࢖͍·͢ - type໊͸େจࣈ͔Β։࢝͢Δͷ͕ҰൠతͰ͢ type

    Messages = string[]; function showMessages(msgs: Messages) { msgs.forEach(msg => console.log(msg)); } 39

40. ϛχԋश - 📝 ҎԼΛຬͨ͢ GetUser ͱ͍͏ؔ਺ܕΛॻ͍ͯΈͯ - input: จࣈྻܕ -

    output: ࣍ͷߏ଄Ͱఆٛ͞ΕΔΑ͏ͳUserܕ id จࣈྻ name จࣈྻ age ਺஋ isMarried ਅِ஋ 40

41. Class - Classߏจ͸ES2015͔ΒJavaScriptʹಋೖ͞Ε͍ͯ·͢ɻTypeScriptͰ΋ ClassΛѻ͏͜ͱ͕Ͱ͖·͢ - એݴͨ͠Class͸ܕͱͯ͠΋࢖͑·͢ʢJavaͱ͔ͱҰॹʣ 41

42. Class type TodoItem = { name: string; }; interface Service

    { getTodos(): TodoItem[]; } class ConcreteService implements Service { private _todos: TodoItem[]; constructor(initialTodos: TodoItem[]) { this._todos = initialTodos; } getTodos() { return this._todos; } } 42

43. JavaScriptͷClassʹແ͍ػೳ - ϑΟʔϧυɾϝιουʹՄࢹੑ͕ઃఆͰ͖Δ - private / protected / public -

    ※ TypeScriptʹ͓͚Δprivateߏจ͸Soft PrivateɻͦͷؾʹͳΕ͹ΞΫ ηεͰ͖Δ - ந৅Ϋϥε / ந৅ϝιουΛఆٛͰ͖Δ - InterfaceΛ࣮૷Ͱ͖Δ 43

44. any - anyܕ͸TypeScriptʹ͓͚ΔϫΠϧυΧʔυͰ͢ - ͲΜͳܕͰ͋ͬͯ΋any΁୅ೖͰ͖·͢͠ɺanyܕͰ͋Δม਺͸͢΂ͯ ͷܕͱͯ͠ৼΔ෣͑ͯ͠·͍·͢ 44

45. any - ʮ͢΂ͯͷܕͱͯ͠ৼΔ෣͏͜ͱ͕Ͱ͖ΔʯͨΊɺܕʹؔ͢Δίϯύ ΠϧΤϥʔ͕͢΂ͯ཈ࢭ͞Ε·͢ - any͸TypeScriptʹ͓͚ΔඞཁѱͰ͢ɻ࢖͏ͱ͖͸ࡑѱײͰ৺Λগ͠௧ ΊΔΑ͏ʹ͠·͠ΐ͏ const fn: any

    = () => 100; const hoge: number = fn; 45

46. anyΛ࢖͏ͷ͕ଥ౰ͳέʔε - any͸ੑ࣭Λཧղͯ͠࢖͏෼ʹ͸ศརͳػೳͰ͢ - طଘͷJavaScriptϓϩδΣΫτ΁TypeScriptΛಋೖ͢ΔࡍʹɺͱΓ͋͑ ͣܕ஫ऍΛͯ͠͠·͍͍ͨʢ࣮૷ίʔυΛഁյͨ͘͠ͳ͍ʣ - ෳࡶͳؔ਺ͷ಺෦ͰҰ࣌తʹ࢖͏έʔεɻؔ਺ͷςετΛ͔ͬ͠Γͱ ߦ͍ͬͯͯɺ͔ͭҾ਺ͱ໭Γ஋ͷܕ͕ͪΌΜͱॻ͍ͯ͋Ε͹໰୊ͳ͍ -

    ͍ͣΕʹͤΑʮanyͷӨڹ͸ہॴతʹԡ͓͑ͯ͘͞ʯ͕TypeScriptͱ͏· ͘෇͖߹͍ͬͯ͘ίπͰ͢ 46

47. ୅ೖՄೳͱ͸Կ͔ - TypeScriptͷܕγεςϜ͸Structual Subtypingʢߏ଄త෦෼ܕʣͱ͍͏ ํࣜΛ࠾༻͍ͯ͠·͢ʢରٛޠ͸Nominal Subtypingʣ - TypeScriptͰ͸ɺผͷinterface΍typeͰ͋ͬͯ΋ɺ֤ϑΟʔϧυͷத਎ ͕߹͍ͬͯ͑͞Ε͹ͦΕͧΕ୅ೖՄೳͰ͋ΔʢassignableʣɺͱΈͳ͞ Ε·͢

    47

48. ୅ೖՄೳͱ͸Կ͔ - assignableͷྫ: - showMessageؔ਺͸ɺจࣈྻܕͰ͋Δmessageͱ͍͏ϑΟʔϧυΛ ࣋ͬͨܕͰ͋Ε͹ɺԿͰ΋୅ೖՄೳ type SomeType = {

    message: string; }; function showMessage(obj: SomeType) { console.log(obj.message); } showMessage({ message: “Hello!" }); 48

49. ୅ೖՄೳͱ͸Կ͔ - 📝 લϖʔδͷྫͰɺԼهΛ௥هͯ͠΋ίϯύΠϧ͕௨Δ͜ͱΛࢼͯ͠Έ ͯ showMessage(new Error("error!")); 49

50. (͓·͚) ߏ଄త෦෼ܕͰࠔΔ৔߹ - ʢ࣌ؒʹ༨༟͕͋ͬͨΒʣߟ͑ͯΈͯ - ߏ଄త෦෼ܕͷσϝϦοτΛڍ͛ͯΈͯ - ߟ͍͑ͭͨσϝϦοτΛTypeScriptͰΧόʔ͢ΔͨΊʹ͸ɺͲ͏͢Ε ͹Α͍͔ʁ 50

51. Interface v.s. Type alias - ϑΟʔϧυ΍ϝιουΛ࣋ͭΦϒδΣΫτͷܕΛఆٛͰ͖Δͱ͍͏ҙຯ Ͱɺtype aliasͱinterfaceʹ͸ػೳͷॏෳ͕͋Γ·͢ interface IHoge

    { message: string; onChangeMessage(cb: (msg: string) => void): void; } type HogeType = { message: string; onChangeMessage(cb: (msg: string) => void): void; }; let hoge1: IHoge; let hoge2: HogeType; /* IHogeͱHogeType͸૒ํʹassignable */ hoge1 = hoge2; hoge2 = hoge1; 51

52. Interface v.s. Type alias - 📝 લϖʔδͷ IHoge interface ͱ

    HogeType ʹ͍ͭͯɺPlayground্Ͱ ͷҧ͍Λ୳ͯ͠Έͯ - 📝 લϖʔδͷྫʹɺԼهΛ௥هͨ͠ͱ͖ʹͲ͏ͳΔ͔֬ೝͯ͠Έͯ interface IHoge { errorCode: number; } 52

53. Θ͔Βͳ͍ॴ͕͋Δ࣌͸ - ֮͑Δۙಓ͸ɺTypeScriptͰԿ͔Λ࣮૷ͯ͠ΈΔ͜ͱͰ͢ - Takepepeຊ Λങ͍·͠ΐ͏ʂ - ެࣜαΠτʢhttp://www.typescriptlang.org/docs/homeʣͷϋϯυϒο ΫΛோΊͯΈΔͷ΋͋Γ -

    twitterͰ #typescript λάΛ෇͚ͯᄁ͍ͨΒɺ୭͔͕रͬͯ͘ΕΔ͔΋͠ Ε·ͤΜ 53

54. ԋश 1 54

55. ԋश1 - ԋश໰୊ͷࢿྉͷ৔ॴͳͲ͸ɺߨٛதʹ࿈ܞ͠·͢ 55

56. ʢิ଍ʣඪ४ APIͱTypeScript - TypeScript ࣗମʹඪ४ APIͷܕ͕όϯυϧ͞Ε͍ͯ·͢ - JavaScriptʢECMAScriptʣͷඪ४ API -

    DOM API΍fetchͳͲɺϒϥ΢βʹඪ४ͰඋΘ͍ͬͯΔAPI 56

57. ৼΓฦΓ - ʢճ౴ྫΛ΋ͱʹߨٛதʹઆ໌ʣ

58. ܕͷૢ࡞ 58

59. ͸͡Ίʹ - ͜ͷνϟϓλʔͰ͸ɺ࣮ࡍʹίʔυΛॻ͘ͱ͖ʹɺܕΛͲͷΑ͏ʹѻͬ ͍ͯ͘ͷ͔ʹ͍ͭͯઆ໌͍͖ͯ͠·͢

60. Type error - JavaScriptͷϓϩάϥϜͰ΋ͬͱ΋සൟʹੜ͡Δόά͸ɺnull ·ͨ͸ະ ఆٛͷม਺ʹରͯ͠ɺ஋͕ଘࡏ͢ΔલఏͰΞΫηεͯ͠͠·͏έʔεͰ ͢ - ʢ༨ஊʣTony Hoare

    ᐌ͘ʮNullࢀর͸࠷େͷޡΓͩͬͨɻίϯύΠϧ Ͱ͢΂ͯνΣοΫͰ͖ΔΑ͏ʹ͔ͨͬͨ͠ʯ - https://www.infoq.com/presentations/Null-References-The-Billion-Dollar-Mistake-Tony- Hoare/ 60 Uncaught TypeError: Cannot read property ‘hoge' of undefined

61. Optional - ͜ͷखͷType errorͱઓ͏ͨΊʹ͸ɺʮ͜ͷม਺͸ଘࡏ͠ͳ͍͔΋͠Ε ͳ͍ͧʯͱ͍͏͜ͱΛTypeScriptܕγεςϜʹڭ͑ࠐΉඞཁ͕͋Γ·͢ - type΍interfaceʹͯɺϓϩύςΟ໊຤ඌʹ?Λ෇༩͢Δͱɺʮଘࡏ͠ͳ ͍͔΋͠Εͳ͍ʯͱ͍͏ҙຯʹͳΓ·͢ 61

62. Optional - ΦϓγϣϯͷstrictNullCheck͕trueͷ৔߹ɺOptionalͳ஋Λ͍͖ͳΓૢ ࡞͠Α͏ͱ͢ΔͱTypeScript͕ίϯύΠϧΤϥʔʹͯ͘͠Ε·͢ ʢίϯύΠϧΤϥʔ͸͝๙ඒͩͱࢥ͍·͠ΐ͏ʣ function fn(args: { message?: string})

    { // ࣄલʹargs.messageͷଘࡏΛνΣοΫ͢Δඞཁ͕͋Δ if (!args.message) return ""; return args.message.toLowerCase(); } fn({}); // messageΛলུՄೳ 62

63. ͦͷଞͷOptionalදݱ - ϓϩύςΟ໊ޙͷ ? Ҏ֎ʹ΋Optionalม਺Λදݱ͢Δํ๏͕͋Γ·͢ - ※ ύΠϓه߸ͷҙຯ͸ޙड़͠·͢ // ؔ਺ͷoptionalҾ਺

    function hoge(a: number, b?: number) { } // null ΍ undefined ͱͷUnion type X = string | undefined; type Y = string | null;

64. strictNullCheck ʹ͍ͭͯ - strictNullChecks͸ɺࢀর͍ͯ͠Δ஋ͷܕʹnull ·ͨ͸ undefined͕୅ೖ Մೳͳ৔߹ʹɺͦͷ஋ͷૢ࡞Λ੍ݶ͢ΔػೳͰ͢ - TypeScriptͷσϑΥϧτઃఆͰ͸ɺstrictNullCheck͸ONͰ͢ -

    جຊతʹ͸༗ޮʹ͓͍ͯͨ͠ํ͕ྑ͍ػೳͰ͕͢ɺطଘͷJavaScriptϓ ϩδΣΫτʹޙ෇ͰTypeScriptΛಋೖ͢Δ৔߹͸ɺҰ୴offʹ͢Δͷ΋Ξ ϦͰ͢ 64

65. Modifiers - ܕఆٛͰͷ ? ͸optional modifierͱݺ͹Ε·͢ - modifierʹ͸optionalҎ֎ͷmodifierͱͯ͠ɺreadonlyͱ͍͏ͷ΋͋Γ· ͢ʢʮSoftͳʯ࣮૷Ͱ͋ΔͨΊɺτϥϯεύΠϧޙͷjs͔Β͸ॻ͖׵͑Մೳʣ type

    Hoge = { m1: string; m2?: string; readonly m3: string; readonly m4?: string; }; 65

66. Literal type - ਺஋/จࣈྻ/ਅِ஋ܕ͸ɺͦΕͧΕͷ஋ͦͷ΋ͷΛܕͱͯ͠࢖͏͜ͱ͕ Ͱ͖·͢ɻ͜ΕΛLiteral Typeͱݺͼ·͢ type SomeString = "some

    string"; type SomeNumber = 1; type True = true; function fn(str: SomeString) { return str.trim(); } fn("some string"); // OK fn("other string"): // Error 66

67. Union type - ෳ਺ͷܕΛύΠϓه߸ʢ | ʣͰ۠੾Δ͜ͱͰɺUnion Typeʢ࿨ܕ, ڞ༻ମ ܕͱ΋ʣΛએݴ͠·͢ -

    String Literal Typeͱซ༻͢ΔͱɺྻڍܕͷΑ͏ʹѻ͏͜ͱ΋Ͱ͖·͢ ʢTypeScriptʹ΋enumߏจ͕༻ҙ͞Ε͍ͯ·͕͢ɺ͋·Γར༻͞Ε·ͤΜʣ type NumOrStr = string | number; type MaybeStr = string | null | undefined; type Colors = "red" | "blue" | "green" | "yellow"; 67

68. ܕͷߜΓࠐΈ - Union Type͸ɺifจ΍switchจͰ஋ΛνΣοΫ͍ͯ͘͜͠ͱͰɺΑΓৄࡉ ͳܕ΁ߜΓࠐΉ͜ͱ͕Ͱ͖·͢ɻ͜ΕΛType GuardͱΑͼ·͢ - strictNullCheckͰઆ໌ͨ͠ifจʹΑΔߜΓࠐΈ΋Type GuardͷҰछͰ͢ function

    fn(input: string | number) { console.log(input.toString()); if (typeof input === "number") { console.log(200 * input); } else { console.log(input.trim()); } } 68

69. Type Guardͷछྨ - ͍͔ͭ͘ͷߏจ͕Type Guardͱͯ͠ར༻Ͱ͖·͢ɿ - typeof x === “string”,

    x instanceof HogeClass - Literal typeʹ͓͚Δಉ஋֬ೝʢ if (x === “some message”) ʣ - obj.x ΍ obj[“x”] ΍ x in objͳͲͷଘࡏ֬ೝ - User Defined Type Guard function: function fn(x: any): x is { msg: string } { return !!x.msg && typeof x.msg === "string"; } 69

70. ϛχԋश̍ - 📝 ҎԼͷؔ਺͸ type ʹԠͯ͡ɺpayload ͷܕ͕ҟͳΓ·͢ɻ ίϯύΠϧ͕௨ΔΑ͏ʹɺAction ͷܕΛߟ͑ͯΈͯ 70

    function reduce(state = [100], action: Action) { switch (action.type) { case “CONCAT": // payload: number[] return state.concat(action.payload); case “REMOVE": // payload: number return state.filter(val => val !== action.payload); default: return state; } };

71. ϛχԋश̎ - 📝 ࣍ͷίʔυ͸੺Լઢ෦෼ͰίϯύΠϧΤϥʔͱ͞Εͯ͠·͍·͢ɻԿ ނͰ͠ΐ͏͔ʁ const prices = [1000, 500];

    type Item = { price?: number; }; function fn(item: Item): boolean { if (item.price == null) return false; return prices.some( p => item.price > p, ); } 71

72. Ωϟετ - จࣈྻͷLiteral Type͸stringܕʹ୅ೖՄೳͰ͕͢ɺ stringܕ͸จࣈྻͷLiteral Typeʹ͸୅ೖͰ͖·ͤΜ - ʮ୅ೖՄೳʯ͸ɺSub Typeʢ۩৅ʣˠ Supar

    Typeʢந৅ͳܕʣͷํ޲ ʹݶఆ͞ΕΔ͔ΒͰ͢ type SomeString = "some string"; const x: SomeString = "some string"; const y: string = x; const z: SomeString = y; Supar type Sub type type SomeString string

73. Ωϟετ - ͜ͷΑ͏ͳ৔߹ɺม਺ͷޙΖʹ as ܕ໊ Λ෇༩͢Δ͜ͱͰܕΛม׵Ͱ͖ ·͢ʢਖ਼ࣜʹ͸ ΩϟετͰ͸ͳ͘ɺType Assertion ͱݺ͹ΕΔػೳʣ

    Supar type Sub type type SomeString string type SomeString = "some string"; const x: SomeString = "some string"; const y: string = x; const z = y as SomeString;

74. asͷ੍໿ - asͰม׵Ͱ͖Δͷ͸ɺSupar Type → Sub Type ͷ৚͕݅ຬͨ͞ΕΔͱ͖ ͷΈͰ͢ -

    e.g. numberܕ͸stringܕʹม׵Ͱ͖·ͤΜ Supar type Sub type type SomeString string

75. Intersection Type - Union Type͸ܕͱܕͷ࿨Ͱ͕͢ɺܕͱܕͷੵ΋ଘࡏ͠·͢ - ه߸ & Ͱෳ਺ͷܕΛ࿈݁͢ΔͱɺIntersection TypeʹͳΓ·͢

    - type A & B ͸ɺʮAʹ΋Bʹ΋assignableʯͳܕͰ͢ 75

76. Bottom Type - neverܕ͸ʮ͢΂ͯͷܕͷSub Typeʯͱͯ͠ѻΘΕ·͢ɻ͢΂ͯͷܕ͕ never΁୅ೖͰ͖·͕͢ɺnever͸neverҎ֎ͷ͢΂ͯͷܕʹ୅ೖͰ͖· ͤΜ - Type Guardͷ݁Ռɺneverܕʹਪ࿦͞ΕΔϒϩοΫ͸ʮ౸ୡෆՄೳʯͱ

    ͍͏ҙຯʹͳΓ·͢ function fn(x: number) { if (typeof x === "string") { return x.trim(); } return x; } 76

77. Bottom type - neverʹਪ࿦͞ΕΔͱ͜ - ྫ֎Λεϩʔͨ͠ޙΖͷεςʔτϝϯτʹ͓͚Δม਺ - Node.jsͷprocess.exit() ͷ໭Γ஋

78. Composition never - Լهͷܕ A ɺB ͸ͦΕͧΕͲΜͳܕͰ͠ΐ͏ʁ (X͸Կ͔ద౰ͳܕͱ͠·͢ʣ type A

    = never | X; type B = never & X; 78

79. Unknown Type - unknown ͸ anyͷ਌ੰͷΑ͏ͳ΋ͷͰ͢ - ͢΂ͯͷܕ͕unknownʹassignableɺͱ͍͏఺Ͱ͸anyͱҰॹͰ͕͢ɺ Type Assertion͠ͳ͍ͱར༻ෆՄೳͱ͍͏఺ͰanyͱҟͳΓ·͢

    79

80. Generics - TypeScriptͰ͸ɺGenericsʢ૯শܕʣ͕࢖͑·͢ - GenericsΛ࢖͏ͱɺύϥϝτϦοΫͳܕΛ࡞Δ͜ͱ͕Ͱ͖·͢ 80

81. Generics type List<T> = T[]; function getLength<T>(list: List<T>) { list.length;

    } interface IFoo<T> { list: ReadonlyArray<T>; } class Foo<T> implements IFoo<T> { constructor(public readonly list: T[]){ } get size() { return getLength(this.list); } } const foo = new Foo<string>([""]); 81

82. Generics - TypeScript͕ඪ४Ͱ༻ҙ͍ͯ͠Δܕʹ΋૯শܕΛ࢖͍ͬͯΔܕ͕৭ʑ͋ Γ·͢ - Map, Set, PromiseͳͲͷJavaScriptඪ४ͷίϯςφܥClass - ReadonlyArrayͷΑ͏ͳTypeScript͕ಠࣗʹ༻ҙ͍ͯ͠ΔUtilityܕ

    82

83. Generics // ໭Γ஋͕Promise<{ id: number; name: string; }> function getTodo()

    { return Promise.resolve({ id: 100, name: "hoge", }); } const index = new Map<number, string>(); index.set(1, "hoge"); index.has(1); const colors: ReadonlyArray<string> = [ "red", "green", "blue", ]; colors.sort(); // ഁյૢ࡞͸ېࢭ

84. ԋश2 84

85. ԋशͷલʹ - ։ൃ؀ڥ͕੔͍ͬͯΔ͜ͱΛ֬ೝ͠·͠ΐ͏ - ҎԼͷίϚϯυ͸ར༻ՄೳͰ͔͢ʁ - git - node --version

    - ΤσΟλ: - ͩ͜ΘΓ͕ແ͚Ε͹ɺVisual Studio Code Λ࢖͍ͬͯͩ͘͞ 85

86. ԋश2 - repositoryΛclone - https://github.com/recruit-tech/bootcamp-2021-ts - clonseͨ͠Βɺcloneͨ͠σΟϨΫτϦʹҠಈͯ͠ҎԼΛ࣮ߦ - npm i

    - npm start 86

87. ৼΓฦΓ - ʢճ౴ྫΛ΋ͱʹߨٛதʹઆ໌ʣ

88. ΋ͬͱߴ౓ͳܕ 88

89. Advanced type - ࠓ೔͸ׂѪ͠·͕͢ɺܕγεςϜʹ͸ΑΓߴ౓ͳػೳ΋༻ҙ͞Ε͍ͯ· ͢ - Mapped Type: objectܕͷkeyΛ࠶ར༻ͯ͠ผͷܕΛ࡞Δ -

    Conditional Type: ୅ೖՄೳੑͰܕΛύλʔϯϚον - Type Inference in Conditional Type: ύλʔϯϚονͨ͠ܕͷ࠶ར༻ - Template Literal Type: จࣈྻϦςϥϧͷܕԋࢉ 89

90. Advanced type interface Observable<T> { subscribe(cb: (v: T) => void):

    void; } type Unboxing<T> = T extends Observable<infer S> ? S : never; declare function combineLatest<U extends Observable<any>[]>( ...args: U ): Observable< { [P in keyof U]: Unboxing<U[P]>; } >; declare const s1: Observable<string>; declare const s2: Observable<number>; declare const s3: Observable<boolean>; combineLatest(s1, s2, s3).subscribe(([v1, v2, v3]) => { });

91. Advanced type - ͱ͸͍͑ɺ͜ΕΒͷڽͬͨػೳ͸ɺΞϓϦέʔγϣϯ࣮૷࣌ͷར༻ස౓ ͸͔ͳΓ௿͍Ͱ͢ɻඞཁ͕ੜ͔ͯ͡Β਎ʹ͚ͭΕ͹े෼ͱ͍͑·͢ - ҰํɺطଘJavaScriptϥΠϒϥϦʹܕఆٛ͸͜ΕΒͷςΫχοΫ͕׆༻ ͞Ε͍ͯΔ͜ͱ͕ଟ͍Ͱ͢ - ஶ໊ͳϥΠϒϥϦͷܕఆٛΛಡΉͷ͸शಘͷۙಓ͔΋͠Ε·ͤΜ

92. ༨ஊ - TypeScriptͷܕγεςϜ͸ɺͦΕࣗମ͕νϡʔϦϯά׬શͰ͢ - ͦͷؾʹͳΕ͹ɺԼهͷΑ͏ͳ΋ͷ͕࡞Εͯ͠·͍·͢ - ి୎ - ϥΠϑήʔϜ

93. ϥΠϒϥϦͷܕఆٛ 93

94. JavaScriptϓϩδΣΫτͱґଘϥ ΠϒϥϦ - JavaScriptͷϓϩδΣΫτΛਐΊΔࡍ͸ɺ΄΅࣮֬ʹ֎෦ͷϥΠϒϥϦ ʹґଘ͢Δ͜ͱʹͳΓ·͢ - ௨ৗɺNPMʢNode.jsͷύοέʔδϚωʔδϟʣʹެ։͞Ε͍ͯΔϥΠ ϒϥϦΛར༻͢Δέʔε͕ଟ͍Ͱ͢ - ֎෦ϥΠϒϥϦΛTypeScript͔Βར༻͢ΔͨΊʹ͸ɺʮܕఆٛϑΝΠ

    ϧʯ͕ඞཁʹͳΓ·͢ 94

95. ܕఆٛϑΝΠϧͱ͸ - ܕఆٛϑΝΠϧͱ͸ɺTypeScriptͷΞϊςʔγϣϯ৘ใͷΈ͕நग़͞Ε ͨϑΝΠϧͰ͢ - ֦ுࢠ͕.d.tsͱͳΔͨΊɺʮͰ͌ʔͯ͌ʔ͑͢;͍͊Δʯͱݺ͹ΕΔ͜ ͱ΋ଟ͍Ͱ͢ - ྫ: ʮjQueryͷ.d.tsΠϯετʔϧ͠๨ΕͯͶʁʯ

    95

96. .d.ts - .d.tsϑΝΠϧΛੜ੒ͯ͠ΈΔ: - खݩͰద౰ͳTypeScriptͷϑΝΠϧΛ࡞Δ - tsc --declaration 96

97. types - ϥΠϒϥϦͷܕΛTypeScriptͰར༻͢Δํ๏͸େผ͢Δͱ3௨Γ͋Γ·͢ 1.NPM ύοέʔδʹܕఆ͕ٛಉࠝ͞Ε͍ͯΔ 2.NPMύοέʔδʹରԠ͢ΔܕఆٛΛୈ3ऀ͕ఏڙ͍ͯ͠Δέʔε 3.ࣗ෼ͰܕఆٛΛ༻ҙ͢Δ 97

98. 1. NPM ύοέʔδʹܕఆ͕ٛಉ ࠝ͞Ε͍ͯΔ - npm install (ϥΠϒϥϦ໊) Λ࣮ߦ͢Δ͚ͩͰܕఆ͕ٛར༻ՄೳʹͳΓ· ͢

    - ͜ͷखͷ΍ͭ͸ɺϥΠϒϥϦͷpackage.jsonʹ “types”: “index.d.ts” ͱ ͍ͬͨهड़͕͋Γ·͢ 98

99. 2. NPMύοέʔδʹରԠ͢ΔܕఆٛΛ ୈ3ऀ͕ఏڙ͍ͯ͠Δέʔε - ળҙͷୈ3ऀ͕ܕఆٛΛผ్ఏڙͯ͘͠Ε͍ͯΔέʔε͕͋Γ·͢ - https://github.com/DefinitelyTyped/DefinitelyTyped - npm i

    @types/(ϥΠϒϥϦ໊) ͰΠϯετʔϧ͠·͢ 99

100. 3.ࣗ෼ͰܕఆٛΛ༻ҙ͢Δέʔε - Ambient moduleએݴͱ͍͏ख๏Ͱࣗ෼ͰϥΠϒϥϦʹܕఆٛΛ༩͑Δ ͜ͱ͕Ͱ͖·͢ - গ͠ϚχΞοΫͳͷͰࠓ೔͸৮Ε·ͤΜ 100

101. ܕఆٛΛ୳͢ॱং /1.ύοέʔδʹܕఆٛ ͕ಉࠝ͞Ε͍ͯΔʁ %FpOJUFMZ5ZQFEʹ !UZQFTύοέʔδ͕͋Δʁ ͋Γ͕ͨ͘࢖͏ @types ͔ΒܕఆٛΛ ௥ՃΠϯετʔϧͯ͠࢖͏ ࣗ෼ͰܕఆٛΛॻ͘

     yes yes no no 101

102. ܕఆٛϑΝΠϧͷ஫ҙ - ఏڙ͞Εͨܕఆ͕ٛຊମͷAPIΛ໢ཏ͍ͯ͠ͳ͍͜ͱ΋ɺ··͋Γ·͢ - e.g. ಛఆͷؔ਺ͷܕఆ͕ٛͬͦ͝Γൈ͚ͯΔ / anyͩΒ͚ / etc…

     - ͜ͷखͷέʔεʹ௚໘ͨ͠ΒɺܕఆٛΛमਖ਼͢ΔPRΛग़͠·͠ΐ͏ 102

103. TypeScriptͱ Ϟδϡʔϧ 103

104. JavaScriptͱʮϞδϡʔϧʯ - ͦ΋ͦ΋ɺJavaScriptͱ͍͏ݴޠʹ͸ʮϞδϡʔϧʯͱ͍͏֓೦͕௕Β ͘ଘࡏ͍ͯ͠·ͤΜͰͨ͠ - ECMAScript 2015ͱ͍͏όʔδϣϯͰॳΊͯϞδϡʔϧʹؔ͢Δߏจ͕ ࢓༷Խ͞Ε·ͨ͠ 104

105. ES2015 Ϟδϡʔϧ // calc.js // ϞδϡʔϧΛར༻͢Δଆ import { add }

     from “./add.js”; console.log(add(1, 2)); // add.js // ϞδϡʔϧΛఆٛ͢Δଆ export function add(a, b) { return a + b; }

106. JavaScriptͱʮϞδϡʔϧʯ - ECMAScriptͰϞδϡʔϧߏจ͕ඪ४ͰఆΊΒΕΔΑΓҎલ͔ΒɺಠࣗϞ δϡʔϧͱ΋͍͏΂͖ن͕֨৭ʑ͋Γ·͢ - (ECMAScriptඪ४Ͱͳ͍)ಠࣗͷϞδϡʔϧن֨ͱͯ͠ɺࠓͰ΋޿͘࢖Θ Ε͍ͯΔͷ͕Node.js(CommonJS)ͷ require / module.exports

     ελΠϧ Ͱ͢ 106

107. CommonJSͷϞδϡʔϧ // calc.js // ϞδϡʔϧΛར༻͢Δଆ const add = require("./add"); console.log(add(1,

     2)); // add.js // ϞδϡʔϧΛఆٛ͢Δଆ function add(a, b) { return a + b; } module.exports = add;

108. Module loader - ES2015 ϞδϡʔϧͰ͋ΕɺಠࣗܗࣜͰ͋ΕɺϞδϡʔϧԽ͞Εͨ JavaScriptΛऔΓࠐΉ࢓૊Έ͕ඞཁͰ͢ - <script type=“module”>λά΍ɺNode.jsͷrequireػߏͳͲ -

     ϞδϡʔϧΛಡΈࠐΉ࢓૊Έ͸ʮϞδϡʔϧϩʔμʔʯͱݺ͹Ε·͢ 108

109. --module - ར༻ՄೳͳϞδϡʔϧϩʔμʔ͸ɺjsΛ࣮ߦ͢Δ؀ڥʹΑͬͯҟͳͬͯ͠ ·͏ͷ͕ݱঢ়Ͱ͢ - TypeScript͸ɺ͜ΕΒͷ࣮ߦ؀ڥࠩҟΛٵऩ͢ΔͨΊʹɺ - ιʔείʔυ͸ES2015ελΠϧͰهड़ - tsconfig.jsonͷmoduleઃఆͰɺϥϯλΠϜͰར༻͢ΔϞδϡʔϧϩʔ

     μʔΛઃఆɻτϥϯεύΠϧͰม׵͞ΕΔ 109

110. --module - moduleઃఆͷ࢖͍෼͚ྫ - ԋश1Ͱ͸ɺNode.jsͰಈ࡞ͤ͞ΔͨΊʹ module: “commonjs”Λઃ ఆ - ԋश2Ͱ͸ɺϒϥ΢βͷ<script

     type=“module”>ػೳΛ࢖ͬͯಡΈ ࠐΉͨΊʹɺ module: “esnext”Λઃఆ 110

111. ʢ༨ஊʣଞͷ--moduleୡ - --module ʹ͸ “amd” / “umd” / “system” ͷ஋΋બ୒ՄೳͰ͢ɻ…͕໓ଟ

     ʹ࢖͏͜ͱ͸ͳ͍Ͱ͢ - ڵຯ͕͋ͬͨΒɺ“RequireJS” ͱ͔ “SystemJS” Ͱௐ΂ͯΈΔͱྑ͍ͱࢥ ͍·͢ 111

112. TypeScriptͱͯ͠ͷϞδϡʔϧ - ग़ྗ͞ΕΔJavaScriptͷܗࣜͱ͸ผʹʮ.tsϑΝΠϧ͕Ϟδϡʔϧͱͯ͠ղ ऍ͞ΕΔ͔Ͳ͏͔ʯͱ͍͏ج४͕͋Γ·͢ - ʮimport / export એݴͷແ͍.tsϑΝΠϧ͸ϞδϡʔϧͰ͸ͳ͍ʯͱ͍ ͏ͷ͸಄ͷย۱ʹͱͲΊ͓ͯ͘ͱྑ͍Ͱ͢

     112

113. TypeScriptͱͯ͠ͷϞδϡʔϧ - Ϟδϡʔϧͱͯ͠ղऍ͞ΕΔ.tsϑΝΠϧ - ϞδϡʔϧʹͳΒͳ͍.tsϑΝΠϧ /* types.ts */ // Todo

     ΠϯλʔϑΣΠε͸Ͳ͔͜ΒͰ΋ࢀরՄೳ interface Todo { name: string; } /* types.ts */ // Todo ΠϯλʔϑΣΠε import ͠ͳ͍ͱࢀরͰ͖ͳ͍ export interface Todo { name: string; } 113

114. TypeScriptͱϏϧυΤ ίγεςϜ 114

115. ͳͥԶͨͪ͸Ϗϧυ͢Δͷ͔ - JavaScriptͷϏϧυྺ࢙͸ׂͱҋ͕ਂ͍Ͱ͢ - ଠݹͷੲ - AltJS͕ྲྀߦΔલ͸ɺ։ൃऀ͕ॻ͍ͨ.jsϑΝΠϧΛͦͷ··HTMLͷ <script>λάͰಡΈࠐΜͰ͍·ͨ͠ 115

116. ๲Ε্͕Δ.js - ΑΓϦονͳମݧ͕webʹٻΊΒΕΔʹͭΕɺಡΈࠐ·ΕΔJavaScript ϑΝΠϧ͸ॏް௕େԽͷҰ్ΛḷΓ·͢ɻ͜Εʹ൐͍৭ʑͳ՝୊͕ු্͠ ·ͨ͠ - μ΢ϯϩʔυ͞ΕΔϑΝΠϧͷαΠζΛݮΒ͍ͨ͠ - ϑΝΠϧΛ෼ׂͯ͠։ൃ͍͕ͨ͠ɺ<script>λάͷಡΈࠐΈճ਺͸গͳ ͍ͨ͘͠

     - ผݴޠʢAltJSʣͰޮ཰తʹ։ൃ͍ͨ͠ - etc… 116

117. Ϗϧυπʔϧͷཚཱ - Ϟδϡʔϧϩʔμʔ - CommonJS (Node.js) ελΠϧ, RequireJSελΠϧ, etc… -

     ϏϧυγεςϜ - Grant, Gulp, etc… - ѹॖʢ೉ಡԽʣπʔϧ - YUI Compressor, ClosureCompiler, UglifyJS, etc… 117

118. Ϗϧυπʔϧͷཚཱ - Ϟδϡʔϧϩʔμʔ - CommonJS (Node.js) ελΠϧ, RequireJSελΠϧ, etc… -

     ϏϧυγεςϜ - Grant, Gulp, etc… - ѹॖʢ೉ಡԽʣπʔϧ - YUI Compressor, ClosureCompiler, UglifyJS, etc… 118 ͱʹ͔͘৭ʑ͋ͬͨʂ

119. Module bundler - αʔόʔαΠυJavaScriptͰ͋ΔNode.jsͷීٴͱɺ Node.jsʹ͓͚ΔϞδϡʔϧػߏʹΠϯεύΠΞ͞Ε ͯɺbrowserifyͱ͍͏πʔϧ͕ҰੈΛ෩ᴆ͠·ͨ͠ - ιʔείʔυதͷ require(‘…’) Λ੩తղੳͰ୳ࡧ͠ɺ

     require͞Ε͍ͯΔґଘscriptΛ݁߹͢Δ͜ͱͰɺ୯Ұ ͷ.jsϑΝΠϧΛੜ੒͠·͢ 119

120. Module bundler - browserifyͷొ৔Ҏ߱ɺґଘؔ܎Λղܾͯ͠ϑΝΠϧΛ·ͱΊΔπʔϧ ͕਺ଟ͘࡞ΒΕ͍ͯ·͢ɻʮϞδϡʔϧόϯυϥʯͱ૯শ͞Ε·͢ɻ - webpack, rollup.js, fusebox, Parcel,

     etc… 120

121. webpack - webpack ͸ۙ೥޿͘࢖ΘΕ͍ͯΔϞδϡʔϧόϯυϥͰ͢ - https://webpack.js.org/ - JavaScript / AltJS͚ͩͰͳ͘ɺը૾΍CSSͳͲ༷ʑͳϑΝΠ

     ϧΛΞηοτͱͯ͠όϯυϧϑΝΠϧʹऔΓࠐΊ·͢ 121

122. webpack - webpackͰͰ͖Δ͜ͱʢҰ෦ൈਮʣ: - AltJSΛτϥϯεύΠϧͭͭ͠ɺόϯυϧΛ࡞੒͢Δ - όϯυϧʹରԠ͢ΔιʔεϚοϓϑΝΠϧΛ࡞੒͢Δ - ೉ಡԽΛࢪͯ͠࠷ऴతͳϑΝΠϧαΠζΛখ͘͢͞Δ -

     Node.jsͷAPIΛҰ෦ϒϥ΢β޲͚ʹఏڙ͢Δ 122

123. ࠷ۙͷࣄ৘ - ۙ೥Ͱ͸ɺECMAScriptͷimport/exportߏจ΍ϒϥ΢βͷ<script type=“module”>ͱ͍ͬͨඪ४Խ͕ਐΈɺόϯυϥʹཔΒͳ͘ͱ΋Ϟ δϡʔϧΛར༻Մೳʹͳ͖ͬͯ·ͨ͠ʢIEআ͘ʣ - ͱ͸͍͑ɺimport ͷ࿈࠯͕ਂ͘ͳΔͱɺϒϥ΢β͕࠷ޙͷϞδϡʔϧʹ ౸ୡ͢Δ·Ͱʹ͕͔͔࣌ؒͬͯ͠·͍·͢※1 ɻ͜ͷҙຯͰɺϑΝΠϧΛ

     ·ͱΊΔϞδϡʔϧόϯυϥ͸౰෼ඞཁͱ͞Ε͚ͭͮΔͰ͠ΐ͏ - ※1 https://docs.google.com/document/d/1ds9EEkcDGnt-iR8SAN-_7nsOfw7gsMfhZjzZ_QAIyjM/ mobilebasic 123

124. ʢ༨ஊʣ஗Ԇͱ౤ػ - Ұ֓ʹ͢΂ͯͷJavaScriptϑΝΠϧΛ୯ҰϑΝΠϧʹόϯυϧ͢Ε͹Α ͍ɺͱ͍͏༁Ͱ͸͋Γ·ͤΜɻద੾ͳ࢖͍෼͚͕ॏཁͰ͢ - ʮࣄલʹඞཁͱͳΔ͜ͱ͕Θ͔͍ͬͯΔϞδϡʔϧʯΛ౤ػతʹfetch ͢Δ - ʮϢʔβʔʹͱͬͯຊ౰ʹඞཁͱͳΔ·Ͱʯμ΢ϯϩʔυΛ஗Ԇͤ͞ Δ

     124

125. Α͘Ұॹʹ࢖ΘΕΔ πʔϧୡ

126. ίʔυ඼࣭ - ʮ੩తͳܕ෇͚ʯͱ͍͏ಛੑ্ɺن໛ͷେ͖͍ϓϩδΣΫτͰͦ͜ TypeScript͸ͦͷਅՁΛൃش͠·͢ - ෳ਺ͷ։ൃऀ͕ܞΘΔϓϩδΣΫτͰ͸ɺίʔυͷ඼࣭ΛҰఆʹอͭͨ Ίʹ༷ʑͳ޻෉͕ඞཁͱͳΓ·͢

127. tscࣗମͷศརػೳ - TypeScriptຊମʹ෇ଐ͍ͯ͠Δ tsc ͱ͍͏πʔϧࣗମʹ΋ศརػೳ͕උ Θ͍ͬͯ·͢ - --noEmit : .jsϑΝΠϧ΁ͷग़ྗΛߦΘͳͣʹɺܕνΣοΫͷΈΛ࣮ߦ

     ͢ΔΦϓγϣϯ. CIʹ૊ΈࠐΉͱศར - --noUnusedLocals, --noUnusedParameters: ར༻͞Ε͍ͯͳ͍ม਺Λ ݕ஌ͯ͠Τϥʔʹ͢ΔΦϓγϣϯ. ৑௕ͳίʔυͷ࡟ݮʹͳΔ - ͦͷଞʹ΋ɺtscʹ͸༷ʑͳΦϓγϣϯ͕༻ҙ͞Ε͍ͯ·͢ɻެࣜυΩϡ ϝϯτΛݟͯΈΔͱΑ͍Ͱ͠ΐ͏

128. ESLint - ESLint ͸ASTʢந৅ߏจ໦ʣΛ༻͍ͨίʔυͷνΣοΫπʔϧͰ͢ɻې ࢭ͍ͨ͠ίʔυύλʔϯΛϧʔϧͱͯ͠ొ࿥ͯ͠ར༻͠·͢ - ϧʔϧͷྫ: - consoleΛ࢖Θͳ͍͜ͱ -

     ࠶୅ೖ͠ͳ͍ม਺ʹ͸letͰ͸ͳ͘constΛ༻͍Δ͜ͱ - TypeScriptͱESLintΛซ༻͢Δ৔߹ɺhttps://github.com/typescript- eslint/typescript-eslint Λ࢖͍·͢

129. Prettier - Prettier͸ιʔείʔυΛػցతʹϑΥʔϚοτ͢ΔͨΊͷπʔϧͰ͢ - ԼهͷΑ͏ͳෆໟͳٞ࿦ʹࠨӈ͞Εͳ͍ͨΊʹ΋ɺίϛοτ࣌ʹίʔυ ΛࣗಈͰϑΥʔϚοτ͓ͯ͘͠श׳Λ͚͓ͭͯ͘ͷ͸ྑ͍͜ͱͰ͢ - ʮจࣈྻϦςϥϧ͸γϯάϧΫΥʔτ or μϒϧΫΥʔτʯ

     - ʮηϛίϩϯΛจͷ຤ඌʹ͚ͭΔ΂͖͔ʯ - Prettier͸ඪ४ͰTypeScriptʹରԠ͍ͯ͠·͢

130. ࣗಈੜ੒౳ - ԋश1ͱԋश2ͰݟͨΑ͏ʹɺ֎෦ͱͷ௨৴͕ൃੜ͢ΔՕॴ͸anyʹͳΓ ͕ͪͰ͢ - ௨৴ϓϩτίϧʹ߹ΘͤͯɺIDL͔ΒTypeScriptͷܕΛੜ੒͢Δπʔϧ΋ ଟ਺ଘࡏ͠·͢ - e.g. OpenAPI(Swagger),

     GraphQL, TypeORM, etc…

131. ͓ΘΓʹ

132. ͓ΘΓʹ - ࠓ೔͸ԼهͳͲΛத৺ʹֶΜͰ͖·ͨ͠ - TypeScriptͷجຊจ๏ - طଘͷJavaScriptίʔυʹܕΛಋೖ͢Δํ๏ - ܕͷந৅Խ <->

     ۩ମԽͱɺͦΕʹԠͨ͡ॲཧ੍ޚํ๏ - ࣌ؒͷ౎߹্ɺ৮Ε͍ͯͳ͍τϐοΫ΋·ͩ୔ࢁ͋Γ·͢ɻؾʹͳΔ ςʔϚ͕͋ͬͨΒɺੋඇࣗ෼Ͱௐ΂ɺʢՄೳͰ͋Ε͹ʣखΛಈ͔ͯ͠Έ ͍ͯͩ͘͞