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

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

Transcript

1. ϑ ϩ ϯ τ Τ ϯ υ Τ Ω ε ύ ʔ τ ν ʔ Ϝ
   ֎ দ ढ़ ঘ
   TypeScriptೖ໳
   ʙܕͷ͋ΔϞμϯͳJavaScriptʙ
   FrontendBar#6 2019/4/19ɹ
   

   View Slide

2. TypeScriptೖ໳
   ʙܕͷ͋ΔϞμϯͳJavaScriptʙ
   

   View Slide

3. •ॻ͍ͨ͜ͱ͋ΔΑ
   •ฉ͍ͨ͜ͱͳΒ
   •ࠓճॳΊͯ஌ͬͨ
   TypeScript
   

   View Slide

4. •TypeScriptͬͯͳʹʁ
   •ܕͷ͋ΔJavaScript
   •TypeScriptͷػೳ/ॻ͖ํ
   •࣮ࡍͷ։ൃ؀ڥ΍TypeScriptΛ࢖ͬͨίʔσΟϯά
   •͍Ζ͍Ζ৔໘ͰͷTypeScript
   ࠓ೔ ࿩͢͜ͱ
   

   View Slide

5. •ʮTypeScriptͳΜͱͳ͘Θ͔ͬͨʂʯ
   •ʮ࣍ɺ৽͘͠JavaScriptΛ࢖͏ϓϩδΣΫτͰ͸

   TypeScript࢖ͬͯΈΔͧʯ
   •ʮ͍·खݩʹ͋ΔJavaScriptͷϓϩδΣΫτΛ

   TypeScriptʹॻ͖׵͑ͯΈΑ͏͔ͳ…ʯ
   ࠓ೔ͷΰʔϧ
   

   View Slide

6. TypeScriptͬͯͳʹʁ
   1
   

   View Slide

7. TypeScript….ܕΛ࣋ͬͨJavaScriptͷεʔύʔηοτ
   ɹɹMicrosoftʹΑͬͯ։ൃ͞Εɺϝϯςφϯε͞Ε͍ͯΔ
   ɹɹΦʔϓϯιʔεͷ੩తܕ෇͖ϓϩάϥϛϯάݴޠ
   TypeScript
   

   View Slide

8. ͬ͘͟ΓΠϝʔδͰ͍͏ͱ
   ಉ͡ΧΤϧ͚ͩͲ…
   

   View Slide

9. ͬ͘͟ΓΠϝʔδͰ͍͏ͱ
   JavaScript͸
   greeter.js
   

   View Slide

10. ͬ͘͟ΓΠϝʔδͰ͍͏ͱ
    TypeScript͸
    greeter.ts
    

    View Slide

11. ͬ͘͟ΓΠϝʔδͰ͍͏ͱ
    TypeScript͸
    greeter.ts
    

    View Slide

12. TypeScript͸JavaScriptʹՃ͑ͯ
    ܕΛ͍࣋ͬͯΔ
    ΄ͱΜͲJavaScript
    ͚ͩͲͶ
    ܕʹ͍ͭͯ͸͜ͷ͋ͱઆ໌͢ΔΑ
    

    View Slide

13. TypeScript͸ίϯύΠϧ͢Δͱ

    JavaScriptʹͳΔ
    ม׵

    (ίϯύΠϧ)
    ੜ੒͞ΕͨJavaScript͸͍ͭ
    ΋Ͳ͓Γϒϥ΢βͰಈ͘
    greeter.ts greeter.js
    $ tsc greeter.ts
    

    View Slide

14. TypeScript Playground
    https://www.typescriptlang.org/play/
    

    View Slide

15. •TypeScript͸͍·ͱͯ΋ීٴ͍ͯ͠·͢
    •̍͜͜೥͘Β͍Ͱ৽͘͠࡞ΔϓϩδΣΫτ͸͍͍ͩͨ
    TypeScriptͳΠϝʔδ
    •͜Ε·ͰJavaScriptΛ࢖͍ͬͯͨΑ͏ͳγνϡΤʔγϣϯͰ͸
    ͱΓ͋͑ͣTypeScript
    σϑΝΫτʹͳΓͭͭ͋ΔTypeScript
    ͱʹ͔͘DX͕
    ্͕Δ
    

    View Slide

16. npm trends
    

    View Slide

17. ʰTypeScriptΛಋೖ͢΂͖͔ʱ
    Ͱ೰Ή࣌୅͸طʹऴΘ͍ͬͯΔ
    “
    ͱ͍͏ҙݟ΋͋Δ
    

    View Slide

18. •JavaScriptΛ࢖͏γνϡΤʔγϣϯͳΒ

    TypeScript(TS)͕࢖͑Δ
    Ex: WebͷϑϩϯτΤϯυɺNodejs + TypeScript,
    React/Vue/Anguler + TS, kintone customize
    JavaScript࢖͑ΔͳΒTypeScriptͰ
    

    View Slide

19. ܕͷ͋ΔJavaScript
    2
    

    View Slide

20. TypeScript….ܕΛ࣋ͬͨJavaScriptͷεʔύʔηοτ
    ɹɹMicrosoftʹΑͬͯ։ൃ͞Εɺϝϯςφϯε͞Ε͍ͯΔ
    ɹɹΦʔϓϯιʔεͷ੩తܕ෇͖ϓϩάϥϛϯάݴޠ
    TypeScript ࠶ܝ
    

    View Slide

21. •ܕ͸ɺͲ͏͍͏छྨͷσʔλ/஋͔ʁͱ͍͏৘ใ
    •person.firstName͸Ͳ͏͍͏छྨͷσʔλʁ
    •͜Ε͘Β͍ͩͬͨΒจࣈྻͩͱΘ͔Δ
    ܕʁ
    greeter.js
    

    View Slide

22. •num, digit͸ʁ
    •n, m, s͸ͲΜͳσʔλ͕ೖͬͯͦ͏ʁ
    •৽͘͠ݟͨਓ͸ݺͼग़͠ଆΛݟͳ͍ͱ෼͔Βͳ͍
    •ਓ͕͓͔֮͑ͯͳ͍ͱ͍͚ͳ͍
    ෳࡶͳ৔߹͸ʁ
    

    View Slide

23. •࣮ߦ͠ͳͯ͘΋ɺͲΜͳछྨͷσʔλ͕ೖ͍ͬͯΔ͔෼͔Δ
    ܕ͕͋Δͱ
    greeter.ts
    

    View Slide

24. •ؒҧ͑ͨ࢖͍ํΛͨ͠ΒϦΞϧλΠϜͰΤσΟλ͕ڭ͑ͯ͘ΕΔ
    ܕ͕͋Δͱ
    

    View Slide

25. ܕͷྫ@TypeScript
    ਅِ஋ܕ
    จࣈྻܕ
    ഑ྻܕ
    ਺஋ܕ
    ͳΜͰ΋ܕ
    

    View Slide

26. ݁ہܕ͕͋ΔͱԿ͕خ͍͠ʁ
    ϦϑΝΫλ͕༰қ
    େن໛։ൃͰ΋҆શ
    ೖྗͷิ׬ Τϥʔ΍ϛεΛΤσΟλ্Ͱݕग़
    ࣮ߦ͠ͳͯ͘΋෼͔Δ
    DX(։ൃͷੜ࢈ੑ)͕޲্͢Δʂ
    TypeScriptΛ࢖͏ͱԿ͕خ͍͠ʁ
    

    View Slide

27. Ͱ΋શ෦ʹܕΛॻ͘ͷ͸໘౗…
    •TypeScript͸ܕਪ࿦ͱ͍͏ػೳ͕͋Γ·͢
    •ܕΛ໌ࣔతʹॻ͔ͳͯ͘΋TypeScript͕উखʹ

    ʮ͜Ε͸false୅ೖͯ͠Δ͔ΒbooleanܕͶɻʯͱ൑அͯ͘͠ΕΔ
    •ͭ·ΓܕΛॻ͔ͳͯ͘΋ɺͱΓ͋͑ͣTypeScriptʹ͓͚ͯ͠͹

    ܕνΣοΫͷԸܙ͸ड͚ΒΕΔ
    

    View Slide

28. Α͠ʂTypeScriptಋೖ͠Α͏
    •JavaScriptͰॻ͍͍ͯΔϓϩδΣΫτʹTypeScriptΛಋೖ͢Δ

    ϋʔυϧ͸ͱͯ΋௿͍
    •JavaScript͸TypeScriptͰ΋͋Δ
    •͢΂ͯͷJavaScript͸ɺߏจతʹ͸TypeScriptͱͯ͠ਖ਼͘͠ɺ

    ίϯύΠϧͯ͠΋ݩͷJavaScriptͱಉ͡ৼΔ෣͍Λ͢Δ
    •ίϯύΠϧΤϥʔ͕͋ͬͯ΋JS͸ੜ੒͞ΕΔ
    

    View Slide

29. TypeScriptͷػೳ/ॻ͖ํ
    3
    

    View Slide

30. https://stackblitz.com/
    ϒϥ΢β্Ͱ͙͢ʹ
    ࢼͤΔΑ
    

    View Slide

31. ܕͷએݴ
    •ޙஔλΠϓͷܕΞϊςʔγϣϯ
    •ม਺΍ؔ਺ύϥϝʔλͷ͋ͱʹ : ܕ

    ͱ͍ͬͨ෩ʹॻ͘
    ؔ਺ύϥϝʔλ
    ม਺
    ؔ਺ͷ໭Γ஋
    

    View Slide

32. ܕͷએݴ
    Φϓγϣϯύϥϝʔλ
    ϢχΦϯܕ
    = จࣈྻܕ·ͨ͸਺஋ܕ
    

    View Slide

33. جຊతͳܕ
    •جຊతͳσʔλܕ͸༻ҙ͞Ε͍ͯΔ
    ਅِ஋ܕ
    จࣈྻܕ
    ഑ྻܕ
    ਺஋ܕ
    ͳΜͰ΋ܕ
    ฦΓ஋ͳ͠
    ΦϒδΣΫτܕ
    

    View Slide

34. ࣗ෼ͰܕΛఆٛ͢Δ
    •جຊతͳܕ͚ͩͰ͸ෆे෼
    •ࣗ෼ͷϓϩάϥϜʹԠͨ͡ܕ
    ͕ཉ͍͠
    •interface ΍ type ΩʔϫʔυΛ
    ࢖ͬͯܕΛఆٛ͢Δ
    

    View Slide

35. kintone ΦϒδΣΫτͷܕΛఆٛ͢Δͱ
    

    View Slide

36. TypeScriptʹ͸͍Ζ͍Ζͳػೳ͕͋Δ
    •࠷ॳ͸ෳࡶͳ͜ͱ͸͠ͳ͍͍ͯ͘ͷͰɺগͣͭ͠ศརͳػೳΛ

    ͍͚֮͑ͯ͹͍͍ɻ
    •ΤσΟλౖ͕ͬͯ͘ΕΔͷͰɺ౎౓ௐ΂Ε͹ͦͷ͏͍֮ͪ͑ͯ͘
    ྫʣ
    TypeGuard, Readonly, Index Signatures, Never Type, TypeAssertion
    Enum, Generics, Union Type, Intersection Type, Literal Types
    

    View Slide

37. ࣮ࡍͷ։ൃ؀ڥ΍TypeScript

    Λ࢖ͬͨίʔσΟϯά
    4
    

    View Slide

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
    

    View Slide

39. tsconfig.json
    

    View Slide

40. tsconfig.json
    ίϯύΠϧͷઃఆ͸tsconfig.jsonʹॻ͘
    جຊతʹ͸਽ܗ௨ΓͰOK
    ੩తܕͷݎ͞ΛॊೈʹઃఆͰ͖Δ
    ؤுΓͨ͘ͳ͍৔߹͸ɺઃఆͰ؇ΊΔ
    DOM΍ESͷܕ৘ใ͕ཉ͍͠ͳΒ
    libͰࢦఆ͢Δ

    ex: ”lib”: ["dom", “es2018”]
    

    View Slide

41. ݹ͍ES΁ͷม׵
    tsconfig.jsonͷtargetͰͲͷECMAScriptͷJavaScriptΛੜ੒͢
    Δ͔ࢦఆ͢Δ
    IE11ʹ΋ରԠ͢ΔͳΒ”es5”
    ⾠TypeScript͕໘౗ΛݟΔͷ͸Syntax͚ͩ⾠
    ϨΨγʔϒϥ΢βʹ͸૬มΘΒͣES6ʙͷػೳ͸ແ͍ͷͰ

    Polyfill͸ผ్ೖΕͳ͍ͱͩΊ(ex:Promise, Array.from)
    core-jsͳΓɺbabel-polyfillͳΓ
    

    View Slide

42. ΤσΟλ
    VSCode΍IntelliJ͸ϓϥάΠϯΛೖΕͳͯ͘΋σϑΥϧτͰ
    TypeScriptʹରԠ͍ͯ͠Δ
    ͙͢ิ׬΍ΤϥʔදࣔͷԸܙ͕ड͚ΒΕΔ
    Vim΍Emacs΋ϓϥάΠϯೖΕΕ͹OK
    

    View Slide

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
    

    View Slide

44. ܕఆٛ
    ࣗ෼ͰܕఆٛΛॻ͘ͷ͸େม
    Reactͱ͔ͷϥΠϒϥϦ͸Ͳ͏͢Ε͹͍͍ͷʁʁ
    ·͔ࣗ͞෼Ͱॻ͘ͷʁ
    

    View Slide

45. @types
    ࣗ෼ͰෳࡶͳܕఆٛΛ͢Δඞཁ͸͋Γ·ͤΜ
    ͍͍ͩͨͷϥΠϒϥϦ͸ܕఆٛϑΝΠϧΛ༻ҙͯ͘͠Εͯ·
    ͢(Definitely Typed)
    ͦͷϑΝΠϧΛΠϯετʔϧ͢Δ͚ͩ
    ྫ͑͹
    Reactͷ৔߹ $ npm install -D @types/react
    kintone CustomizeͳΒ@kintone/dts-gen
    https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types
    

    View Slide

46. ͍Ζ͍Ζ৔໘ͰͷTypeScript
    5
    

    View Slide

47. ʓʓ+TypeScript
    React + TypeScript
    Nodejs + TypeScript
    webpack + Babel + TypeScript
    jquery + TypeScript
    ReactNative + TypeScript
    Vue.js + TypeScript
    Anguler + TypeScript
    ɹɹɹɹɹɹɹɹɹɹɹɹetc
    جຊతʹͲ͜Ͱ΋࢖͑ΔΠϝʔδ
    

    View Slide

48. React + TypeScript
    React+TypeScriptΛࢼ͢ͳΒɺcreate-react-appͰ؀ڥΛ؆୯
    ʹ࡞ΕΔ
    $ npx create-react-app my-app --typescript
    

    View Slide

49. QuickStart
    https://www.typescriptlang.org/samples/index.html
    ͦΕͧΕΠϯετʔϧ͢ΔϥΠϒϥϦ΍ઃఆํ๏͸ͪ͜ΒΛࢀߟʹ
    

    View Slide

50. ·ͱΊ
    TypeScriptΛศརʹ࢖͍ͬͯ͘؀ڥ͸੔͍ͬͯΔ
    TypeScript ͕ͲΜͳ΋ͷ͔঺հ͠·ͨ͠
    TypeScriptͷಋೖϋʔυϧ͸ͱͯ΋௿͍ɻͳͷʹԸܙ͸େ͖͍
    ੋඇɺ࣍ʹJavaScriptΛॻ͘Α͏ͳϓϩδΣΫτͰ͸ɺ

    TypeScriptΛೖΕͯΈ͍ͯͩ͘͞
    

    View Slide

51. ͓·͚
    

    View Slide

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΍ͬͯ࣌͘ͷ͓͢͢Ί
    

    View Slide