interface を活用して安全性と拡張性を兼ね備えた型を作る

2024/11/16 TSKaigi KansaiのLTで使用した資料です！
https://kansai.tskaigi.org/talks/all-user

Transcript

1. © Techtouch, Inc. JOUFSGBDFΛ׆༻ͯ͠
   ҆શੑͱ֦ுੑΛ݉Ͷඋ͑ͨܕΛ࡞Δ 2024/11/16 Ԭຊ ܓଠ@all-user
2. © Techtouch, Inc. ࣗݾ঺հ 2 ຊ໊ɿԬຊ
   ܓଠ
   (JU)VCɿ!BMMVTFS
   5XJUUFSɿ!BMM@@VTFS wςοΫλονגࣜձࣾͰ%0.पΓͷ։ൃΛߦ͏ &MFNFOUνʔϜͷϑϩϯτΤϯυ
   wि຤͸ۙ͘ͷߴඌࢁʹΑ͘ొͬͯ·͢
   wӡ͕͍͍ͱ෋࢜ࢁ͕ݟ͑·͢
3. © Techtouch, Inc. 3 ΫϩευϝΠϯ
   JGSBNF
   ؒͷϝοηʔδϯάػೳͷ࣮૷Λ௨ͯ͡ɺ
   JOUFSGBDF
   ͷએݴϚʔδΛ׆༻ͨ͠ࣄྫΛ͝঺հ͠·͢
   
4. © Techtouch, Inc. 4 ςοΫλον͸ը໘্ʹૢ࡞ΨΠυ΍πʔϧνοϓΛ
   ؆୯ʹ഑ஔ͢Δ͜ͱ͕Ͱ͖ΔϊʔίʔυπʔϧͰ͢
5. © Techtouch, Inc. 5 ܦඅਃ੥ͳͲͨ·ʹ͔͠࢖Θͳ͍γεςϜͷ࢖͍ํ͕
   ෼͔Βͳ͍ɺɺɺͱ͍͏ܦݧΛ͞Εͨ͜ͱ
   Ұ౓͸͋ΔͷͰ͸ͳ͍Ͱ͠ΐ͏͔ʁ
6. © Techtouch, Inc. 6 ͦΜͳ࣌ʹ͜ͷΑ͏ͳ஫ऍ͕͋Ε͹
   ໎͏͜ͱͳ͘γεςϜΛར༻Ͱ͖·͢ ͜͜͸ۭཝͰ0,ʂ ෼͔Βͳ͍࣌͸
   ʮ99ʯΛબ୒
7. © Techtouch, Inc. 7 ΫϩευϝΠϯ
   JGSBNF
   ʹ΋ରԠ͍ͯ͠·͢ɻ
   ʢҰ෦ະରԠ͋Γʣ ͜͜͸ۭཝͰ0,ʂ ෼͔Βͳ͍࣌͸
   ʮ99ʯΛબ୒
8. © Techtouch, Inc. 8 ΫϩευϝΠϯ
   JGSBNF
   ͷ಺෦ʹ͸
   ਌
   XJOEPX
   ͔Β௚઀
   +4
   ͰΞΫηε͢Δ͜ͱ͕Ͱ͖ͳ͍ʂ
9. © Techtouch, Inc. 9 ϝοηʔδϯά͠·͢
   
10. © Techtouch, Inc. 10 ΫϩευϝΠϯ
    JGSBNF
    ͱͷ௨৴ػೳΛ
    ϥΠϒϥϦͱ࣮ͯ͠૷͢Δ
11. © Techtouch, Inc. 11 ϝοηʔδͷܕΛͲͷΑ͏ʹදݱ͢Δ͔ // ϥΠϒϥϦଆ: @tt/messaging export type Message = { type: string; // ܕ҆શੑ͕ࣦΘΕΔ payload: any; // ܕ҆શੑ͕ࣦΘΕΔ }; const createMessaging = () => { return { postMessage(type: string, payload: any) { // ࣮૷ }, }; };
12. © Techtouch, Inc. 12 ۩ମతͳ༻్͸ΞϓϦέʔγϣϯଆ͔͠஌Βͳ͍ͷͰ
    େ·͔ͳܕ͔͠ఆٛ͢Δ͜ͱ͕Ͱ͖ͳ͍ɻ
    // ϥΠϒϥϦଆ: @tt/messaging export type Message = { type: string; // ܕ҆શੑ͕ࣦΘΕΔ payload: any; // ܕ҆શੑ͕ࣦΘΕΔ }; const createMessaging = () => { return { postMessage(type: string, payload: any) { // ࣮૷ }, }; };
13. © Techtouch, Inc. 13 // ϥΠϒϥϦଆ: @tt/messaging export type Message = | { type: "scrollTo"; payload: { x: number; y: number; }; } | { type: "dispatchInput"; payload: { value: string; }; } const createMessaging = () => { return { send<Msg extends Message>(type: Msg["type"], payload: Msg["payload"]) { // ࣮૷ }, }; }; ͡Ό͋ϥΠϒϥϦଆʹશ෦ॻ͍ͪΌ͓͏
14. © Techtouch, Inc. 14 // ϥΠϒϥϦଆ: @tt/messaging export type Message = | { type: "scrollTo"; payload: { x: number; y: number; }; } | { type: "dispatchInput"; payload: { value: string; }; } | { type: "getBoundingClientRect"; payload: { selector: string; }; }; const createMessaging = () => { return { send<Msg extends Message>(type: Msg["type"], payload: Msg["payload"]) { // ࣮૷ }, }; }; ΞϓϦέʔγϣϯଆͰͷ༻్͕૿͑Δͨͼʹ
    ϥΠϒϥϦଆʹखΛՃ͑Δඞཁ͕͋Δ
15. © Techtouch, Inc. 15 // ϥΠϒϥϦଆ: @tt/messaging export type Message = | { type: "scrollTo"; payload: { x: number; y: number; }; } | { type: "dispatchInput"; payload: { value: string; }; } | { type: "getBoundingClientRect"; payload: { selector: string; }; }; const createMessaging = () => { return { send<Msg extends Message>(type: Msg["type"], payload: Msg["payload"]) { // ࣮૷ }, }; }; ผͷΞϓϦέʔγϣϯͰར༻͢Δͱ͍ͬͨ
    ࠶ར༻ੑ΋٘ਜ਼ʹͳͬͯ͠·͏
16. © Techtouch, Inc. 16 ܕ҆શੑͱ֦ுੑͷͲͪΒ͔Λ
    ఘΊΔ͜ͱʹͳͬͯ͠·͏ɻɻɻ
17. © Techtouch, Inc. 17 Ͳ͏ʹ্͔ख͍͜ͱͰ͖ͳ͍͔ɺɺɺ
18. © Techtouch, Inc. 18 ͦ͏͍͑͹
    .6*
    ͷ
    5IFNJOH
    ͬͯ
    JOUFSGBDF
    Λ࢖ͬͯͨͳ
19. © Techtouch, Inc. 19 declare module '@mui/material/styles' { interface Theme { status: { danger: string; }; } // allow configuration using `createTheme()` interface ThemeOptions { status?: { danger?: string; }; } } 5IFNF΍5IFNF0QUJPOTͷܕΛ
    ͋ͱ͔Β֦ுͰ͖Δ
20. © Techtouch, Inc. 20 ͜ΕΛ࢖͍ͬͯ͘ʂ
21. © Techtouch, Inc. 21 // ϥΠϒϥϦଆ: @tt/messaging export interface MessageMap { // ϥΠϒϥϦଆͰ͸Կ΋ఆٛ͠ͳ͍ } const createMessaging = () => { return { send<T extends keyof MessageMap>(type: T, payload: MessageMap[T]) { // ࣮૷ }, }; }; ϥΠϒϥϦଆͰ͸ඞཁ࠷௿ݶͷఆٛͷΈ
22. © Techtouch, Inc. 22 // ϥΠϒϥϦଆ: @tt/messaging export interface MessageMap { // ϥΠϒϥϦଆͰ͸Կ΋ఆٛ͠ͳ͍ } const createMessaging = () => { return { send<T extends keyof MessageMap>(type: T, payload: MessageMap[T]) { // ࣮૷ }, }; }; // ΞϓϦέʔγϣϯଆ: app.ts declare module "@tt/messaging" { interface MessageMap { scrollTo: { x: number; y: number; }; } } const messaging = createMessaging(); messaging.send("scrollTo", { x: 10, y: 42, }); // ✅ ܕ҆શ ΞϓϦέʔγϣϯଆͰ͸
    ༻్ʹԠͨ͡ϝοηʔδͷܕΛఆٛ ϥΠϒϥϦଆͰ͸ඞཁ࠷௿ݶͷఆٛͷΈ
23. © Techtouch, Inc. 23 JOUFSGBDF
    ͷએݴ͸Կ౓Ͱ΋খ෼͚ʹߦ͏͜ͱ͕Ͱ͖Δ
24. © Techtouch, Inc. 24 ΞϓϦέʔγϣϯଆͰ͜ΕΒͷએݴΛ
    ҰՕॴʹ·ͱΊͯهड़͢Δඞཁ͸ͳ͍ declare module "@tt/messaging" { interface MessageMap { scrollTo: { x: number; y: number; }; } interface MessageMap { dispatchInput: { value: string; }; } interface MessageMap { getBoundingClientRect: { selector: string; }; } }
25. © Techtouch, Inc. 25 ͦͷͨΊɺΞϓϦέʔγϣϯଆͰ͜ΕΒͷએݴΛ
    ҰՕॴʹ·ͱΊͯهड़͢Δඞཁ͸ͳ͍ declare module "@tt/messaging" { interface MessageMap { scrollTo: { x: number; y: number; }; } } declare module "@tt/messaging" { interface MessageMap { dispatchInput: { value: string; }; } } declare module "@tt/messaging" { interface MessageMap { getBoundingClientRect: { selector: string; }; } }
26. © Techtouch, Inc. 26 ؔ࿈͢Δ࣮૷ͷ͙ۙ͘͢Ͱએݴ
    ϘτϜΞοϓʹܕΛఆٛ declare module "@tt/messaging" { interface MessageMap { scrollTo: { x: number; y: number; }; } } declare module "@tt/messaging" { interface MessageMap { dispatchInput: { value: string; }; } } declare module "@tt/messaging" { interface MessageMap { getBoundingClientRect: { selector: string; }; } }
27. © Techtouch, Inc. 27 // ΞϓϦέʔγϣϯଆ: iframeScript.ts import { scrollTo } from "./PATH_TO/scrollTo.ts"; import { dispatchInput } from "./PATH_TO/dispatchInput.ts"; import { getBoundingClientRect } from "./PATH_TO/getBoundingClientRect.ts"; export const iframeImplements = { scrollTo, dispatchInput, getBoundingClientRect, } satisfies Record<keyof MessageMap, unknown>; એݴϚʔδ͞Εͨ࠷ऴతͳܕΛར༻ͯ͠ ܕνΣοΫΛߦ͏
28. © Techtouch, Inc. 28 એݴϚʔδ͞Εͨ࠷ऴతͳܕΛར༻ͯ͠ ܕνΣοΫΛߦ͏ // ΞϓϦέʔγϣϯଆ: iframeScript.ts import { scrollTo } from "./PATH_TO/scrollTo.ts"; import { dispatchInput } from "./PATH_TO/dispatchInput.ts"; // import { getBoundingClientRect } from "./PATH_TO/getBoundingClientRect.ts"; export const iframeImplements = { scrollTo, dispatchInput, // getBoundingClientRect, // ^ ૊ΈࠐΉͷΛ๨Εͯ͠·ͬͨɺɺɺ } satisfies Record<keyof MessageMap, unknown>; // ❌ શͯͷϓϩύςΟ͕ἧ͍ͬͯΔ͜ͱΛݕࠪͰ͖Δ
29. © Techtouch, Inc. 29 ஫ҙ఺
30. © Techtouch, Inc. 30 74$PEF
    ্ͷܕνΣοΫͷද͕ࣔ
    UTD
    ͷܕνΣοΫͷ݁ՌͱҟͳΔ৔߹͕͋Δ
31. © Techtouch, Inc. 31 74$PEF
    ্Ͱ͸ΤϥʔͷදࣔͰ΋
32. © Techtouch, Inc. 32 Ϗϧυ࣌ͷܕνΣοΫ͸௨Δ
33. © Techtouch, Inc. 33 wςοΫλον͸ϞϊϨϙߏ੒Ͱ
    wΤϯτϦϙΠϯτʢUTDPOGJHKTPOʣ͕ෳ਺͋Γ
    wએݴϚʔδ͞ΕΔܕ͕ΤϯτϦϙΠϯτ͝ͱʹҟͳΔ
34. © Techtouch, Inc. 34 74$PEF
    Ͱ͸
    UTDPOGJHKTPO
    ͕ෳ਺͋ͬͨ৔߹ʹɺ
    Ͳͷ
    UTDPOGJHKTPO
    ʹج͍ͮͯܕνΣοΫ͢Ε͹ྑ͍͔
    ൑அͰ͖ͳ͍ͷͰ͸ͳ͍͔ʁ
35. © Techtouch, Inc. 35 ͦΜͳ͜ͱͳ͔ͬͨ
36. © Techtouch, Inc. 36 w ࠷খߏ੒Ͱ࠶ݱ؀ڥΛࢼΈ͕ͨಉ͡໰୊͸ى͖ͳ͍
    w 74$PEF
    ͸ෳ਺ͷ
    UTDPOGJHKTPO
    ͕͋ͬͯ΋ɺద੾ͳ
    UTDPOGJHKTPO
    ʹج͍ͮͯܕʹղܾͯ͘͠Εͨʢ͍͢͝ʣ
37. © Techtouch, Inc. 37 w ͳͷͰ·ͩ࠶ݱ৚݅Θ͔ͬͯͳ͍Ͱ͢
    w ϞϊϨϙߏ੒ͷن໛͕େ͖͍ͱղܾ͢ΔએݴϚʔδͷ਺͕ଟ͘ͳΓɺҰ ఆͷ਺Λ௒͑Δͱ࠶ݱ͢Δͷ͔΋͠Εͳ͍
38. © Techtouch, Inc. 38 ·ͱΊ
39. © Techtouch, Inc. 39 w ܕ҆શੑͱ֦ுੑͷཱ͕྆Մೳ
    w ϥΠϒϥϦͱΞϓϦέʔγϣϯؒͷॊೈͳܕఆٛΛ࣮ݱ
    w ϘτϜΞοϓͳܕఆٛͰϝϯςφϯεੑͷߴ͍ίʔυΛ࣮ݱ JOUFSGBDF
    ͷએݴϚʔδΛ׆༻͢Δ͜ͱͰ
    
40. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂʂ
41. ͢΂ͯͷϢʔβʔ͕ γεςϜΛ࢖͍͜ͳͤΔੈքʹ γεςϜಋೖ͚ͩͰऴΘΒͤͳ͍ɺར׆༻ͷͨΊͷDXϓϥοτϑΥʔϜ