Copying Array Methods arrived at TypeScript

Reboot kansai.ts #4の発表資料です
https://kansaits.connpass.com/event/299545/

参考
https://devblogs.microsoft.com/typescript/announcing-typescript-5-2/
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed

Transcript

1. Copying Array Methods KansaiTS#4 @jiko21 arrived at TypeScript
2. About jiko21… Name: Daiki Kojima (jiko21) Multistack Engineer @ AppBrew.inc Love: Guitar, TypeScript, baseball @jiko21 @jiko_21
3. Copying Array Method
4. About Copying array method • ࠓ೥ʹͳͬͯECMAScriptʹೖͬͨproposal • ഑ྻʹରͯ͠ඇഁյૢ࡞͕Ͱ͖Δ(ޙड़) • Α͏΍͘TypeScript 5.2Ͱܕ৘ใ͕௥Ճ͞Ε·ͨ͠ʂ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed
5. ഑ྻʹର͢Δඇഁյૢ࡞ͬͯʁ • reverseɺsortͳͲͷapi͸ɺݩͷ഑ྻࣗମʹରͯ͠ഁյతૢ࡞͕ɹ ൃੜͯ͠͠·͏ • ඇഁյૢ࡞͕Ͱ͖Δͱݩ഑ྻ౳Λอ࣋ͭͭ͠ιʔτ౳͕ߦ͑ͯɹ ͏Ε͍͠ const arr = [1, 2, 3]; arr.reverse(); console.log(arr); // [3, 2, 1] const arr = [1, 2, 3]; const arr_cpy = arr.toReversed(); console.log(arr); // [1, 2, 3] console.log(arr_cpy); // [3, 2, 1]
6. ࠓճ௥Ճ͞Εͨ΋ͷ • Array • toReversed • toSorted • toSpliced • with
7. toReversed
8. Array#toReversed • reverseͷඇഁյ൛ const arr = [1, 2, 3]; arr.reverse(); console.log(arr); // [3, 2, 1] const arr = [1, 2, 3]; const arr_cpy = arr.toReversed(); console.log(arr); // [1, 2, 3] console.log(arr_cpy); // [3, 2, 1]
9. toSorted
10. Array#toSorted • sortͷඇഁյ൛ const arr = [1, 4, 3, 2]; const arr_cpy = arr.toSorted((a, b) => a - b); console.log(arr); // [1, 4, 3, 2] console.log(arr_cpy); // [1, 2, 3, 4] const arr = [1, 4, 3, 2]; arr.sort((a, b) => a - b); console.log(arr); // [1, 2, 3, 4]
11. toSpliced
12. Array#toSpliced • spliceͷඇഁյ൛ const arr = [1, 4, 3, 2]; arr.splice(2, 1, 10); console.log(arr); // [1, 4, 10, 2] const arr = [1, 4, 3, 2]; const arr_cpy = arr.toSpliced(2, 1, 10); console.log(arr); // [1, 4, 3, 2] console.log(arr_cpy); // [1, 4, 10, 2]
13. with
14. Array#with • ͜Ε͚ͩ͸ΦϦδφϧʁͳϝιου(cloneʹ͸ͳ͍) • ഑ྻίϐʔͯ͠த਎Λॻ͖׵͍͑ͨ৔߹ʹ࢖͏ const arr = [1, 4, 3, 2]; const arr_cpy = arr.with(2, 10); console.log(arr); // [1, 4, 3, 2] console.log(arr_cpy); // [1, 4, 10, 2]
15. ஫ҙ఺
16. Copying Array Method͸γϟϩʔίϐʔ • ৽͍͠ม਺ʹ୅ೖ͍ͯ͠ΔͷͰΘ͢Εͯ͠·͍͕͕ͪͩɺ Copying Array Method͸σΟʔϓίϐʔ͸͍ͯ͠ͳ͍ • ↑ͦͷͨΊɺ഑ྻͷத਎ʹΑͬͯڍಈ͕มΘͬͯ͘Δ QSJNJUJWF஋ͷ৔߹ 0CKFDU౳ͷ৔߹ const arr = [1, 2, 3]; const arr_cpy = arr.toReversed(); arr[0] = 100; console.log(arr); // [100, 2, 3] console.log(arr_cpy); // [3, 2, 1] const arr = [{ id: 1, name: 'eric' }]; const arr_cpy = arr.toReversed(); arr[0].name = '...'; console.log(arr[0].name); // '...' console.log(arr_cpy[0].name); // '...'
17. ύϑΥʔϚϯε
18. ύϑΥʔϚϯε • ৽͍͠method͕ੜ͑ͯɺܕ৘ใ΋௥Ճ͞Εͨͱ͍͏͜ͱ͸ɺɹɹɹ ͦΕ૬Ԡʹ͍͍͸ͣʂ • ύϑΥʔϚϯεʹ໰୊͕͋Δͱ৽͍͠ϝιου͕͋ͬͯ΋࢖͏ͷ͕ɹ ͨΊΒΘΕΔ…
19. ࣮ݧͯ͠ΈΔ • ҎԼͷΑ͏ͳobject͕ೖͬͨ഑ྻ(௕͞N)ʹରͯ͠ૢ࡞Λߦ͏ • ࣮ߦ؀ڥ • Node: v20.6.0 • ϚγϯεϖοΫ: Apple M1 Pro / 32GB type User = { id: number; name: string; }
20. ͜Μͳײ͡ͷίʔυ import { performance } from'node:perf_hooks'; const bigArray = []; const bigArrayN = parseInt(process.argv[2]); for (let i = 0; i < bigArrayN; i++) { bigArray.push({id: i, name: `user ${i}`}); } // previousReverse performance.mark('previousSortStart'); const _arr1 = [...bigArray].sort((a, b) => b.id - a.id); performance.mark('previousSortEnd'); const previousSortStatus = performance.measure('previousSort', 'previousSortStart', 'previousSortEnd'); // nowReverse performance.mark('nowReverseStart'); const _arr2 = bigArray.toSorted((a, b) => b.id - a.id); performance.mark('nowReverseEnd'); const nowSortStatus = performance.measure('nowReverse', 'nowReverseStart', 'nowReverseEnd'); console.log(`${previousSortStatus.duration}, ${nowSortStatus.duration}`); ΈΜͳΑ͘΍Δʁ
    4QSFBEߏจͰίϐʔ͢Δ৔߹ $PQZJOH
    "SSBZ
    .FUIPEΛ
    ࢖ͬͯΈΔ
21. ύϑΥʔϚϯε
22. ύϑΥʔϚϯε
23. ͳΜ͔શମతʹ͸ྑͦ͞͏ʁ
24. N=100000Ͱͷൺֱ • ·͊ݢฒΈૣͦ͏ • spliceͱ͔withΈ͍ͨͳɹ ಛఆͷindex΁ͷૢ࡞͸ɹ ڧ͍͔΋
25. ࢖͏Ϟνϕʔγϣϯ
26. ҎԼ͋Γͦ͏ 1. ύϑΥʔϚϯε͕͍͍ 2.ܕνΣοΫճආ͔ܳΒͷ։์
27. ܕνΣοΫճආ͔ܳΒͷ։์ • ReadonlyͳArrayʹରͯ͠ݱঢ়(5.1<)·Ͱ͸ҎԼͷΑ͏ʹͯͨ͠͸ͣ • ܕؔ܎ແཧ΍Γ௨͢ܥ • @ts-ignoreͰԥΓ௵͢ • type-festͱ͔ͰWritableͱ͔Λassertionͯ͠ճආ • ߹๏తղܾܥ • spreadߏจͱ͔Ͱ഑ྻͦͷ΋ͷΛίϐʔ
28. ܕؔ܎ແཧ΍Γ௨͢ܥ • ts-ignore΍type-festͱ͔Λ࢖ͬͯແཧ΍ΓܕΤϥʔ͚ͩ௨͢ Readonly͕ػೳ͠ͳ͍… type Player = {id: number; name: string;}; const array: ReadonlyArray<Player> = [ {id: 51, name: 'ichiro'}, {id: 1, name: 'shinjo'} ]; // @ts-ignore array.reverse(); import { Writable } from 'type-fest/source/writable'; type Player = {id: number; name: string;}; const array: ReadonlyArray<Player> = [ {id: 51, name: 'ichiro'}, {id: 1, name: 'shinjo'} ]; (array as Writable<Player>[]) .reverse();
29. spreadߏจͱ͔Ͱ഑ྻͦͷ΋ͷΛίϐʔ • Spreadߏจͱ͔ͰҰ୴഑ྻΛίϐʔ ܕΤϥʔ͸ͳ͍͚ͲύϑΥʔϚϯε͕… type Player = {id: number; name: string;}; const array: ReadonlyArray<Player> = [ {id: 51, name: 'ichiro'}, {id: 1, name: 'shinjo'} ]; [...array].reverse();
30. Copying Array MethodͳΒ… 1. ܕΤϥʔ͕ى͖ͳ͍ 2. ܕΤϥʔΛѲΓͭͿ͞ͳͯ͘΋͍͍ 3. ύϑΥʔϚϯε΋͍͍ type Player = {id: number; name: string;}; const array: ReadonlyArray<Player> = [ {id: 51, name: 'ichiro'}, {id: 1, name: 'shinjo'} ]; const newArray = array.toReversed();
31. ·ͱΊ
32. Copying Array Method͸͍͍ͧʂ • ଎͍(ΑͬΆͲͰ͔͍ཁૉ਺͡Όͳ͍ݶΓ)! • εϚʔτ! • ܕΤϥʔ͕ى͖ͳ͍!
33. ࢀߟ • https://devblogs.microsoft.com/typescript/announcing- typescript-5-2/ • https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Global_Objects/Array/toReversed