TypeScript入門 〜型のあるモダンなJavaScript〜

社内で開催したTypeScript入門の勉強会資料

Transcript

1. ϑ ϩ ϯ τ Τ ϯ υ Τ Ω ε ύ ʔ τ ν ʔ Ϝ ֎ দ ढ़ ঘ TypeScriptೖ໳ ʙܕͷ͋ΔϞμϯͳJavaScriptʙ FrontendBar#6 2019/4/19ɹ
2. TypeScriptೖ໳ ʙܕͷ͋ΔϞμϯͳJavaScriptʙ
3. •ॻ͍ͨ͜ͱ͋ΔΑ •ฉ͍ͨ͜ͱͳΒ •ࠓճॳΊͯ஌ͬͨ TypeScript
4. •TypeScriptͬͯͳʹʁ •ܕͷ͋ΔJavaScript •TypeScriptͷػೳ/ॻ͖ํ •࣮ࡍͷ։ൃ؀ڥ΍TypeScriptΛ࢖ͬͨίʔσΟϯά •͍Ζ͍Ζ৔໘ͰͷTypeScript ࠓ೔ ࿩͢͜ͱ
5. •ʮTypeScriptͳΜͱͳ͘Θ͔ͬͨʂʯ •ʮ࣍ɺ৽͘͠JavaScriptΛ࢖͏ϓϩδΣΫτͰ͸
 TypeScript࢖ͬͯΈΔͧʯ •ʮ͍·खݩʹ͋ΔJavaScriptͷϓϩδΣΫτΛ
 TypeScriptʹॻ͖׵͑ͯΈΑ͏͔ͳ…ʯ ࠓ೔ͷΰʔϧ
6. TypeScriptͬͯͳʹʁ 1
7. TypeScript….ܕΛ࣋ͬͨJavaScriptͷεʔύʔηοτ ɹɹMicrosoftʹΑͬͯ։ൃ͞Εɺϝϯςφϯε͞Ε͍ͯΔ ɹɹΦʔϓϯιʔεͷ੩తܕ෇͖ϓϩάϥϛϯάݴޠ TypeScript
8. ͬ͘͟ΓΠϝʔδͰ͍͏ͱ ಉ͡ΧΤϧ͚ͩͲ…
9. ͬ͘͟ΓΠϝʔδͰ͍͏ͱ JavaScript͸ greeter.js
10. ͬ͘͟ΓΠϝʔδͰ͍͏ͱ TypeScript͸ greeter.ts
11. ͬ͘͟ΓΠϝʔδͰ͍͏ͱ TypeScript͸ greeter.ts
12. TypeScript͸JavaScriptʹՃ͑ͯ ܕΛ͍࣋ͬͯΔ ΄ͱΜͲJavaScript ͚ͩͲͶ ܕʹ͍ͭͯ͸͜ͷ͋ͱઆ໌͢ΔΑ
13. TypeScript͸ίϯύΠϧ͢Δͱ
 JavaScriptʹͳΔ ม׵
 (ίϯύΠϧ) ੜ੒͞ΕͨJavaScript͸͍ͭ ΋Ͳ͓Γϒϥ΢βͰಈ͘ greeter.ts greeter.js $ tsc greeter.ts
14. TypeScript Playground https://www.typescriptlang.org/play/
15. •TypeScript͸͍·ͱͯ΋ීٴ͍ͯ͠·͢ •̍͜͜೥͘Β͍Ͱ৽͘͠࡞ΔϓϩδΣΫτ͸͍͍ͩͨ TypeScriptͳΠϝʔδ •͜Ε·ͰJavaScriptΛ࢖͍ͬͯͨΑ͏ͳγνϡΤʔγϣϯͰ͸ ͱΓ͋͑ͣTypeScript σϑΝΫτʹͳΓͭͭ͋ΔTypeScript ͱʹ͔͘DX͕ ্͕Δ
16. npm trends
17. ʰTypeScriptΛಋೖ͢΂͖͔ʱ Ͱ೰Ή࣌୅͸طʹऴΘ͍ͬͯΔ “ ͱ͍͏ҙݟ΋͋Δ
18. •JavaScriptΛ࢖͏γνϡΤʔγϣϯͳΒ
 TypeScript(TS)͕࢖͑Δ Ex: WebͷϑϩϯτΤϯυɺNodejs + TypeScript, React/Vue/Anguler + TS, kintone customize JavaScript࢖͑ΔͳΒTypeScriptͰ
19. ܕͷ͋ΔJavaScript 2
20. TypeScript….ܕΛ࣋ͬͨJavaScriptͷεʔύʔηοτ ɹɹMicrosoftʹΑͬͯ։ൃ͞Εɺϝϯςφϯε͞Ε͍ͯΔ ɹɹΦʔϓϯιʔεͷ੩తܕ෇͖ϓϩάϥϛϯάݴޠ TypeScript ࠶ܝ
21. •ܕ͸ɺͲ͏͍͏छྨͷσʔλ/஋͔ʁͱ͍͏৘ใ •person.firstName͸Ͳ͏͍͏छྨͷσʔλʁ •͜Ε͘Β͍ͩͬͨΒจࣈྻͩͱΘ͔Δ ܕʁ greeter.js
22. •num, digit͸ʁ •n, m, s͸ͲΜͳσʔλ͕ೖͬͯͦ͏ʁ •৽͘͠ݟͨਓ͸ݺͼग़͠ଆΛݟͳ͍ͱ෼͔Βͳ͍ •ਓ͕͓͔֮͑ͯͳ͍ͱ͍͚ͳ͍ ෳࡶͳ৔߹͸ʁ
23. •࣮ߦ͠ͳͯ͘΋ɺͲΜͳछྨͷσʔλ͕ೖ͍ͬͯΔ͔෼͔Δ ܕ͕͋Δͱ greeter.ts
24. •ؒҧ͑ͨ࢖͍ํΛͨ͠ΒϦΞϧλΠϜͰΤσΟλ͕ڭ͑ͯ͘ΕΔ ܕ͕͋Δͱ
25. ܕͷྫ@TypeScript ਅِ஋ܕ จࣈྻܕ ഑ྻܕ ਺஋ܕ ͳΜͰ΋ܕ
26. ݁ہܕ͕͋ΔͱԿ͕خ͍͠ʁ ϦϑΝΫλ͕༰қ େن໛։ൃͰ΋҆શ ೖྗͷิ׬ Τϥʔ΍ϛεΛΤσΟλ্Ͱݕग़ ࣮ߦ͠ͳͯ͘΋෼͔Δ DX(։ൃͷੜ࢈ੑ)͕޲্͢Δʂ TypeScriptΛ࢖͏ͱԿ͕خ͍͠ʁ
27. Ͱ΋શ෦ʹܕΛॻ͘ͷ͸໘౗… •TypeScript͸ܕਪ࿦ͱ͍͏ػೳ͕͋Γ·͢ •ܕΛ໌ࣔతʹॻ͔ͳͯ͘΋TypeScript͕উखʹ
 ʮ͜Ε͸false୅ೖͯ͠Δ͔ΒbooleanܕͶɻʯͱ൑அͯ͘͠ΕΔ •ͭ·ΓܕΛॻ͔ͳͯ͘΋ɺͱΓ͋͑ͣTypeScriptʹ͓͚ͯ͠͹
 ܕνΣοΫͷԸܙ͸ड͚ΒΕΔ
28. Α͠ʂTypeScriptಋೖ͠Α͏ •JavaScriptͰॻ͍͍ͯΔϓϩδΣΫτʹTypeScriptΛಋೖ͢Δ
 ϋʔυϧ͸ͱͯ΋௿͍ •JavaScript͸TypeScriptͰ΋͋Δ •͢΂ͯͷJavaScript͸ɺߏจతʹ͸TypeScriptͱͯ͠ਖ਼͘͠ɺ
 ίϯύΠϧͯ͠΋ݩͷJavaScriptͱಉ͡ৼΔ෣͍Λ͢Δ •ίϯύΠϧΤϥʔ͕͋ͬͯ΋JS͸ੜ੒͞ΕΔ
29. TypeScriptͷػೳ/ॻ͖ํ 3
30. https://stackblitz.com/ ϒϥ΢β্Ͱ͙͢ʹ ࢼͤΔΑ
31. ܕͷએݴ •ޙஔλΠϓͷܕΞϊςʔγϣϯ •ม਺΍ؔ਺ύϥϝʔλͷ͋ͱʹ : ܕ
 ͱ͍ͬͨ෩ʹॻ͘ ؔ਺ύϥϝʔλ ม਺ ؔ਺ͷ໭Γ஋
32. ܕͷએݴ Φϓγϣϯύϥϝʔλ ϢχΦϯܕ = จࣈྻܕ·ͨ͸਺஋ܕ
33. جຊతͳܕ •جຊతͳσʔλܕ͸༻ҙ͞Ε͍ͯΔ ਅِ஋ܕ จࣈྻܕ ഑ྻܕ ਺஋ܕ ͳΜͰ΋ܕ ฦΓ஋ͳ͠ ΦϒδΣΫτܕ
34. ࣗ෼ͰܕΛఆٛ͢Δ •جຊతͳܕ͚ͩͰ͸ෆे෼ •ࣗ෼ͷϓϩάϥϜʹԠͨ͡ܕ ͕ཉ͍͠ •interface ΍ type ΩʔϫʔυΛ ࢖ͬͯܕΛఆٛ͢Δ
35. kintone ΦϒδΣΫτͷܕΛఆٛ͢Δͱ
36. TypeScriptʹ͸͍Ζ͍Ζͳػೳ͕͋Δ •࠷ॳ͸ෳࡶͳ͜ͱ͸͠ͳ͍͍ͯ͘ͷͰɺগͣͭ͠ศརͳػೳΛ
 ͍͚֮͑ͯ͹͍͍ɻ •ΤσΟλౖ͕ͬͯ͘ΕΔͷͰɺ౎౓ௐ΂Ε͹ͦͷ͏͍֮ͪ͑ͯ͘ ྫʣ TypeGuard, Readonly, Index Signatures, Never Type, TypeAssertion Enum, Generics, Union Type, Intersection Type, Literal Types
37. ࣮ࡍͷ։ൃ؀ڥ΍TypeScript
 Λ࢖ͬͨίʔσΟϯά 4
38. ։ൃ؀ڥ(3Step) 1. $ npm i -D typescript 2. $ npx tsc —init 3. $ npx tsc src/**/*.ts 1. TypeScriptΛΠϯετʔϧ
 ίϯύΠϥͱͯ͠tsc͕ೖ͍ͬͯΔ 2. ઃఆϑΝΠϧ(tsconfig.json)ͷ਽ܗੜ੒ 3. TSϑΝΠϧΛίϯύΠϧɻJS͕ੜ੒͞ΕΔ Step 02 Step 03 Step 01
39. tsconfig.json
40. tsconfig.json ίϯύΠϧͷઃఆ͸tsconfig.jsonʹॻ͘ جຊతʹ͸਽ܗ௨ΓͰOK ੩తܕͷݎ͞ΛॊೈʹઃఆͰ͖Δ ؤுΓͨ͘ͳ͍৔߹͸ɺઃఆͰ؇ΊΔ DOM΍ESͷܕ৘ใ͕ཉ͍͠ͳΒ libͰࢦఆ͢Δ
 ex: ”lib”: ["dom", “es2018”]
41. ݹ͍ES΁ͷม׵ tsconfig.jsonͷtargetͰͲͷECMAScriptͷJavaScriptΛੜ੒͢ Δ͔ࢦఆ͢Δ IE11ʹ΋ରԠ͢ΔͳΒ”es5” ⾠TypeScript͕໘౗ΛݟΔͷ͸Syntax͚ͩ⾠ ϨΨγʔϒϥ΢βʹ͸૬มΘΒͣES6ʙͷػೳ͸ແ͍ͷͰ
 Polyfill͸ผ్ೖΕͳ͍ͱͩΊ(ex:Promise, Array.from) core-jsͳΓɺbabel-polyfillͳΓ
42. ΤσΟλ VSCode΍IntelliJ͸ϓϥάΠϯΛೖΕͳͯ͘΋σϑΥϧτͰ TypeScriptʹରԠ͍ͯ͠Δ ͙͢ิ׬΍ΤϥʔදࣔͷԸܙ͕ड͚ΒΕΔ Vim΍Emacs΋ϓϥάΠϯೖΕΕ͹OK
43. Lint TSLint͸΋͏࢖Θͳ͍ ͜Ε͔ΒTypeScriptͰLintΛೖΕΔͳΒESLintͰOK @typescript-eslint/eslint-pluginΛ࢖͏ @cybozu/eslint-config/presets/typescript΋͋ΔΑ ৄ͘͠͸
 https://teppeis.hatenablog.com/entry/2019/02/typescript-eslint
44. ܕఆٛ ࣗ෼ͰܕఆٛΛॻ͘ͷ͸େม Reactͱ͔ͷϥΠϒϥϦ͸Ͳ͏͢Ε͹͍͍ͷʁʁ ·͔ࣗ͞෼Ͱॻ͘ͷʁ
45. @types ࣗ෼ͰෳࡶͳܕఆٛΛ͢Δඞཁ͸͋Γ·ͤΜ ͍͍ͩͨͷϥΠϒϥϦ͸ܕఆٛϑΝΠϧΛ༻ҙͯ͘͠Εͯ· ͢(Definitely Typed) ͦͷϑΝΠϧΛΠϯετʔϧ͢Δ͚ͩ ྫ͑͹ Reactͷ৔߹ $ npm install -D @types/react kintone CustomizeͳΒ@kintone/dts-gen https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types
46. ͍Ζ͍Ζ৔໘ͰͷTypeScript 5
47. ʓʓ+TypeScript React + TypeScript Nodejs + TypeScript webpack + Babel + TypeScript jquery + TypeScript ReactNative + TypeScript Vue.js + TypeScript Anguler + TypeScript ɹɹɹɹɹɹɹɹɹɹɹɹetc جຊతʹͲ͜Ͱ΋࢖͑ΔΠϝʔδ
48. React + TypeScript React+TypeScriptΛࢼ͢ͳΒɺcreate-react-appͰ؀ڥΛ؆୯ ʹ࡞ΕΔ $ npx create-react-app my-app --typescript
49. QuickStart https://www.typescriptlang.org/samples/index.html ͦΕͧΕΠϯετʔϧ͢ΔϥΠϒϥϦ΍ઃఆํ๏͸ͪ͜ΒΛࢀߟʹ
50. ·ͱΊ TypeScriptΛศརʹ࢖͍ͬͯ͘؀ڥ͸੔͍ͬͯΔ TypeScript ͕ͲΜͳ΋ͷ͔঺հ͠·ͨ͠ TypeScriptͷಋೖϋʔυϧ͸ͱͯ΋௿͍ɻͳͷʹԸܙ͸େ͖͍ ੋඇɺ࣍ʹJavaScriptΛॻ͘Α͏ͳϓϩδΣΫτͰ͸ɺ
 TypeScriptΛೖΕͯΈ͍ͯͩ͘͞
51. ͓·͚
52. •TypeScript Deep Dive ೔ຊޠ൛
 https://typescript-jp.gitbook.io/deep-dive/ •೔ຊޠͰTypeScirptΛҰ௨Γֶ΂Δ •TypeScriptͰkintoneΧελϚΠζ։ൃΛͯ͠ΈΑ͏
 https://developer.cybozu.io/hc/ja/articles/360023293091 •TypeScript࠶ೖ໳ ― ʮ͕Μ͹Βͳ͍TypeScriptʯͰɺ
 JavaScriptΛ“ॊΒ͔͍”੩తܕ෇͖ݴޠʹ
 https://employment.en-japan.com/engineerhub/entry/2019/04/16/103000 •࣮ࡍͷϓϩδΣΫτͰ࢖͏લʹಡΜͰ͓͘ͱྑ͍ TypeScript΍ͬͯ࣌͘ͷ͓͢͢Ί