アプリ文言のパースで学ぶ 文字列Literal型パズル入門

TSKaigiKansai 2024 : 2024/11/16
- https://kansai.tskaigi.org/talks/sajikix
Playground
- Try it in Playground
X
- https://twitter.com/sajikix

Transcript

1. 3ZVTFJ
   4BKJLJ
   
   !TBKJLJY ΞϓϦจݴͷύʔεͰֶͿ
   จࣈྻ-JUFSBMܕύζϧೖ໳
2. 4BKJ
   
   3ZVTFJ
   4BKJLJ 'SPOUFOE
   %FWFMPQFS
   BU
   $ZCP[V
   JOD 𝕏
   !TBKJLJY
3. ΞϓϦจݴ؅ཧ͋Δ͋Δ
4. 1MBDFIPMEFS͋Γͷจݴʹ஋Λ౉ͯ͠ॻࣜԽ จݴϦιʔε͸͜Μͳײ͡
   ֤ݴޠ෼༻ҙ͞ΕͯΔ
   ར༻͢Δͱ͖͸͜Μͳײ͡
   ग़ྗ
   
   Hello, Saji / Saji͞Μɺ͜Μʹͪ͸ t("greeting", {name: "Saji"}) {"greeting": "Hello, {{name}}"} // en {"greeting": "{{name}}͞Μɺ͜Μʹͪ͸"} //ja
5. ࠔΔ͜ͱ 1MBDFIPMEFS
   ͷ
   LFZ
   Λؒҧ͑ͯ΋࣮ߦ࣌·Ͱؾ͚ͮͳ͍
   ˠ
   "namae"
   ʹͳͬͯΔʂ😱
   1MBDFIPMEFS
   ͷ਺͸Մม͚ͩͲશ෦ࢦఆ͔ͨ͠΋ࣗ৴͕࣋ͯͳ͍
   ˠ
   ͦ΋ͦ΋͜ͷจݴ
   LFZ
   ͬͯ
   1MBDFIPMEFS
   ͋ΔΜ͚ͩͬʜʁ
   ˠ
   ͜ΕͰࢦఆ͠๨Εͳ͍ΑͶʜʁ t("greeting", {namae: "Saji"}) ʙʙʙʙʙ
6. ݡ͍54͞ΜͳΒਪ࿦ͯ͠΄͍͠
   🥺 ࢦఆ͢΂͖
   1MBDFIPMEFS
   ͕଍Γͳ͍ؒҧͬͯͨΒΤϥʔʹͳͬͯ΄͍͠
   
   
   ˠ
   ࣮ߦ࣌ͰͷΤϥʔΛ௿ݮ͍ͨ͠
   ͳΜͳΒࣗಈͰ
   1MBDFIPMEFS
   ʹ౉͢΂͖σʔλΛਪ࿦ͯ͠΄͍͠
   
   
   ˠ
   ʮOʯ·ͰଧͬͨΒ
   ʮOBNFʯ
   ͕༧ଌ͞Εͯཉ͘͠ͳ͍ʁ
   Ͱ΋จݴ͸ͨͩͷจࣈྻͳΜͩΑͳʜ🤨
7. ͬͯ͜ͱ͸
   จࣈྻͷύʔε͕ඞཁ
8. ͱݴ͏Θ͚Ͱຊ୊
9. JOGFS
   
   5FNQMBUF
   -JUFSBM
   5ZQF
   
   ࠶ؼܕ
   
   ͜ͷͭΛ૊Έ߹ΘͤΔͱ൚༻తͳจࣈྻͷύʔεͬΆ͍ॲཧ͕૊ΊΔ
   
   
   
   จݴͷ
   1MBDFIPMEFS
   Λղੳ͢Δ͜ͱͩͬͯͰ͖Δ
   😍
   ࠓճͷϢʔεέʔε
   
   1MBDFIPMEFS
   ͱͯ͠จݴ಺Ͱએݴͨ͠LFZΛղੳͯ͠ॻࣜԽ͢Δࡍʹඞཁͳσ ʔλͷܕΛਪ࿦͍ͨ͠ɻ "Hello, {{name}}" { name: string }
10. *OGFS
    
    5FNQMBUF
    -JUFSBM
    5ZQFT
    
    ࠶ؼܕ
    
11. *OGFS
    
    5FNQMBUF
    -JUFSBM
    5ZQFT
    
    ࠶ؼܕ
    
12. *OGFS
    $POEJUJPOBM
    UZQFT JOGFS
    ͸
    $POEJUJPOBM
    5ZQFT
    ͷதͰ࢖͑Δػೳ
    extends
    ͷӈลͷதͰʮ͜͜ͷܕɺ໊લ͚ͭͯ࢖͍͍ͨʯͱݴ͑Δػೳ
    ྫ
    
    ϢʔςΟϦςΟܕͷ
    1BSBNFUFST
    ؔ਺ͷҾ਺Λਪ࿦͢Δ
    ͷ࣮૷
    args ෦෼ͷܕΛ1ܕͱ͢Δ
    ˠ
    1Λฦ͢
    ˠ
    Ҿ਺ͷܕΛҾ͖ग़ͤͨͶʂ T extends (...args: infer P) => any ? P : never;
13. *OGFS
    
    5FNQMBUF
    -JUFSBM
    5ZQFT
    
    ࠶ؼܕ
    
14. 5FNQMBUF
    -JUFSBM
    5ZQFT +BWB4DSJQU
    ͷ5FNQMBUF
    -JUFSBM
    ͱಉ͡ߏจͰɺܕΛੜ੒ɾਪ࿦ͯ͘͠ΕΔ
    6OJPOͷ෼഑ͱ͔΋ͯ͘͠ΕΔ type World = 'world'; type Greeting = `hello ${World}`; // type Greeting = "hello world" type Ts = 'ts'; type Js = 'js'; type Config = `config.${Ts | Js}`; // type Config = 'config.ts' | 'config.js';
15. *OGFS
    
    5FNQMBUF
    -JUFSBM
    5ZQFT
    
    ࠶ؼܕ
    
16. JOGFS
    
    5FNQMBUF
    -JUFSBM
    5ZQFT *OGFSΛ5FNQMBUF
    -JUFSBM
    5ZQFT಺Ͱ࢖͏ͱɺࢦఆͨ͠จࣈྻύλʔϯʹ͓͚Δ ಛఆͷ෦෼Λܕͱͯ͠ൈ͖ग़͢͜ͱ͕Ͱ͖Δʂ
    T extends `${infer TBefore}.js` T extends `${infer TBefore}.js` ? TBefore : never; AKTAͷલͷ෦෼Λ5#FGPSFܕ
    ͱͯ͠ൈ͖ग़ͤͱݴ͏ҙຯ
17. ͱ͍͏͜ͱ͸
    1MBDF)PMEFS
    ෦෼͕ൈ͖ग़ͤΔ ҎԼͷΑ͏ʹɺ\\
    ^^
    Ͱғ·ΕͨதΛJOGFS͢Ε͹ʜ
    
    
    ˞খٕ
    A\TUSJOH^A
    Λ࢖͏ͱʮ೚ҙͷจࣈྻܕʯΛදͤΔʂ
    1MBDF)PMEFS಺෦ͷจࣈྻΛ51)ܕͱͯ͠ൈ͖ग़ͤͨʂ T extends `${string}{{${infer TPH}}}${string}` ? TPH : never;
18. ͋Εɺ΋͏Ͱ͖ͯͳ͍ʁ
19. 1MBDFIPMEFS͕ෳ਺ͷ࣌ΛߟྀͰ͖ͯͳ͍🙅 ෳ਺ͷ
    1MBDFIPMEFS
    ͕͋Δ৔߹࠷ॳͷ෦෼
    {{title}}
    ͔͠औΓग़ͤͯͳ͍
    ̍ݸ໨ͷ1MBDF)PMEFSΑΓޙΖ͸Ұݸͷจࣈྻͱͯ͠ਪ࿦͞ΕͪΌͬͯΔ
    
20. શऔಘ͢Δʹ͸Ͳ͏͠Α͏ʁ🤔 )FMMP
    \\UJUMF^^ \\OBNF^^ ͜ͷ෦෼Ͱ΋͏̍ճ
    1MBDFIPMEFS
    Λ୳͍ͨ͠
    
    ͱ͍͏͔ɺݟ͔ͭΒͳ͘ͳΔ·Ͱ܁Γฦ͍ͨ͠
    
    ͭ·Γɺ಺෦Ͱಉ͡ॲཧ͕ݺͼଓ͚ΒΕΕ͹ʜ FYUFOET
    ͷӈล `${string}{{${infer TPH}}}${string}` ࣮ࡍͷ
    จࣈྻ
21. ͜Εͬͯ࠶ؼॲཧͰ͸
22. *OGFS
    
    5FNQMBUF
    -JUFSBM
    5ZQFT
    
    ࠶ؼܕ
    
23. ࠶ؼܕ ͋Δܕͷఆٛ಺Ͱࣗ෼ࣗ਎ͷܕΛݺͼग़͍ͯͯ͠͠Δܕͷ͜ͱ
    $POEJUJPOBM
    5ZQFTͱ࠶ىܕΛ૊Έ߹ΘͤΔͱɺʮFYUFOETͷӈล৚݅Λຬͨ͢ ݶΓಉ͡ॲཧ ਪ࿦ Λ܁Γฦ͢ʯ͜ͱ͕Ͱ͖Δ
    type DeepStringObject = { [key: string]: DeepStringObject | string; }; type Recursive<T> = T extends Condition ? Recursive<T> : never;
24. *OGFS
    
    5FNQMBUF
    -JUFSBM
    5ZQFT
    
    ࠶ؼܕ
    
25. ࠶ؼܕΛ࢖ͬͯ࠷ޙ·Ͱύʔε͢Δ ޙΖͷจࣈྻʹରͯ͠
    1MBDF)PMEFS
    ͕͍ͳ͘ͳΔ·Ͱ୳͠ଓ͚͍ͨ
    ˠ
    ޙΖͷจࣈྻΛ
    TAfter
    ͱ͠ɺ·ͨࣗ਎ͷܕʹ౉ͤ͹͍͍
    ࠷ऴతʹ͸
    $POEJUJPOBM5ZQFTͷʮ
    
    ʯҎ߱ ۭ഑ྻ ߦ͖ண͘
    
    ऴྃ৚݅ type GetPlaceholderKeys<T> = T extends `${string}{{${infer TPH}}}${infer TAfter}` ? [TPH, …GetPlaceholderKeys<TAfter>] : [];
26. શ෦ͷ1MBDF)PMEFSΛൈ͖ग़ͤͨʂ ଘࡏ͢Δ
    1MBDFIPMEFS
    ͷ
    LFZ
    Λ഑ྻͰൈ͖ग़ͤͨʂ🎉
    ͋ͱ͸
    {[key] : string}
    ͷܕʹϚοϐϯάͰ͖Ε͹ྑ͍ɻ
27. վྑ
    
    \<LFZ>
    
    TUSJOH^
    ͷܗʹ w 1MBDFIPMEFSͷܕ 51)
    Λ
    LFZ
    ͱ͢Δ
    {[key] : string}
    ͷܕΛ࡞Δ
    w ࠶ىతʹݺͼग़ͨ݁͠ՌΛަࠩܕͰܨ͛Δ type GetPlaceholderOption<T> = T extends `${string}{{${infer TPH}}}${infer TAfter}` ? { [K in TPH]: string; } & GetPlaceholderOption<TAfter> : {};
28. ΍ͬͨͥʂ🎉
29. ͪͳΈʹ͜ΕΛॻࣜԽؔ਺ʹదԠ͢Δͱʜ จࣈྻϦςϥϧܕ͔Β
    1MBDFIPMEFS
    ͷ෼͚ͩLFZ͕ੜ͑ΔΦϒδΣΫτͷܕΛ ੜ੒Ͱ͖ͨͷͰ
    as const
    ͞Ε͍ͯΔจݴϦιʔε
    `RESOUCES`
    ͕͋Δͱ͢Δͱʜ
    type TranslateFunc = < T extends keyof typeof RESOURCES, >( key: T, params: GetPlaceholderOption<(typeof RESOURCES)[T]>, ) => string;
30. ͪΌΜͱܕౖ͕ͬͯ͘Εͨʂ👮 name
    Ͱͳ͘
    namae
    Λ
    LFZ
    ʹͪ͠Όͬͨ࣌
    ͪΌΜͱ
    name
    ͔ฉ͍ͯ͘Δ
    Name ͚ͩࢦఆͨ࣌͠
    ͪΌΜͱ
    `title`
    ͕଍Γͳ͍ΑౖͬͯΒΕΔ
    
31. ࠓճ঺հͨ͠ख๏ͷ൚༻ੑ ࠓճ͸จࣈྻΛ
    A\\
    ^^A
    Ͱғ·ΕΔ෦෼ͱͦͷޙͷͭʹ෼͚ͯಡΈਐΊͨ
    Ͳ͏ಡΈਐΊΔ͔͸
    JOGFS
    ͱ
    5FNQMBUF
    -JUFSBM
    5ZQFT
    ͷ૊Έ߹Θͤ࣍ୈ
    w ҰจࣈͣͭಡΜͰ͍͘͜ͱ΋Ͱ͖Δ
    w ಛఆͷه߸΍༧໿ޠ͚ͩಡΈਐΊΔ͜ͱ΋Ͱ͖Δ
    w ࠶ؼͱ৚݅෼ذΛ૊Έ߹ΘͤΔ͜ͱ΋Ͱ͖Δ
    ͭ·Γେମͷ1BSTFS
    
    5PLFOJ[FS
    ͸ॻ͚ͦ͏ͩͶʂ
32. ·ͱΊͱԠ༻ JOGFS
    ͱ
    $POEJUJPOBM
    5ZQFT
    ͱ࠶ؼܕΛ૊Έ߹ΘͤΔͱ൚༻తͳจࣈྻͷύʔ εͬΆ͍ॲཧ͕૊ΊΔ
    
    ͳͷͰจݴͷ1MBDFIPMEFSΛղੳ͢Δ͜ͱ΋Ͱ͖·ͨ͠
    🎉
    ࠓճͷίʔυ͕ࢼͤΔ1MBZHSPVOE΋༻ҙͨ͠ͷͰ৮ͬͯΈͯͶ
    ࠓճͷྫҎ֎ʹ΋Ԡ༻ྫ͸͋ΔͷͰνϟϨϯδͯ͠ΈΑ͏ʂ
    w ྫ
    
    ΫΤϦจࣈྻͷղੳ
    
    QBUIͷղੳ
    
    ࢛ଇԋࢉ
    
    ϓϩάϥϜॲཧܥ
33. 3ZVTFJ
    4BKJLJ
    
    !TBKJLJY ͋Γ͕ͱ͏͍͟͝·ͨ͠