Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Toshihisa Tomatsu

April 19, 2019
Tweet

More Decks by Toshihisa Tomatsu

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

  6. TypeScriptͬͯͳʹʁ
    1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    JavaScriptʹͳΔ
    ม׵

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. ʰTypeScriptΛಋೖ͢΂͖͔ʱ
    Ͱ೰Ή࣌୅͸طʹऴΘ͍ͬͯΔ

    ͱ͍͏ҙݟ΋͋Δ

    View full-size slide

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

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

    View full-size slide

  18. ܕͷ͋ΔJavaScript
    2

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

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

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

    View full-size slide

  28. TypeScriptͷػೳ/ॻ͖ํ
    3

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  36. ࣮ࡍͷ։ൃ؀ڥ΍TypeScript

    Λ࢖ͬͨίʔσΟϯά
    4

    View full-size slide

  37. ։ൃ؀ڥ(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 full-size slide

  38. tsconfig.json

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  42. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    TypeScriptΛೖΕͯΈ͍ͯͩ͘͞

    View full-size slide

  50. •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 full-size slide