TypeScript Bootcamp 2020

Slide 1

Slide 1 text

TypeScript Bootcamp 2020 1

Slide 2

Slide 2 text

About me - ໊শɿ૔ݟ༸ี ʢ@Quramy / ͘ΒΈʔ ͱݺ͹ΕΕΔ͜ͱ͕ଟ͍ʣ - ॴଐɿPE෦ ASG, ϑϩϯτΤϯυΤϯδχΞ - ৬ྺɿRTCʹདྷͨͷ͸2020/2݄ɻ ࠃ಺SIer -> Webܥϕϯνϟʔ2ࣾʹ͍·ͨ͠

Slide 3

Slide 3 text

๻ͱTypeScript - 2015೥3݄5೔͔ΒTS΍ͬͯ·͢ - ౰࣌͸VSCͳ͔ͬͨͷ΋͋ͬͯɺvim޲͚ͷTypeScript pluginΛॻ͍ͨΓ - ࠷ۙ΋ESLint޲͚ͷΤσΟλ֦ு΍GarphQL༻ͷΤσΟλ֦ுΛ࡞ͬͨΓͯ͠ ͍·͢ɻASTܥͷٕज़ׂ͕ͱಘҙͰ͢ - https://github.com/microsoft/TypeScript-Website ͰTSຊՈαΠτͷ຋༁׆ಈ ΋͍ͯ͠·͢ɻίϯτϦϏϡʔτ͍ͨ͠ɺͱ͍͏ਓ͕͍ͨΒ੠͔͚͍ͯͩ͘͞ - ࠓ೥2݄։࠵༧ఆͩͬͨTS Conf JPʹCFP௨ͬͨΜ͚ͩͲɺcovid19ͷ͍ͤͰྲྀ Εͨɻɻɻ

Slide 4

Slide 4 text

ͳʹ΍Δͷ - ຊߨ࠲Ͱ͸ԼهΛֶΜͰ͍͖·͢ - TypeScriptͷجຊతͳจ๏΍ίʔυͷॻ͖ํ - TypeScriptʹؔ܎͢ΔϑϩϯτΤϯυπʔϧνΣΠϯ(webpackͳͲ) 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

໨࣍ 1. TypeScript is Կ 2. TypeScriptʹ৮ΕΔ ※ 3. ܕͷૢ࡞ ※ 4. ϥΠϒϥϦͷܕఆٛ 5. TypeScriptͱϞδϡʔϧ 6. TypeScriptͱϏϧυΤίγεςϜ ※

Slide 7

Slide 7 text

TypeScript is Կ 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

TypeScript is Alt JS - TypeScriptͷιʔείʔυ͸JavaScriptʹίϯύΠϧ͞Ε·͢ɻʮτϥϯ εύΠϧʯͱ΋ݺͿ͜ͱ΋͋Γ·͢ - ੜͰJavaScriptΛॻ͔ͣʹɺผݴޠͰॻ͍ͯJavaScriptΛੜ੒͢ΔΞϓ ϩʔν͸Alt JSʢ͓Δͱ͐͡ʔ͑͢ʣͱݺΜͩΓ͢Δ͜ͱ΋ 9

Slide 10

Slide 10 text

͍ͬͺ͍͋Δͧ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ʹ ܉഑্͕͕Γͭͭ͋Δؾ഑ 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

·ͣ͸৮ͬͯΈΑ͏ - TypeScript Playground ʹ͓खܰ؀ڥ͕͋Γ·͢ - ৮ͬͯΈΑ͏Playgroundɿ - Run / LogsͰ࣮ߦΛ֬ೝ͠Α͏ - JSλϒ͔ΒτϥϯεύΠϧ͞ΕͨJavaScriptίʔυΛ֬ೝ͠Α͏ 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ܕνΣοΫ͕Ͱ͖Δ - JavaScript͸ಈతܕ෇ݴޠ - ࣮ߦ͢Δ·ͰΘ͔Βͳ͍͜ͱ͕͍ͬͺ͍ hoge͸είʔϓʹఆٛ͞Εͨม਺ ʁ hoge͸objectͰɺfooͱ͍͏ϓϩύςΟ͕ଘࡏ͍ͯ͠Δʁ hoge.foo͸ؔ਺ͱ࣮ͯ͠ߦͰ͖Δʁ console.log(hoge.foo()); 14

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ܕνΣοΫ͸બ΂Δ - TypeScript as ઴࣍తܕ෇ͷΑ͍ͱ͜Ζɿ - طଘͷJavaScript͚ͩͰॻ͔ΕͨιʔείʔυʹঃʑʹܕΛ෇͚͍͚ͯΔ - ৽نϓϩδΣΫτͰ͸ɺ࠷ॳ͔Β੩తܕ෇ݴޠͱಉ͡Α͏ʹ࢖͏͜ͱ΋ Ͱ͖Δ - TypeScript as ઴࣍తܕ෇ͷ஫ҙ఺ɿ - ॴḨ͸ޙ෇ͷػߏɻJavaScriptͷࣗ༝౓ͱ૬൓͢ΔՕॴ΋͋Δ͠ɺӕͭ ͍ͯܕγεςϜ͕ὃ͞ΕΔ͜ͱ͢Β͋Γಘ·͢ 16

Slide 17

Slide 17 text

Downleveling - τϥϯεύΠϧͷաఔͰɺ৽͍͠࢓༷ͷJavaScriptߏจΛɺݹ͍ϒϥ΢ βͰ΋ಈ࡞͢ΔΑ͏ʹม׵͠·͢ - e.g. async / await ͸InteretExplorerͰ͸ಈ࡞͠·ͤΜ͕ɺTypeScript ͕ؤுͬͯίʔυΛม׵ͯ͘͠Ε·͢ 17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ΤσΟλαϙʔτ͕༏ल - TypeScriptͦͷ΋ͷʹҎԼͷػೳؚ͕·Ε͍ͯΔͷͰɺΤσΟλ͕շదͰ͢ - ΤϥʔνΣοΫ - ิ׬ - ఆٛδϟϯϓ - ࢀরՕॴͷදࣔ - ϦϑΝΫλϦϯάิॿػೳ - etc… 19

Slide 20

Slide 20 text

ΤσΟλαϙʔτ͕༏ल - ʢ༨ஊʣ - TypeScriptͷݴޠαʔϏεʢtsserverʣ΍C#ͷ࢓૊ΈΛݩʹɺ LSP(Language Service Protocol) ͱ͍͏ʮΤσΟλͱϓϩάϥϛϯά ݴޠؒͷΠϯλʔϑΣʔεʯ͕ੜ·Εͨ΄Ͳ - ࢒೦ͳ͜ͱʹTypeScript͸LSP४ڌ͍ͯ͠·ͤΜ 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

TypeScriptʹ৮ΕΔ 23

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Function parameters - ؔ਺ͷԾҾ਺ʹ஫ऍΛ෇༩ͯ͠Έ·͢ - PlaygroundͰԼهΛॻ͍ͯΈͯɿ function add(a: number, b: number) { return a + b; } console.log(add(100, 100)); 27

Slide 28

Slide 28 text

Function parameters - ஫ऍ͢ΔܕΛҎԼͷΑ͏ʹॻ͖׵͑ͯɺΤϥʔνΣοΫ͞ΕΔ͜ͱΛ ֬ೝͯ͠Έͯɿ function add(a: string, b: string) { return a + b; } 28

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

஫ऍͰ͖Δͱ͜Ζ - ଞʹ΋ : ܕ໊ Ͱ஫ऍͰ͖Δͱ͜Ζ͸৭ʑ͋Γ·͢ const a: string = "hoge"; let b: string; var c: string; function d(): string { return "hoge"; } class MyClass { e: string = ""; } 30

Slide 31

Slide 31 text

஫ऍͱਪ࿦ͷিಥ - ஫ऍͨ͠ܕͱਪ࿦݁Ռ͕৯͍ҧ͏ͱɺίϯύΠϧΤϥʔʹͳΓ·͢ - ԼهͷίʔυͰΤϥʔʹͳΔ͜ͱΛ֬ೝͯ͠Έͯɿ function add(a: number, b: number) { return a + b; } const a: string = add(100, 100); 31

Slide 32

Slide 32 text

Primitive types - ਺஋Ҏ֎ʹ΋ɺจࣈྻ΍ਅِ஋ͳͲ΋primitive typeͱͯ͠༻ҙ͞Ε͍ͯ ·͢ const bool: boolean = true; const num: number = 100; const str: string = "hogehoge"; const nullObj: null = null; const undefVal: undefined = undefined; 32

Slide 33

Slide 33 text

Function type - JavaScriptͷੈքͰ͸ɺؔ਺΋ΦϒδΣΫτͷҰछͰ͋Δ͜ͱ͔Βɺ TypeScriptʹ΋ʮؔ਺ࣗମͷܕʯ͕͋Γ·͢ - ྫɿ - ໭Γ஋͕ଘࡏ͠ͳ͍ؔ਺ͷ৔߹͸ɺ=> void ͱॻ͖·͢ (a: number, b: number) => number 33

Slide 34

Slide 34 text

Object / Array type const obj: { name: string, age: number } = { name: "Bob", age: 20, }; const arr: number[] = [1, 2, 3]; 34

Slide 35

Slide 35 text

Type alias - typeߏจͰܕʹผ໊Λ෇͚ͯ࠶ར༻Ͱ͖·͢ɻ”type alias” ͱݺ͹Ε· ͢ɻ͔ͳΓසൟʹ࢖͍·͢ - type໊͸େจࣈ͔Β։࢝͢Δͷ͕ҰൠతͰ͢ type Messages = string[]; function showMessages(msgs: Messages) { msgs.forEach(msg => console.log(msg)); } 35

Slide 36

Slide 36 text

ϛχԋश - ҎԼΛຬͨ͢ GetUser ͱ͍͏ؔ਺ܕΛॻ͍ͯΈͯ - input: จࣈྻܕ - output: ࣍ͷߏ଄Ͱఆٛ͞ΕΔΑ͏ͳUserܕ id จࣈྻ name จࣈྻ age ਺஋ isMarried ਅِ஋ 36

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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; } } 38

Slide 39

Slide 39 text

JavaScriptͷClassʹແ͍ػೳ - ϑΟʔϧυɾϝιουʹՄࢹੑ͕ઃఆͰ͖Δ - private / protected / public - ※ TypeScriptʹ͓͚Δprivateߏจ͸Soft PrivateɻͦͷؾʹͳΕ͹ΞΫ ηεͰ͖Δ - ந৅Ϋϥε / ந৅ϝιουΛఆٛͰ͖Δ - InterfaceΛ࣮૷Ͱ͖Δ 39

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

any - ʮ͢΂ͯͷܕͱͯ͠ৼΔ෣͏͜ͱ͕Ͱ͖ΔʯͨΊɺܕʹؔ͢Δίϯύ ΠϧΤϥʔ͕͢΂ͯ཈ࢭ͞Ε·͢ - any͸TypeScriptʹ͓͚ΔඞཁѱͰ͢ɻ࢖͏ͱ͖͸ࡑѱײͰ৺Λগ͠௧ ΊΔΑ͏ʹ͠·͠ΐ͏ const fn: any = () => 100; const hoge: number = fn; 41

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

୅ೖՄೳͱ͸Կ͔ - assignableͷྫ: - showMessageؔ਺͸ɺจࣈྻܕͰ͋Δmessageͱ͍͏ϑΟʔϧυΛ ࣋ͬͨܕͰ͋Ε͹ɺԿͰ΋୅ೖՄೳ type SomeType = { message: string; }; function showMessage(obj: SomeType) { console.log(obj.message); } showMessage({ message: “Hello!" }); 44

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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; 47

Slide 48

Slide 48 text

Interface v.s. Type alias - લϖʔδͷ IHoge interface ͱ HogeType ʹ͍ͭͯɺPlayground্Ͱ ͷҧ͍Λ୳ͯ͠Έͯ - લϖʔδͷྫʹɺԼهΛ௥هͨ͠ͱ͖ʹͲ͏ͳΔ͔֬ೝͯ͠Έͯ interface IHoge { errorCode: number; } 48

Slide 49

Slide 49 text

Θ͔Βͳ͍ॴ͕͋Δ࣌͸ - ֮͑Δۙಓ͸ɺTypeScriptͰԿ͔Λ࣮૷ͯ͠ΈΔ͜ͱͰ͢ - ެࣜαΠτʢhttp://www.typescriptlang.org/docs/homeʣͷϋϯυϒο ΫΛோΊͯΈΔͷ΋͋Γ - twitterͰ #typescript λάΛ෇͚ͯᄁ͍ͨΒɺ୭͔͕रͬͯ͘ΕΔ͔΋͠ Ε·ͤΜ 49

Slide 50

Slide 50 text

ԋश 1 50

Slide 51

Slide 51 text

ԋशͷલʹ - ։ൃ؀ڥ͕੔͍ͬͯΔ͜ͱΛ֬ೝ͠·͠ΐ͏ - ҎԼͷίϚϯυ͸ར༻ՄೳͰ͔͢ʁ - git - node --version - ΤσΟλ: - ͩ͜ΘΓ͕ແ͚Ε͹ɺVisual Studio Code Λ࢖͍ͬͯͩ͘͞ 51

Slide 52

Slide 52 text

ԋश1 - JavaScriptฤͰ࣮૷ͨ͠ToDo MVCͷαʔόʔαΠυͷίʔυʹܕΛ͚ͭ ͯΈ͍ͯͩ͘͞ 52

Slide 53

Slide 53 text

ԋशͷ΍Γํ - repositoryΛclone - https://github.com/recruit-tech/bootcamp-2020-ts.git - cd server - npm i typescript -D - npm i @types/express @types/body-parser -D - npx run tsc —init - .jsϑΝΠϧΛ.tsϑΝΠϧʹϦωʔϜ͢Δ 53 +4ฤͰ࡞Γ͖Ε͍ͯΔͷͰ͋Ε͹ɺ ͦͷίʔυΛ࢖ͬͯ ͜ͷίϚϯυʹ͍ͭͯ͸ޙͰղઆ͠ ·͢

Slide 54

Slide 54 text

ԋशͷ΍Γํ - npx tsc Ͱ.tsϑΝΠϧ͔Β.jsϑΝΠϧ΁τϥϯεύΠϧ͞Ε·͢ - ͍͔ͭ͘ίϯύΠϧΤϥʔ͕ग़Δ͸ͣͳͷͰɺιʔείʔυΛฤू͠ ͯɺΤϥʔΛ0݅ʹͯ͠Έ·͠ΐ͏ - ʢۃྗ any ʹ͸པΒͳ͍Ͱ΍ͬͯΈͯʣ 54

Slide 55

Slide 55 text

ʢิ଍ʣtsconfig.jsonʹ͍ͭͯ - TypeScriptͷઃఆ͸ϓϩδΣΫτϧʔτ഑Լͷtsconfig.jsonʹهड़͠·͢ - ͜ͷԋशͰॻ͖׵͑ΔՕॴɿ - target: “es2020” - ࠔͬͨΒ https://www.typescriptlang.org/v2/ja/tsconfig ΛಡΜͰͩ͘͞ ͍ 55

Slide 56

Slide 56 text

ʢิ଍ʣrequireͱimport - Node.jsͷrequireߏจͷ୅ΘΓʹɺES2015ͷimportจΛ࢖͏Α͏ʹͯ͠ ͍ͩ͘͞ - TypeScriptʹ͓͚ΔʮϞδϡʔϧʯʹ͍ͭͯ͸ผ్ޙड़͠·͢ const express = require("express"); import express from "express"; 56 module.exports = router; export default router;

Slide 57

Slide 57 text

ܕͷૢ࡞ 57

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Type error - JavaScriptͷϓϩάϥϜͰ΋ͬͱ΋සൟʹੜ͡Δόά͸ɺnull ·ͨ͸ະఆ ٛͷม਺ʹରͯ͠ɺ஋͕ଘࡏ͢ΔલఏͰΞΫηεͯ͠͠·͏έʔεͰ͢ - ʢ༨ஊʣALGOL WੜΈͷ਌Ͱ͋ΔTony Hoareᐌ͘ʮNullࢀর͸࠷େͷ ޡΓͩͬͨɻίϯύΠϧͰ͢΂ͯνΣοΫͰ͖ΔΑ͏ʹ͔ͨͬͨ͠ʯ - https://www.infoq.com/presentations/Null-References-The-Billion-Dollar-Mistake-Tony- Hoare/ 59 Uncaught TypeError: Cannot read property ‘hoge' of undefined

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Optional - ΦϓγϣϯͷstrictNullCheck͕trueͷ৔߹ɺoptionalͳ஋Λ͍͖ͳΓૢ ࡞͠Α͏ͱ͢ΔͱTypeScript͕ίϯύΠϧΤϥʔʹͯ͘͠Ε·͢ ʢίϯύΠϧΤϥʔ͸͝๙ඒͩͱࢥ͍·͠ΐ͏ʣ function fn(args: { message?: string}) { // ࣄલʹargs.messageͷଘࡏΛνΣοΫ͢Δඞཁ͕͋Δ if (!args.message) return ""; return args.message.toLowerCase(); } fn({}); // messageΛলུՄೳ 61

Slide 62

Slide 62 text

ͦͷଞͷOptionalදݱ - ϓϩύςΟ໊ޙͷ ? Ҏ֎ʹ΋Optionalม਺Λදݱ͢Δํ๏͕͋Γ·͢ - ※ ύΠϓه߸ͷҙຯ͸ޙड़͠·͢ // ؔ਺ͷoptionalҾ਺ function hoge(a: number, b?: number) { } // null ΍ undefined ͱͷUnion type X = string | undefined; type Y = string | null;

Slide 63

Slide 63 text

strictNullCheck ʹ͍ͭͯ - strictNullChecks͸ɺࢀর͍ͯ͠Δ஋ͷܕʹnull ·ͨ͸ undeﬁned͕୅ೖ Մೳͳ৔߹ʹɺͦͷ஋ͷૢ࡞Λ੍ݶ͢ΔػೳͰ͢ - TypeScriptͷσϑΥϧτઃఆͰ͸ɺstrictNullCheck͸ONͰ͢ - جຊతʹ͸༗ޮʹ͓͍ͯͨ͠ํ͕ྑ͍ػೳͰ͕͢ɺطଘͷJavaScriptϓ ϩδΣΫτʹޙ෇ͰTypeScriptΛಋೖ͢Δ৔߹͸ɺҰ୴offʹ͢Δͷ΋Ξ ϦͰ͢ 63

Slide 64

Slide 64 text

Modifiers - ܕఆٛͰͷ ? ͸optional modifierͱݺ͹Ε·͢ - modifierʹ͸optionalҎ֎ͷmodifierͱͯ͠ɺreadonlyͱ͍͏ͷ΋͋Γ· ͢ʢʮSoftͳʯ࣮૷Ͱ͋ΔͨΊɺτϥϯεύΠϧޙͷjs͔Β͸ॻ͖׵͑Մೳʣ type Hoge = { m1: string; m2?: string; readonly m3: string; readonly m4?: string; }; 64

Slide 65

Slide 65 text

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 65

Slide 66

Slide 66 text

Slide 67

Slide 67 text

ܕͷߜΓࠐΈ - 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()); } } 67

Slide 68

Slide 68 text

Type Guardͷछྨ - ͍͔ͭ͘ͷߏจ͕Type Guardͱͯ͠ར༻Ͱ͖·͢ɿ - typeof x === “string”, x instanceof HogeClass - Literal typeʹ͓͚Δಉ஋֬ೝʢ if (x === “some message”) ʣ - obj.x ΍ obj[“x”] ΍ x in objͳͲͷଘࡏ֬ೝ - User Deﬁned Type Guard function: function fn(x: any): x is { msg: string } { return x.msg && typeof x.msg === "string"; } 68

Slide 69

Slide 69 text

ϛχԋश̍ - ҎԼͷؔ਺͸ type ʹԠͯ͡ɺpayload ͷܕ͕ҟͳΓ·͢ɻ ίϯύΠϧ͕௨ΔΑ͏ʹɺAction ͷܕΛߟ͑ͯΈͯ 69 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; } };

Slide 70

Slide 70 text

ϛχԋश̎ - ࣍ͷίʔυ͸੺Լઢ෦෼ͰίϯύΠϧΤϥʔͱ͞Εͯ͠·͍·͢ɻԿ ނͰ͠ΐ͏͔ʁ 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, ); } 70

Slide 71

Slide 71 text

Ωϟετ - จࣈྻͷ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

Slide 72

Slide 72 text

Ωϟετ - ͜ͷΑ͏ͳ৔߹ɺม਺ͷޙΖʹ as ܕ໊ Λ෇༩͢Δ͜ͱͰܕΛม׵Ͱ͖ ·͢ʢਖ਼ࣜʹ͸ ΩϟετͰ͸ͳ͘ɺType assetion ͱݺ͹ΕΔػೳʣ 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;

Slide 73

Slide 73 text

asͷ੍໿ - asͰม׵Ͱ͖Δͷ͸ɺSupar type → Sub type ͷ৚͕݅ຬͨ͞ΕΔͱ͖ ͷΈͰ͢ - e.g. numberܕ͸stringܕʹม׵Ͱ͖·ͤΜ Supar type Sub type type SomeString string

Slide 74

Slide 74 text

Intersection type - Union type͸ܕͱܕͷ࿨Ͱ͕͢ɺܕͱܕͷੵ΋ଘࡏ͠·͢ - ه߸ & Ͱෳ਺ͷܕΛ࿈݁͢ΔͱɺIntersection typeʹͳΓ·͢ - type A & B ͸ɺʮAʹ΋Bʹ΋assignableʯͳܕͰ͢ 74

Slide 75

Slide 75 text

Bottom type - neverܕ͸ʮ͢΂ͯͷܕͷsubtypeʯͱͯ͠ѻΘΕ·͢ɻ͢΂ͯͷܕ͕ never΁୅ೖͰ͖·͕͢ɺnever͸neverҎ֎ͷ͢΂ͯͷܕʹ୅ೖͰ͖· ͤΜ - Type Guardͷ݁Ռɺneverܕʹਪ࿦͞ΕΔϒϩοΫ͸ʮ౸ୡෆՄೳʯͱ ͍͏ҙຯʹͳΓ·͢ function fn(x: number) { if (typeof x === "string") { return x.trim(); } return x; } 75

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Composition never - Լهͷܕ A ɺB ͸ͦΕͧΕͲΜͳܕͰ͠ΐ͏ʁ (X͸Կ͔ద౰ͳܕͱ͠·͢ʣ type A = never | X; type B = never & X; 77

Slide 78

Slide 78 text

Unknown type - unknown ͸ anyͷ਌ੰͷΑ͏ͳ΋ͷͰ͢ - ͢΂ͯͷܕ͕unknownʹassignableɺͱ͍͏఺Ͱ͸anyͱҰॹͰ͕͢ɺ type assertion͠ͳ͍ͱར༻ෆՄೳͱ͍͏఺ͰanyͱҟͳΓ·͢ 78

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Generics type List = T[]; function getLength(list: List) { list.length; } interface IFoo { list: ReadonlyArray; } class Foo implements IFoo { constructor(public readonly list: T[]){ } get size() { return getLength(this.list); } } const foo = new Foo([""]); 80

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

ԋश2 83

Slide 84

Slide 84 text

ԋश2 - JavaScriptฤͰ࣮૷ͨ͠ Todo MVC ΞϓϦέʔγϣϯͷϒϥ΢βଆͷ ίʔυʹܕΛ͚͍ͭͯͩ͘͞ 84

Slide 85

Slide 85 text

ԋशͷ΍Γํ - repositoryΛcloneʢԋश1ͱಉ͡ͱ͜Ͱ͢ - https://github.com/recruit-tech/bootcamp-2020-ts.git - cd client - npm init -y - npm i typescript -D - npx run tsc —init - js/**/*.jsΛ.tsʹॻ͖׵͑Δ - npx run tsc --watch 85

Slide 86

Slide 86 text

ʢิ଍ʣtsconﬁg.jsonʹ͍ͭͯ - ͜ͷԋशͰॻ͖׵͑ΔՕॴɿ - module: “esnext” - target: “es2020” 86

Slide 87

Slide 87 text

ʢิ଍ʣimport / export - TypeScriptʹ͓͚ΔʮϞδϡʔϧʯʹ͍ͭͯ͸ผ్ޙड़͠·͢ - ͜ͷԋशͰ͸ɺES2015ͷ import / export ߏจ͕ͦͷ··ར༻Ͱ͖· ͢ɻಛʹ import จ΍ export จΛॻ͖׵͑Δඞཁ͸͋Γ·ͤΜ 87

Slide 88

Slide 88 text

ʢิ଍ʣඪ४ APIͱTypeScript - TypeScript ࣗମʹඪ४ APIͷܕ͕όϯυϧ͞Ε͍ͯ·͢ - JavaScriptʢECMAScriptʣͷඪ४ API - DOM API΍fetchͳͲɺϒϥ΢βʹඪ४ͰඋΘ͍ͬͯΔAPI 88

Slide 89

Slide 89 text

;Γ͔͑Γ - ԋश1 ͱ ԋश2 Λ௨ͯ͠ɺαʔόʔαΠυɺϒϥ΢βαΠυͷίʔυΛ ܕͰकΔ͜ͱ͸Ͱ͖·ͨ͠ - ͱ͜ΖͰɺϒϥ΢βͱαʔόʔ͕௨৴͍ͯ͠Δ෦෼͸Ͳ͏Ͱ͠ΐ͏͔ʁ - req.bodyʢαʔόʔଆʣ΍ɺfetchͷ໭Γ஋ʢϒϥ΢βଆʣʹҰ؏ੑ͸ ͋Γ·͔͢ʁ

Slide 90

Slide 90 text

΋ͬͱߴ౓ͳܕ 90

Slide 91

Slide 91 text

Advanced type - ࠓ೔͸ׂѪ͠·͕͢ɺܕγεςϜʹ͸ΑΓߴ౓ͳػೳ΋༻ҙ͞Ε͍ͯ· ͢ - Mapped type: objectܕͷkeyΛ࠶ར༻ͯ͠ผͷܕΛ࡞Δ - Conditional type: ୅ೖՄೳੑͰܕΛύλʔϯϚον - Type inference in conditional type: ύλʔϯϚονͨ͠ܕͷ࠶ར༻ 91

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

ϥΠϒϥϦͷܕఆٛ 95

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

1. NPM ύοέʔδʹܕఆ͕ٛಉ ࠝ͞Ε͍ͯΔ - npm install (ϥΠϒϥϦ໊) Λ࣮ߦ͢Δ͚ͩͰܕఆ͕ٛར༻ՄೳʹͳΓ· ͢ - ͜ͷखͷ΍ͭ͸ɺϥΠϒϥϦͷpackage.jsonʹ “types”: “index.d.ts” ͱ ͍ͬͨهड़͕͋Γ·͢ 100

Slide 101

Slide 101 text

2. NPMύοέʔδʹରԠ͢ΔܕఆٛΛ ୈ3ऀ͕ఏڙ͍ͯ͠Δέʔε - ળҙͷୈ3ऀ͕ܕఆٛΛผ్ఏڙͯ͘͠Ε͍ͯΔέʔε͕͋Γ·͢ - https://github.com/DeﬁnitelyTyped/DeﬁnitelyTyped - npm i @types/(ϥΠϒϥϦ໊) ͰΠϯετʔϧ͠·͢ 101

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

ܕఆٛϑΝΠϧͷ஫ҙ - ఏڙ͞Εͨܕఆ͕ٛຊମͷAPIΛ໢ཏ͍ͯ͠ͳ͍͜ͱ΋ɺ··͋Γ·͢ - e.g. ಛఆͷؔ਺ͷܕఆ͕ٛͬͦ͝Γൈ͚ͯΔ / anyͩΒ͚ / etc… - ͜ͷखͷέʔεʹ௚໘ͨ͠ΒɺܕఆٛΛमਖ਼͢ΔPRΛग़͠·͠ΐ͏ 104

Slide 105

Slide 105 text

௥Ճ՝୊ - ԋश1͕ૣ͘௥ΘͪΌͬͨਓ޲͚ - expressʹ͸ϛυϧ΢ΣΞͱ͍͏࢓૊ΈͰɺϢʔβʔଆͰ Request / ResponseͷΦϒδΣΫτΛ֦ுͰ͖·͢ const app = express(); app.use((req, res, next) => { req.isAuthenticated = true; next(); }); app.get("/api/v1/todos", (req, res) => { console.log(req.isAuthenticated); // ͦͷଞͷॲཧ }); ͜ͷ෦෼͕ϛυϧ΢ΣΞ ϛυϧ΢ΣΞͰ௥Ճ͞ΕͨϑΟʔϧυ 105

Slide 106

Slide 106 text

௥Ճ՝୊ - લϖʔδͷίʔυ͸ɺRequestʹਅِ஋ܕͷ isAuthenticated ͱ͍ ͏ϓϩύςΟΛੜ΍ͨ͠ྫͰ͢ - ͜ͷίʔυΛTypeScriptͰίϯύΠϧΤϥʔͱͳΒͳ͍Α͏ʹ͢Δʹ͸ Ͳ͏͢Ε͹͍͍Ͱ͠ΐ͏͔ʁ - ώϯτ: Ambient namespace 106

Slide 107

Slide 107 text

TypeScriptͱ Ϟδϡʔϧ 107

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

CommonJSͷϞδϡʔϧ // calc.js // ϞδϡʔϧΛར༻͢Δଆ const add = require("./add"); console.log(add(1, 2)); // add.js // ϞδϡʔϧΛఆٛ͢Δଆ function add(a, b) { return a + b; } module.exports = add;

Slide 112

Slide 112 text

Module loader - ES2015 ϞδϡʔϧͰ͋ΕɺಠࣗܗࣜͰ͋ΕɺϞδϡʔϧԽ͞Εͨ JavaScriptΛऔΓࠐΉ࢓૊Έ͕ඞཁͰ͢ - λά΍ɺNode.jsͷrequireػߏͳͲ - ϞδϡʔϧΛಡΈࠐΉ࢓૊Έ͸ʮϞδϡʔϧϩʔμʔʯͱݺ͹Ε·͢ 112

Slide 113

Slide 113 text

--module - ར༻ՄೳͳϞδϡʔϧϩʔμʔ͸ɺjsΛ࣮ߦ͢Δ؀ڥʹΑͬͯҟͳͬͯ͠ ·͏ͷ͕ݱঢ়Ͱ͢ - TypeScript͸ɺ͜ΕΒͷ࣮ߦ؀ڥࠩҟΛٵऩ͢ΔͨΊʹɺ - ιʔείʔυ͸ES2015ελΠϧͰهड़ - tsconﬁg.jsonͷmoduleઃఆͰɺϥϯλΠϜͰར༻͢ΔϞδϡʔϧϩʔ μʔΛઃఆɻτϥϯεύΠϧͰม׵͞ΕΔ 113

Slide 114

Slide 114 text

--module - moduleઃఆͷ࢖͍෼͚ྫ - ԋश1Ͱ͸ɺNode.jsͰಈ࡞ͤ͞ΔͨΊʹ module: “commonjs”Λઃ ఆ - ԋश2Ͱ͸ɺϒϥ΢βͷػೳΛ࢖ͬͯಡΈ ࠐΉͨΊʹɺ module: “esnext”Λઃఆ 114

Slide 115

Slide 115 text

ʢ༨ஊʣଞͷ--moduleୡ - --module ʹ͸ “amd” / “umd” / “system” ͷ஋΋બ୒ՄೳͰ͢ɻ…͕໓ଟ ʹ࢖͏͜ͱ͸ͳ͍Ͱ͢ - ڵຯ͕͋ͬͨΒɺ“RequireJS” ͱ͔ “SystemJS” Ͱௐ΂ͯΈΔͱྑ͍ͱࢥ ͍·͢ 115

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

TypeScriptͱͯ͠ͷϞδϡʔϧ - Ϟδϡʔϧͱͯ͠ղऍ͞ΕΔ.tsϑΝΠϧ - ϞδϡʔϧʹͳΒͳ͍.tsϑΝΠϧ /* types.ts */ // Todo ΠϯλʔϑΣΠε͸Ͳ͔͜ΒͰ΋ࢀরՄೳ interface Todo { name: string; } /* types.ts */ // Todo ΠϯλʔϑΣΠε import ͠ͳ͍ͱࢀরͰ͖ͳ͍ export interface Todo { name: string; } 117

Slide 118

Slide 118 text

TypeScriptͱϏϧυΤ ίγεςϜ 118

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

๲Ε্͕Δ.js - ΑΓϦονͳମݧ͕webʹٻΊΒΕΔʹͭΕɺಡΈࠐ·ΕΔJavaScript ϑΝΠϧ͸ॏް௕େԽͷҰ్ΛḷΓ·͢ɻ͜Εʹ൐͍৭ʑͳ՝୊͕ු্͠ ·ͨ͠ - μ΢ϯϩʔυ͞ΕΔϑΝΠϧͷαΠζΛݮΒ͍ͨ͠ - ϑΝΠϧΛ෼ׂͯ͠։ൃ͍͕ͨ͠ɺλάͷಡΈࠐΈճ਺͸গͳ ͍ͨ͘͠ - ผݴޠʢAltJSʣͰޮ཰తʹ։ൃ͍ͨ͠ - etc… 120

Slide 121

Slide 121 text

Ϗϧυπʔϧͷཚཱ - Ϟδϡʔϧϩʔμʔ - CommonJS (Node.js) ελΠϧ, RequireJSελΠϧ, etc… - ϏϧυγεςϜ - Grant, Gulp, etc… - ѹॖʢ೉ಡԽʣπʔϧ - YUI Compressor, ClosureCompiler, UglifyJS, etc… 121

Slide 122

Slide 122 text

Ϗϧυπʔϧͷཚཱ - Ϟδϡʔϧϩʔμʔ - CommonJS (Node.js) ελΠϧ, RequireJSελΠϧ, etc… - ϏϧυγεςϜ - Grant, Gulp, etc… - ѹॖʢ೉ಡԽʣπʔϧ - YUI Compressor, ClosureCompiler, UglifyJS, etc… 122 ͱʹ͔͘৭ʑ͋ͬͨʂ

Slide 123

Slide 123 text

Module bundler - αʔόʔαΠυJavaScriptͰ͋ΔNode.jsͷීٴͱɺ Node.jsʹ͓͚ΔϞδϡʔϧػߏʹΠϯεύΠΞ͞Ε ͯɺbrowserifyͱ͍͏πʔϧ͕ҰੈΛ෩ᴆ͠·ͨ͠ - ιʔείʔυதͷ require(‘…’) Λ੩తղੳͰ୳ࡧ͠ɺ require͞Ε͍ͯΔґଘscriptΛ݁߹͢Δ͜ͱͰɺ୯Ұ ͷ.jsϑΝΠϧΛੜ੒͠·͢ 123

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

webpack - webpack ͸ۙ೥޿͘࢖ΘΕ͍ͯΔϞδϡʔϧόϯυϥͰ͢ - https://webpack.js.org/ - JavaScript / AltJS͚ͩͰͳ͘ɺը૾΍CSSͳͲ༷ʑͳϑΝΠ ϧΛΞηοτͱͯ͠όϯυϧϑΝΠϧʹऔΓࠐΊ·͢ 125

Slide 126

Slide 126 text

webpack - webpackͰͰ͖Δ͜ͱʢҰ෦ൈਮʣ: - AltJSΛτϥϯεύΠϧͭͭ͠ɺόϯυϧΛ࡞੒͢Δ - όϯυϧʹରԠ͢ΔιʔεϚοϓϑΝΠϧΛ࡞੒͢Δ - ೉ಡԽΛࢪͯ͠࠷ऴతͳϑΝΠϧαΠζΛখ͘͢͞Δ - Node.jsͷAPIΛҰ෦ϒϥ΢β޲͚ʹఏڙ͢Δ 126

Slide 127

Slide 127 text

࠷ۙͷࣄ৘ - ۙ೥Ͱ͸ɺECMAScriptͷimport/exportߏจ΍ϒϥ΢βͷͱ͍ͬͨඪ४Խ͕ਐΈɺόϯυϥʹཔΒͳ͘ͱ΋Ϟ δϡʔϧΛར༻Մೳʹͳ͖ͬͯ·ͨ͠ʢIEআ͘ʣ - ͱ͸͍͑ɺimport ͷ࿈࠯͕ਂ͘ͳΔͱɺϒϥ΢β͕࠷ޙͷϞδϡʔϧʹ ౸ୡ͢Δ·Ͱʹ͕͔͔࣌ؒͬͯ͠·͍·͢※1 ɻ͜ͷҙຯͰɺϑΝΠϧΛ ·ͱΊΔϞδϡʔϧόϯυϥ͸౰෼ඞཁͱ͞Ε͚ͭͮΔͰ͠ΐ͏ - ※1 https://docs.google.com/document/d/1ds9EEkcDGnt-iR8SAN-_7nsOfw7gsMfhZjzZ_QAIyjM/ mobilebasic 127

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

ԋश3 129

Slide 130

Slide 130 text

ԋश3 - ԋश1Ͱ࣮૷ͨ͠todoMVCΞϓϦΛwebpackͰ୯Ұͷ.jsϑΝΠϧʹͯ͠ ͍ͩ͘͞ - Chromeͷ։ൃऀπʔϧͰɺ΋ͱͷTypeScriptίʔυͷιʔεϚοϓΛද ࣔͰ͖ΔΑ͏ʹͯ͠Έ͍ͯͩ͘͞ 130

Slide 131

Slide 131 text

t ୯ҰͷKTϑΝΠϧ ιʔεϚοϓ

Slide 132

Slide 132 text

ԋशͷ΍Γ͔ͨ - repositoryΛcloneʢԋश2ͱಉ͡ͱ͜Ͱ͢ - https://github.com/recruit-tech/bootcamp-2020-ts.git - cd client - npm i webpack webpack-cli ts-loader -D 132

Slide 133

Slide 133 text

ԋशͷ΍Γ͔ͨ - webpack.conﬁg.jsͱ͍͏ઃఆϑΝΠϧͷ࡞੒͕ඞཁͰ͢ - https://webpack.js.org/guides/typescript/ ͳͲΛಡΈͭͭਐΊͯΈͯ ͍ͩ͘͞ 133

Slide 134

Slide 134 text

Α͘Ұॹʹ࢖ΘΕΔ πʔϧୡ

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

ESLint - ESLint ͸ASTʢந৅ߏจ໦ʣΛ༻͍ͨίʔυͷνΣοΫπʔϧͰ͢ɻې ࢭ͍ͨ͠ίʔυύλʔϯΛϧʔϧͱͯ͠ొ࿥ͯ͠ར༻͠·͢ - ϧʔϧͷྫ: - consoleΛ࢖Θͳ͍͜ͱ - ࠶୅ೖ͠ͳ͍ม਺ʹ͸letͰ͸ͳ͘constΛ༻͍Δ͜ͱ - TypeScriptͱESLintΛซ༻͢Δ৔߹ɺhttps://github.com/typescript- eslint/typescript-eslint Λ࢖͍·͢

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

͓ΘΓʹ

Slide 140

Slide 140 text

͓ΘΓʹ - ࠓ೔͸ԼهͳͲΛத৺ʹֶΜͰ͖·ͨ͠ - TypeScriptͷجຊจ๏ - طଘͷJavaScriptίʔυʹܕΛಋೖ͢Δํ๏ - TypeScriptͷϓϩδΣΫτʹ͓͚ΔϏϧυͷํ๏ - ࣌ؒͷ౎߹্ɺ৮Ε͍ͯͳ͍τϐοΫ΋·ͩ୔ࢁ͋Γ·͢ɻؾʹͳΔ ςʔϚ͕͋ͬͨΒɺੋඇࣗ෼Ͱௐ΂ɺʢՄೳͰ͋Ε͹ʣखΛಈ͔ͯ͠Έ ͍ͯͩ͘͞