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

by Toshihisa Tomatsu

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

•ʮTypeScriptͳΜͱͳ͘Θ͔ͬͨʂʯ •ʮ࣍ɺ৽͘͠JavaScriptΛ࢖͏ϓϩδΣΫτͰ͸  TypeScript࢖ͬͯΈΔͧʯ •ʮ͍·खݩʹ͋ΔJavaScriptͷϓϩδΣΫτΛ  TypeScriptʹॻ͖׵͑ͯΈΑ͏͔ͳ…ʯ ࠓ೔ͷΰʔϧ

Slide 6

Slide 6 text

TypeScriptͬͯͳʹʁ 1

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

npm trends

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ܕͷ͋ΔJavaScript 2

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Ͱ΋શ෦ʹܕΛॻ͘ͷ͸໘౗… •TypeScript͸ܕਪ࿦ͱ͍͏ػೳ͕͋Γ·͢ •ܕΛ໌ࣔతʹॻ͔ͳͯ͘΋TypeScript͕উखʹ  ʮ͜Ε͸false୅ೖͯ͠Δ͔ΒbooleanܕͶɻʯͱ൑அͯ͘͠ΕΔ •ͭ·ΓܕΛॻ͔ͳͯ͘΋ɺͱΓ͋͑ͣTypeScriptʹ͓͚ͯ͠͹  ܕνΣοΫͷԸܙ͸ड͚ΒΕΔ

Slide 28

Slide 28 text

Α͠ʂTypeScriptಋೖ͠Α͏ •JavaScriptͰॻ͍͍ͯΔϓϩδΣΫτʹTypeScriptΛಋೖ͢Δ  ϋʔυϧ͸ͱͯ΋௿͍ •JavaScript͸TypeScriptͰ΋͋Δ •͢΂ͯͷJavaScript͸ɺߏจతʹ͸TypeScriptͱͯ͠ਖ਼͘͠ɺ  ίϯύΠϧͯ͠΋ݩͷJavaScriptͱಉ͡ৼΔ෣͍Λ͢Δ •ίϯύΠϧΤϥʔ͕͋ͬͯ΋JS͸ੜ੒͞ΕΔ

Slide 29

Slide 29 text

TypeScriptͷػೳ/ॻ͖ํ 3

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

ܕͷએݴ •ޙஔλΠϓͷܕΞϊςʔγϣϯ •ม਺΍ؔ਺ύϥϝʔλͷ͋ͱʹ : ܕ  ͱ͍ͬͨ෩ʹॻ͘ ؔ਺ύϥϝʔλ ม਺ ؔ਺ͷ໭Γ஋

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

TypeScriptʹ͸͍Ζ͍Ζͳػೳ͕͋Δ •࠷ॳ͸ෳࡶͳ͜ͱ͸͠ͳ͍͍ͯ͘ͷͰɺগͣͭ͠ศརͳػೳΛ  ͍͚֮͑ͯ͹͍͍ɻ •ΤσΟλౖ͕ͬͯ͘ΕΔͷͰɺ౎౓ௐ΂Ε͹ͦͷ͏͍֮ͪ͑ͯ͘ ྫʣ TypeGuard, Readonly, Index Signatures, Never Type, TypeAssertion Enum, Generics, Union Type, Intersection Type, Literal Types

Slide 37

Slide 37 text

࣮ࡍͷ։ൃ؀ڥ΍TypeScript  Λ࢖ͬͨίʔσΟϯά 4

Slide 38

Slide 38 text

։ൃ؀ڥ(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

Slide 39

Slide 39 text

tsconfig.json

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

ݹ͍ES΁ͷม׵ tsconfig.jsonͷtargetͰͲͷECMAScriptͷJavaScriptΛੜ੒͢ Δ͔ࢦఆ͢Δ IE11ʹ΋ରԠ͢ΔͳΒ”es5” ⾠TypeScript͕໘౗ΛݟΔͷ͸Syntax͚ͩ⾠ ϨΨγʔϒϥ΢βʹ͸૬มΘΒͣES6ʙͷػೳ͸ແ͍ͷͰ  Polyfill͸ผ్ೖΕͳ͍ͱͩΊ(ex:Promise, Array.from) core-jsͳΓɺbabel-polyfillͳΓ

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Lint TSLint͸΋͏࢖Θͳ͍ ͜Ε͔ΒTypeScriptͰLintΛೖΕΔͳΒESLintͰOK @typescript-eslint/eslint-pluginΛ࢖͏ @cybozu/eslint-config/presets/typescript΋͋ΔΑ ৄ͘͠͸  https://teppeis.hatenablog.com/entry/2019/02/typescript-eslint

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

͍Ζ͍Ζ৔໘ͰͷTypeScript 5

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

͓·͚

Slide 52

Slide 52 text

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