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

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