Provide/Inject で TypeScript の恩恵を受ける方法

Vue 勉強会 in 大阪 の発表資料です。

Transcript

1. 1SPWJEF*OKFDU
   Ͱ
   5ZQF4DSJQU
   ͷ
   ԸܙΛड͚Δํ๏ 7VF
   ษڧձ
   JO
   େࡕ
   
   4"8
2. $(whoami) ࢯ໊
   Ճ౻
   फҰ࿠
   ࡀ
   ϋϯυϧωʔϜ
   4"8
   9
   چ
   5XJUUFS 
   !B[VLJ@FBUFS
   ؔ੢ͷ
   *5
   ΤϯδχΞ
   ίϛϡχςΟͷ೐΍͔͠୲౰
   ࣗশ
   େࡕࡏॅɾѪ஌ग़਎
   ಘҙ෼໺
   8FC
   ΞϓϦέʔγϣϯ։ൃ
   7VF
   -BSBWFM ʮྫྷ΍͠த՚͸͡Ίͨ͠ʯ͸ฉ͘ͷʹ
   ʮྫྷ΍͠த՚ऴΘΓ·ͨ͠ʯ͸ฉ͔ͳ͍ͷ͸
   ͳͥͩΖ͏ ࠓ೔ͷ໎ݴ
3. ࢠଙͷίϯϙʔωϯτʹ௚઀σʔλΛ౉͢ 7VF
   
   ͔Β
   1SPWJEF*OKFDU
   ͱ͍͏ػೳ͕௥Ճ
   ࢠଙͷίϯϙʔωϯτʹσʔλΛ౉͢৔߹ʹ
   props
   Ͱ͸όέπϦϨʔʹͳΔ
   1SPWJEF*OKFDU
   Λར༻͢Δ͜ͱͰ
   props
   ͷόέπϦϨʔΛղফ
   ΞϓϦέʔγϣϯϨϕϧͰ
   1SPWJEF
   Λར༻͢Δ͜ͱͰ
   %*
   Λ࣮ݱ
   શͯͷίϯϙʔωϯτͰ
   *OKFDU
   Λ͢Δ͜ͱͰσʔλΛऔಘՄೳ
   ͋ΔίϯϙʔωϯτͰ
   1SPWJEF
   ͨ͠৔߹͸ࢠଙͷίϯϙʔωϯτͰͷΈ
   *OKFDU
   Մೳ
4. 1SPWJEF*OKFDU
   ͷΠϝʔδ Header Layout Root Main Footer ArticleList ArticleEditor provide('user', me) inject('user') inject()
   Մೳͳൣғ  ઌ૆ͷίϯϙʔωϯτͰ
   provide()
   ͢ΔσʔλΛొ࿥  ࢠଙͷίϯϙʔωϯτͰ
   inject()
   ͯ͠σʔλΛऔಘ
5. 1SPWJEF*OKFDU
   Ͱ
   5ZQF4DSJQU
   ͷԸܙΛड͚Δ Ωʔ͕จࣈྻͷ৔߹͸
   inject() ͷฦ٫ܕ͸
   unknown
   inject()
   Ͱऔಘͨ͠σʔλͷܕΛࢦఆ͢Δʹ͸Ωϟετ͕ඞཁ
   provide()
   ʹ౉͞ΕͨσʔλܕͱҟͳΔܕʹΩϟετͯ͠΋ΤϥʔʹͳΒͳ͍
   ΩʔͷจࣈྻΛ
   UZQP
   ͍ͯͯ͠΋੩తղੳͰ͸ΤϥʔΛݕ஌Ͱ͖ͳ͍
   Ωʔʹ
   InjectionKey<T>
   
   Λར༻͢Δ͜ͱͰܕ৘ใΛऔಘ
   inject()
   ͷฦ٫ܕ͸
   T|undefined
   ʹͳΓΩϟετ͕ෆཁ ܕͷෆ੔߹΍Ωʔͷ
   UZQP
   ͳͲ͕͋Δ৔߹ʹ੩తղੳͷԸܙΛड͚ΒΕΔ
6. InjectionKey<T>
   ͷར༻ Layout Main ArticleEditor export const userInjectionKey = Symbol() as InjectionKey<User>; import { userInjectionKey } from './InjectionKey'; const me: User = { name: 'Jack' }; provide(userInjectionKey, me); import { userInjectionKey } from './InjectionKey'; const me = inject(userInjectionKey); console.log(me?.name); Layout.vue ArticleEditor.vue InjectionKey.ts InjectionKey<User>
   ʹΩϟετͨ͠
   Symbol
   Λ
   FYQPSU inject()
   ͷฦ٫ܕ͸
   User|undefined
   ͱͳΔ
7. ·ͱΊ 1SPWJEF*OKFDU
   ʹ͍ͭͯͷ֓ཁΛઆ໌
   1SPWJEF*OKFDU
   Ͱ
   5ZQF4DSJQU
   ͷԸܙΛड͚Δํ๏Λ঺հ
   InjectionKey<T> ΛΩʔʹར༻͢Δ͜ͱͰ࣮ݱՄೳ
8. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠