社内で開催したTypeScript入門の勉強会資料
ϑ ϩ ϯ τ Τ ϯ υ Τ Ω ε ύ ʔ τ ν ʔ Ϝ֎ দ ढ़ ঘTypeScriptೖʙܕͷ͋ΔϞμϯͳJavaScriptʙFrontendBar#6 2019/4/19ɹ
View Slide
TypeScriptೖʙܕͷ͋ΔϞμϯͳJavaScriptʙ
•ॻ͍ͨ͜ͱ͋ΔΑ•ฉ͍ͨ͜ͱͳΒ•ࠓճॳΊͯͬͨTypeScript
•TypeScriptͬͯͳʹʁ•ܕͷ͋ΔJavaScript•TypeScriptͷػೳ/ॻ͖ํ•࣮ࡍͷ։ൃڥTypeScriptΛͬͨίʔσΟϯά•͍Ζ͍Ζ໘ͰͷTypeScriptࠓ ͢͜ͱ
•ʮTypeScriptͳΜͱͳ͘Θ͔ͬͨʂʯ•ʮ࣍ɺ৽͘͠JavaScriptΛ͏ϓϩδΣΫτͰ TypeScriptͬͯΈΔͧʯ•ʮ͍·खݩʹ͋ΔJavaScriptͷϓϩδΣΫτΛ TypeScriptʹॻ͖͑ͯΈΑ͏͔ͳ…ʯࠓͷΰʔϧ
TypeScriptͬͯͳʹʁ1
TypeScript….ܕΛ࣋ͬͨJavaScriptͷεʔύʔηοτɹɹMicrosoftʹΑͬͯ։ൃ͞Εɺϝϯςφϯε͞Ε͍ͯΔɹɹΦʔϓϯιʔεͷ੩తܕ͖ϓϩάϥϛϯάݴޠTypeScript
ͬ͘͟ΓΠϝʔδͰ͍͏ͱಉ͡ΧΤϧ͚ͩͲ…
ͬ͘͟ΓΠϝʔδͰ͍͏ͱJavaScriptgreeter.js
ͬ͘͟ΓΠϝʔδͰ͍͏ͱTypeScriptgreeter.ts
TypeScriptJavaScriptʹՃ͑ͯܕΛ͍࣋ͬͯΔ΄ͱΜͲJavaScript͚ͩͲͶܕʹ͍ͭͯ͜ͷ͋ͱઆ໌͢ΔΑ
TypeScriptίϯύΠϧ͢Δͱ JavaScriptʹͳΔม (ίϯύΠϧ)ੜ͞ΕͨJavaScript͍ͭͲ͓ΓϒϥβͰಈ͘greeter.ts greeter.js$ tsc greeter.ts
TypeScript Playgroundhttps://www.typescriptlang.org/play/
•TypeScript͍·ͱͯීٴ͍ͯ͠·͢•̍͘͜͜Β͍Ͱ৽͘͠࡞ΔϓϩδΣΫτ͍͍ͩͨTypeScriptͳΠϝʔδ•͜Ε·ͰJavaScriptΛ͍ͬͯͨΑ͏ͳγνϡΤʔγϣϯͰͱΓ͋͑ͣTypeScriptσϑΝΫτʹͳΓͭͭ͋ΔTypeScriptͱʹ͔͘DX্͕͕Δ
npm trends
ʰTypeScriptΛಋೖ͖͔͢ʱͰΉ࣌طʹऴΘ͍ͬͯΔ“ͱ͍͏ҙݟ͋Δ
•JavaScriptΛ͏γνϡΤʔγϣϯͳΒ TypeScript(TS)͕͑ΔEx: WebͷϑϩϯτΤϯυɺNodejs + TypeScript,React/Vue/Anguler + TS, kintone customizeJavaScript͑ΔͳΒTypeScriptͰ
ܕͷ͋ΔJavaScript2
TypeScript….ܕΛ࣋ͬͨJavaScriptͷεʔύʔηοτɹɹMicrosoftʹΑͬͯ։ൃ͞Εɺϝϯςφϯε͞Ε͍ͯΔɹɹΦʔϓϯιʔεͷ੩తܕ͖ϓϩάϥϛϯάݴޠTypeScript ࠶ܝ
•ܕɺͲ͏͍͏छྨͷσʔλ/͔ʁͱ͍͏ใ•person.firstNameͲ͏͍͏छྨͷσʔλʁ•͜Ε͘Β͍ͩͬͨΒจࣈྻͩͱΘ͔Δܕʁgreeter.js
•num, digitʁ•n, m, sͲΜͳσʔλ͕ೖͬͯͦ͏ʁ•৽͘͠ݟͨਓݺͼग़͠ଆΛݟͳ͍ͱ͔Βͳ͍•ਓ͕͓͔֮͑ͯͳ͍ͱ͍͚ͳ͍ෳࡶͳ߹ʁ
•࣮ߦ͠ͳͯ͘ɺͲΜͳछྨͷσʔλ͕ೖ͍ͬͯΔ͔͔Δܕ͕͋Δͱgreeter.ts
•ؒҧ͍͑ͨํΛͨ͠ΒϦΞϧλΠϜͰΤσΟλ͕ڭ͑ͯ͘ΕΔܕ͕͋Δͱ
ܕͷྫ@TypeScriptਅِܕจࣈྻܕྻܕܕͳΜͰܕ
݁ہܕ͕͋ΔͱԿ͕خ͍͠ʁϦϑΝΫλ͕༰қେن։ൃͰ҆શೖྗͷิ ΤϥʔϛεΛΤσΟλ্Ͱݕग़࣮ߦ͠ͳ͔ͯ͘ΔDX(։ൃͷੜ࢈ੑ)্͕͢ΔʂTypeScriptΛ͏ͱԿ͕خ͍͠ʁ
Ͱશ෦ʹܕΛॻ͘ͷ໘…•TypeScriptܕਪͱ͍͏ػೳ͕͋Γ·͢•ܕΛ໌ࣔతʹॻ͔ͳͯ͘TypeScript͕উखʹ ʮ͜Εfalseೖͯ͠Δ͔ΒbooleanܕͶɻʯͱஅͯ͘͠ΕΔ•ͭ·ΓܕΛॻ͔ͳͯ͘ɺͱΓ͋͑ͣTypeScriptʹ͓͚ͯ͠ ܕνΣοΫͷԸܙड͚ΒΕΔ
Α͠ʂTypeScriptಋೖ͠Α͏•JavaScriptͰॻ͍͍ͯΔϓϩδΣΫτʹTypeScriptΛಋೖ͢Δ ϋʔυϧͱ͍ͯ•JavaScriptTypeScriptͰ͋Δ•ͯ͢ͷJavaScriptɺߏจతʹTypeScriptͱͯ͠ਖ਼͘͠ɺ ίϯύΠϧͯ͠ݩͷJavaScriptͱಉ͡ৼΔ͍Λ͢Δ•ίϯύΠϧΤϥʔ͕͋ͬͯJSੜ͞ΕΔ
TypeScriptͷػೳ/ॻ͖ํ3
https://stackblitz.com/ϒϥβ্Ͱ͙͢ʹࢼͤΔΑ
ܕͷએݴ•ޙஔλΠϓͷܕΞϊςʔγϣϯ•มؔύϥϝʔλͷ͋ͱʹ : ܕ ͱ͍ͬͨ෩ʹॻؔ͘ύϥϝʔλมؔͷΓ
ܕͷએݴΦϓγϣϯύϥϝʔλϢχΦϯܕ= จࣈྻܕ·ͨܕ
جຊతͳܕ•جຊతͳσʔλܕ༻ҙ͞Ε͍ͯΔਅِܕจࣈྻܕྻܕܕͳΜͰܕฦΓͳ͠ΦϒδΣΫτܕ
ࣗͰܕΛఆٛ͢Δ•جຊతͳܕ͚ͩͰෆे•ࣗͷϓϩάϥϜʹԠͨ͡ܕ͕ཉ͍͠•interface type ΩʔϫʔυΛͬͯܕΛఆٛ͢Δ
kintone ΦϒδΣΫτͷܕΛఆٛ͢Δͱ
TypeScriptʹ͍Ζ͍Ζͳػೳ͕͋Δ•࠷ॳෳࡶͳ͜ͱ͠ͳ͍͍ͯ͘ͷͰɺগͣͭ͠ศརͳػೳΛ ͍͚͍͍֮͑ͯɻ•ΤσΟλౖ͕ͬͯ͘ΕΔͷͰɺௐΕͦͷ͏͍֮ͪ͑ͯ͘ྫʣTypeGuard, Readonly, Index Signatures, Never Type, TypeAssertionEnum, Generics, Union Type, Intersection Type, Literal Types
࣮ࡍͷ։ൃڥTypeScript ΛͬͨίʔσΟϯά4
։ൃڥ(3Step)1. $ npm i -D typescript2. $ npx tsc —init3. $ npx tsc src/**/*.ts1. TypeScriptΛΠϯετʔϧ ίϯύΠϥͱͯ͠tsc͕ೖ͍ͬͯΔ2. ઃఆϑΝΠϧ(tsconfig.json)ͷܗੜ3. TSϑΝΠϧΛίϯύΠϧɻJS͕ੜ͞ΕΔStep 02Step 03Step 01
tsconfig.json
tsconfig.jsonίϯύΠϧͷઃఆtsconfig.jsonʹॻ͘جຊతʹܗ௨ΓͰOK੩తܕͷݎ͞ΛॊೈʹઃఆͰ͖ΔؤுΓͨ͘ͳ͍߹ɺઃఆͰ؇ΊΔDOMESͷܕใ͕ཉ͍͠ͳΒlibͰࢦఆ͢Δ ex: ”lib”: ["dom", “es2018”]
ݹ͍ESͷมtsconfig.jsonͷtargetͰͲͷECMAScriptͷJavaScriptΛੜ͢Δ͔ࢦఆ͢ΔIE11ʹରԠ͢ΔͳΒ”es5”⾠TypeScript͕໘ΛݟΔͷSyntax͚ͩ⾠ϨΨγʔϒϥβʹ૬มΘΒͣES6ʙͷػೳແ͍ͷͰ Polyfillผ్ೖΕͳ͍ͱͩΊ(ex:Promise, Array.from)core-jsͳΓɺbabel-polyfillͳΓ
ΤσΟλVSCodeIntelliJϓϥάΠϯΛೖΕͳͯ͘σϑΥϧτͰTypeScriptʹରԠ͍ͯ͠Δ͙͢ิΤϥʔදࣔͷԸܙ͕ड͚ΒΕΔVimEmacsϓϥάΠϯೖΕΕOK
LintTSLint͏Θͳ͍͜Ε͔ΒTypeScriptͰLintΛೖΕΔͳΒESLintͰOK@typescript-eslint/eslint-pluginΛ͏@cybozu/eslint-config/presets/typescript͋ΔΑৄ͘͠ https://teppeis.hatenablog.com/entry/2019/02/typescript-eslint
ܕఆٛࣗͰܕఆٛΛॻ͘ͷେมReactͱ͔ͷϥΠϒϥϦͲ͏͢Ε͍͍ͷʁʁ·͔ࣗ͞Ͱॻ͘ͷʁ
@typesࣗͰෳࡶͳܕఆٛΛ͢Δඞཁ͋Γ·ͤΜ͍͍ͩͨͷϥΠϒϥϦܕఆٛϑΝΠϧΛ༻ҙͯ͘͠Εͯ·͢(Definitely Typed)ͦͷϑΝΠϧΛΠϯετʔϧ͢Δ͚ͩྫ͑Reactͷ߹ $ npm install -D @types/reactkintone CustomizeͳΒ@kintone/dts-genhttps://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types
͍Ζ͍Ζ໘ͰͷTypeScript5
ʓʓ+TypeScriptReact + TypeScriptNodejs + TypeScriptwebpack + Babel + TypeScriptjquery + TypeScriptReactNative + TypeScriptVue.js + TypeScriptAnguler + TypeScriptɹɹɹɹɹɹɹɹɹɹɹɹetcجຊతʹͲ͜Ͱ͑ΔΠϝʔδ
React + TypeScriptReact+TypeScriptΛࢼ͢ͳΒɺcreate-react-appͰڥΛ؆୯ʹ࡞ΕΔ$ npx create-react-app my-app --typescript
QuickStarthttps://www.typescriptlang.org/samples/index.htmlͦΕͧΕΠϯετʔϧ͢ΔϥΠϒϥϦઃఆํ๏ͪ͜ΒΛࢀߟʹ
·ͱΊTypeScriptΛศརʹ͍ͬͯ͘ڥ͍ͬͯΔTypeScript ͕ͲΜͳͷ͔հ͠·ͨ͠TypeScriptͷಋೖϋʔυϧͱ͍ͯɻͳͷʹԸܙେ͖͍ੋඇɺ࣍ʹJavaScriptΛॻ͘Α͏ͳϓϩδΣΫτͰɺ TypeScriptΛೖΕͯΈ͍ͯͩ͘͞
͓·͚
•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ͬͯ࣌͘ͷ͓͢͢Ί