{"id":9983,"date":"2022-04-14T16:52:54","date_gmt":"2022-04-14T14:52:54","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/"},"modified":"2022-09-19T13:16:29","modified_gmt":"2022-09-19T11:16:29","slug":"frontend-thursday-vol-83-typescript-4-7-beta-ladle","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/","title":{"rendered":"Frontend Thursday vol. 83 – Typescript 4.7 beta, Ladle"},"content":{"rendered":"\n

1. TypeScript 4.7 beta<\/h2>\n\n\n\n

Release Trains to jedna z lepszych rzeczy jakie przydarzy\u0142y si\u0119 \u015brodowisku IT. Rzadkie releasy i skomplikowane migracje zast\u0105pili\u015bmy cz\u0119stymi wydaniami wymagaj\u0105cymi minimalnych zmian w kodzie. To wszystko prawda, ale jestem ciekaw ilu z Was by\u0142o przed przeczytaniem nag\u0142\u00f3wka tej sekcji powiedzie\u0107 jaki numerek ma najnowsza obecnie wersja TypeScript i jakie przynios\u0142a nowo\u015bci. No c\u00f3\u017c, w \u017cyciu tak ju\u017c czasem bywa, \u017ce pe\u0142ne ekscytacji i przyg\u00f3d \u017cycie w poszukiwaniu stabilno\u015bci zamieniamy na umiarkowanie ciekaw\u0105 codzienno\u015b\u0107.<\/p>\n\n\n\n

TypeScript 4.6 ukaza\u0142 si\u0119 zaledwie p\u00f3\u0142tora miesi\u0105ca temu, a kilka dni temu \u015bwiat\u0142o dzienne ujrza\u0142a beta TypeScript 4.7. Pr\u00f3bowa\u0142em przypomnie\u0107 sobie nowo\u015bci jakie wnios\u0142o poprzednie du\u017ce wydanie, ale poleg\u0142em z kretesem. Na szcz\u0119\u015bcie w 73 edycji naszego przegl\u0105du<\/a> znalaz\u0142em odpowied\u017a (usprawniono rozwijanie rekurencyjnych typ\u00f3w i dodano mo\u017cliwo\u015b\u0107 wykonania kodu w konstruktorze przed super) i wcale nie dziwi mnie, \u017ce ju\u017c wtedy ziewa\u0142em z nudy.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Nie popadajmy jednak w marazm i z nadziej\u0105 sp\u00f3jrzmy na nowo\u015bci jakie przynosi TypeScript 4.7. Najwi\u0119ksz\u0105 ze wszystkich jest chyba wsparcie dla ECMAScript Module w Node.js. Modu\u0142y w JavaScript to prawdziwa g\u00f3ra lodowa, dlatego wszystkim, kt\u00f3rzy nie s\u0105 zaznajomieni z tematem polecam film od Przeprogramowanych po\u015bwi\u0119cony w ca\u0142o\u015bci temu zagadnieniu.<\/a><\/p>\n\n\n\n

Co sk\u0142ada si\u0119 na wsparcie dla ECMAScript Modules? Przede wszystkim do tsconfig.json i package.json trafiaj\u0105 nowe pola, kt\u00f3re decydowa\u0107 b\u0119d\u0105 o tym w jaki spos\u00f3b traktowane s\u0105 importy w danym module. Do tego dochodzi wsparcie dla plik\u00f3w `.mts` i `.cts`, kt\u00f3re kompilowane b\u0119d\u0105 odpowiednio do plik\u00f3w `.mjs` i \u2018.cjs`. Oczywi\u015bcie jak zawsze w przypadku modu\u0142\u00f3w, temat jest du\u017co bardziej z\u0142o\u017cony, dlatego wszystkich zainteresowanych szczeg\u00f3\u0142ami odsy\u0142am do notki Microsoftu<\/a>.<\/p>\n\n\n\n

Nowa edycja TypeScript jak zwykle przynosi r\u00f3wnie\u017c drobne usprawnienia inferencji typ\u00f3w. Wersja 4.7 b\u0119dzie lepiej radzi\u0107 sobie z analiz\u0105 przep\u0142ywu kodu, dzi\u0119ki czemu w wielu przypadkach b\u0119dzie w stanie zaw\u0119zi\u0107 inferowane typy Usprawniona zosta\u0142a r\u00f3wnie\u017c inferencja typ\u00f3w metod w obiektach.<\/p>\n\n\n\n

declare function f<T>(arg: {\n    produce: (n: string) => T,\n    consume: (x: T) => void }\n): void;\n\n\/\/ Works\nf({\n    produce: () => "hello",\n    consume: x => x.toLowerCase()\n});\n\n\/\/ Works\nf({\n    produce: (n: string) => n,\n    consume: x => x.toLowerCase(),\n});\n\n\/\/ Was an error, now works.\nf({\n    produce: n => n,\n    consume: x => x.toLowerCase(),\n});\n\n\/\/ Was an error, now works.\nf({\n    produce: function () { return "hello"; },\n    consume: x => x.toLowerCase(),\n});\n\n\/\/ Was an error, now works.\nf({\n    produce() { return "hello" },\n    consume: x => x.toLowerCase(),\n});<\/code><\/pre>\n\n\n\n
Kolejn\u0105 nowo\u015bci\u0105 jest wprowadzenie Instantiation Expressions, kt\u00f3re w zwi\u0119z\u0142y spos\u00f3b pozwalaj\u0105 zaw\u0119zi\u0107 typ danej funkcji, czy klasy. Ci\u0119\u017cko to wyt\u0142umaczy\u0107, wi\u0119c po prostu zerknijcie na przyk\u0142ad poni\u017cej:<\/p>\n\n\n\n
interface Box<T> {  value: T; }\n\nfunction makeBox<T>(value: T) {\n    return { value };\n}\n\n\/\/ In TypeScript 4.6\nconst makeStringBox: (string: string) => Box<string> = makeBox;\n\n\/\/ In TypeScript 4.7\nconst makeStringBox = makeBox<string>;\n\nmakeStringBos(42); \/\/ TypeScript correctly rejects this.<\/code><\/pre>\n\n\n\n
Na koniec zostawi\u0142em sobie prawdziw\u0105 bomb\u0119: wariancja typ\u00f3w. Nie wchodz\u0105c w szczeg\u00f3\u0142y, wariancja w przypadku generycznych typ\u00f3w pozwala okre\u015bli\u0107 czy dane typy mog\u0105 zosta\u0107 do siebie przypisane na podstawie struktury dziedziczenia ich generycznych parametr\u00f3w. Dog\u0142\u0119bne wyt\u0142umaczenie jak dzia\u0142a wariancja zdecydowanie nie mie\u015bci si\u0119 w formule naszych przegl\u0105d\u00f3w, dlatego zainteresowanych odsy\u0142am do dokumentacji Kotlina<\/a>, kt\u00f3ry zdecydowa\u0142 si\u0119 na tak\u0105 sam\u0105 nomenklatur\u0119 jak TypeScript (czyli s\u0142owa kluczowe in i out). Po co nam wariancja w strukturalnie typowanym j\u0119zyku? Na ch\u0142opski rozum, wszystkie typy mo\u017cna rozwin\u0105\u0107 i por\u00f3wna\u0107. Jak si\u0119 okazuje, w przypadku skomplikowanych zagnie\u017cd\u017conych typ\u00f3w sprawdzenie wariancji b\u0119dzie znacznie szybsze ni\u017c ich rozwijanie.<\/p>\n\n\n\n
interface Animal {\n    animalStuff: any;\n}\n\ninterface Dog extends Animal {\n    dogStuff: any;\n}\n\ntype Getter<out T> = () => T;\ntype Setter<in T> = (value: T) => void;\n\nlet animalGetter: Getter<Animal>;\nlet dogGetter: Getter<Dog>;\nanimalGetter = dogGetter; \/\/ This will work\ndogGetter = animalGetter; \/\/ This will throw an error\n\nlet animalSetter: Setter<Animal>;\nlet dogSetter: Setter<Dog>;\nanimalSetter = dogSetter; \/\/ This will throw an error\ndogSetter = animalSetter; \/\/ This will work<\/code><\/pre>\n\n\n\n
Czy TypeScript mnie zawi\u00f3d\u0142? Wyj\u0105tkowo wydaje si\u0119, \u017ce wydanie 4.7 b\u0119dzie jednym z bardziej interesuj\u0105cych. Z ostatecznymi wyrokami poczekajmy jeszcze do momentu, kiedy pewne b\u0119dzie czy wszystkie przedstawione tutaj funkcjonalno\u015bci dotr\u0105 do stabilnej wersji.<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-7-beta\/<\/a>
https:\/\/kotlinlang.org\/docs\/generics.html<\/a>
https:\/\/www.youtube.com\/watch?v=5upaxzBNbmQ&t=12s<\/a><\/p>\n\n\n\n
2. \u00a0Leniwy Storybook i alternatywy<\/h2>\n\n\n\n
W ostatnich tygodniach Storybook doczeka\u0142 si\u0119 wreszcie sensownej alternatywy w postaci projektu Ladle. Narz\u0119dzie to jest alternatyw\u0105 typu \u201cDrop-In\u201d (to znaczy, \u017ce nie powinno wymaga\u0107 od Was \u017cadnych zmian w istniej\u0105cych storiesach) i chwali si\u0119 mi\u0119dzy innymi 20x mniejsz\u0105 paczk\u0105 wynikow\u0105 i 10x szybszym startem w trybie developmentu. Lepszy performance osi\u0105gni\u0119to dzi\u0119ki wykorzystaniu nowoczesnych narz\u0119dzi do budowania aplikacji takich jak Vite i Rollup. Wady? Na ten moment Ladle wspiera tylko Reactowe projekt i je\u015bli podczas konfiguracji Storybooka grzebali\u015bcie w konfiguracji Webpacka to migracja mo\u017ce nie wygl\u0105da\u0107 tak kolorowo.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Ca\u0142e szcz\u0119\u015bcie Storybook nie stoi w miejscu i r\u00f3wnie\u017c nieustannie pracuje nad popraw\u0105 wydajno\u015bci. W wersji 6.4 (o kt\u00f3rej w szczeg\u00f3\u0142ach pisali\u015bmy w 66 edycji naszego przegl\u0105du<\/a>) dodane zosta\u0142o wsparcie dla code splitting, co znacz\u0105co przyspieszy\u0142o pocz\u0105tkowe \u0142adowanie. Do wersji 6.5 trafi natomiast Lazy Compilation, co zwiastuje prawdziw\u0105 rewolucj\u0119 je\u015bli chodzi o Developer Experience. Poprzez kompilacj\u0119 jedynie wymaganych do wyrenderowania obecnego widoku komponent\u00f3w czas do zobaczenia pierwszego story zmala\u0142 4x. Ponadto dzi\u0119ki odpowiedniemu zastosowaniu cache\u2019y kolejne buildy s\u0105 jeszcze 2x szybsze.<\/p>\n\n\n\n
\"\"
Czas pierwszego uruchomienia<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Czas pierwszego uruchomienia z rozgrzanym cache<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Czas kolejnych prze\u0142adowa\u0144<\/figcaption><\/figure><\/div>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/www.ladle.dev\/blog\/introducing-ladle\/<\/a>
https:\/\/storybook.js.org\/blog\/storybook-lazy-compilation-for-webpack\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Po ostatnich burzliwych tygodniach wreszcie doczekali\u015bmy spokojniejszych czas\u00f3w (czyli nie tylko ja czekam ju\u017c na \u015bwi\u0119ta :D). W tym tygodniu nasz przegl\u0105d zdominowa\u0142 TypeScript 4.7 i kilka wydarze\u0144 wok\u00f3\u0142 Storybooka. Nie przed\u0142u\u017caj\u0105c, zapraszamy do lektury!<\/p>\n","protected":false},"author":12,"featured_media":8039,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-9983","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/FRONTEND-1.png","feature_image_visible":false,"estimated_reading_time":"4","feature_image_blog":false},"yoast_head":"\nFrontend Thursday vol. 83 - Typescript 4.7 beta, Ladle - Vived<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 83 - Typescript 4.7 beta, Ladle - Vived\" \/>\n<meta property=\"og:description\" content=\"Po ostatnich burzliwych tygodniach wreszcie doczekali\u015bmy spokojniejszych czas\u00f3w (czyli nie tylko ja czekam ju\u017c na \u015bwi\u0119ta :D). W tym tygodniu nasz przegl\u0105d zdominowa\u0142 TypeScript 4.7 i kilka wydarze\u0144 wok\u00f3\u0142 Storybooka. Nie przed\u0142u\u017caj\u0105c, zapraszamy do lektury!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-14T14:52:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/FRONTEND-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/FRONTEND-1.png\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 83 – Typescript 4.7 beta, Ladle\",\"datePublished\":\"2022-04-14T14:52:54+00:00\",\"dateModified\":\"2022-09-19T11:16:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/\"},\"wordCount\":820,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6ckl0m.jpeg\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/\",\"name\":\"Frontend Thursday vol. 83 - Typescript 4.7 beta, Ladle - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6ckl0m.jpeg\",\"datePublished\":\"2022-04-14T14:52:54+00:00\",\"dateModified\":\"2022-09-19T11:16:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6ckl0m.jpeg\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6ckl0m.jpeg\",\"width\":631,\"height\":395},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 83 – Typescript 4.7 beta, Ladle\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vived.io\/pl\/#website\",\"url\":\"https:\/\/vived.io\/pl\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vived.io\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vived.io\/pl\/#organization\",\"name\":\"Vived\",\"url\":\"https:\/\/vived.io\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"width\":136,\"height\":45,\"caption\":\"Vived\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"caption\":\"Tomasz Borowicz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frontend Thursday vol. 83 - Typescript 4.7 beta, Ladle - Vived","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 83 - Typescript 4.7 beta, Ladle - Vived","og_description":"Po ostatnich burzliwych tygodniach wreszcie doczekali\u015bmy spokojniejszych czas\u00f3w (czyli nie tylko ja czekam ju\u017c na \u015bwi\u0119ta :D). W tym tygodniu nasz przegl\u0105d zdominowa\u0142 TypeScript 4.7 i kilka wydarze\u0144 wok\u00f3\u0142 Storybooka. Nie przed\u0142u\u017caj\u0105c, zapraszamy do lektury!","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/","og_site_name":"Vived","article_published_time":"2022-04-14T14:52:54+00:00","article_modified_time":"2022-09-19T11:16:29+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/FRONTEND-1.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","twitter_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/FRONTEND-1.png","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 83 – Typescript 4.7 beta, Ladle","datePublished":"2022-04-14T14:52:54+00:00","dateModified":"2022-09-19T11:16:29+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/"},"wordCount":820,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6ckl0m.jpeg","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/","name":"Frontend Thursday vol. 83 - Typescript 4.7 beta, Ladle - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6ckl0m.jpeg","datePublished":"2022-04-14T14:52:54+00:00","dateModified":"2022-09-19T11:16:29+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6ckl0m.jpeg","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6ckl0m.jpeg","width":631,"height":395},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-83-typescript-4-7-beta-ladle\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 83 – Typescript 4.7 beta, Ladle"}]},{"@type":"WebSite","@id":"https:\/\/vived.io\/pl\/#website","url":"https:\/\/vived.io\/pl\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vived.io\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/vived.io\/pl\/#organization","name":"Vived","url":"https:\/\/vived.io\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","width":136,"height":45,"caption":"Vived"},"image":{"@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb","name":"Tomasz Borowicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","caption":"Tomasz Borowicz"}}]}},"blocks_vived":[{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>1. TypeScript 4.7 beta<\/h2>\n","innerContent":["\n<h2>1. TypeScript 4.7 beta<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Release Trains to jedna z lepszych rzeczy jakie przydarzy\u0142y si\u0119 \u015brodowisku IT. Rzadkie releasy i skomplikowane migracje zast\u0105pili\u015bmy cz\u0119stymi wydaniami wymagaj\u0105cymi minimalnych zmian w kodzie. To wszystko prawda, ale jestem ciekaw ilu z Was by\u0142o przed przeczytaniem nag\u0142\u00f3wka tej sekcji powiedzie\u0107 jaki numerek ma najnowsza obecnie wersja TypeScript i jakie przynios\u0142a nowo\u015bci. No c\u00f3\u017c, w \u017cyciu tak ju\u017c czasem bywa, \u017ce pe\u0142ne ekscytacji i przyg\u00f3d \u017cycie w poszukiwaniu stabilno\u015bci zamieniamy na umiarkowanie ciekaw\u0105 codzienno\u015b\u0107.<\/p>\n","innerContent":["\n<p>Release Trains to jedna z lepszych rzeczy jakie przydarzy\u0142y si\u0119 \u015brodowisku IT. Rzadkie releasy i skomplikowane migracje zast\u0105pili\u015bmy cz\u0119stymi wydaniami wymagaj\u0105cymi minimalnych zmian w kodzie. To wszystko prawda, ale jestem ciekaw ilu z Was by\u0142o przed przeczytaniem nag\u0142\u00f3wka tej sekcji powiedzie\u0107 jaki numerek ma najnowsza obecnie wersja TypeScript i jakie przynios\u0142a nowo\u015bci. No c\u00f3\u017c, w \u017cyciu tak ju\u017c czasem bywa, \u017ce pe\u0142ne ekscytacji i przyg\u00f3d \u017cycie w poszukiwaniu stabilno\u015bci zamieniamy na umiarkowanie ciekaw\u0105 codzienno\u015b\u0107.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>TypeScript 4.6 ukaza\u0142 si\u0119 zaledwie p\u00f3\u0142tora miesi\u0105ca temu, a kilka dni temu \u015bwiat\u0142o dzienne ujrza\u0142a beta TypeScript 4.7. Pr\u00f3bowa\u0142em przypomnie\u0107 sobie nowo\u015bci jakie wnios\u0142o poprzednie du\u017ce wydanie, ale poleg\u0142em z kretesem. Na szcz\u0119\u015bcie w <a href=\"https:\/\/vived.io\/frontend-thursday-vol-73-typescript-4-6-beta-google-proponuje-alternatywe-dla-floc\/\">73 edycji naszego przegl\u0105du<\/a> znalaz\u0142em odpowied\u017a (usprawniono rozwijanie rekurencyjnych typ\u00f3w i dodano mo\u017cliwo\u015b\u0107 wykonania kodu w konstruktorze przed super) i wcale nie dziwi mnie, \u017ce ju\u017c wtedy ziewa\u0142em z nudy.<\/p>\n","innerContent":["\n<p>TypeScript 4.6 ukaza\u0142 si\u0119 zaledwie p\u00f3\u0142tora miesi\u0105ca temu, a kilka dni temu \u015bwiat\u0142o dzienne ujrza\u0142a beta TypeScript 4.7. Pr\u00f3bowa\u0142em przypomnie\u0107 sobie nowo\u015bci jakie wnios\u0142o poprzednie du\u017ce wydanie, ale poleg\u0142em z kretesem. Na szcz\u0119\u015bcie w <a href=\"https:\/\/vived.io\/frontend-thursday-vol-73-typescript-4-6-beta-google-proponuje-alternatywe-dla-floc\/\">73 edycji naszego przegl\u0105du<\/a> znalaz\u0142em odpowied\u017a (usprawniono rozwijanie rekurencyjnych typ\u00f3w i dodano mo\u017cliwo\u015b\u0107 wykonania kodu w konstruktorze przed super) i wcale nie dziwi mnie, \u017ce ju\u017c wtedy ziewa\u0142em z nudy.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4214,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/Apr-14-2022-16-51-11.gif\" alt=\"\" class=\"wp-image-4214\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/Apr-14-2022-16-51-11.gif\" alt=\"\" class=\"wp-image-4214\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nie popadajmy jednak w marazm i z nadziej\u0105 sp\u00f3jrzmy na nowo\u015bci jakie przynosi TypeScript 4.7. Najwi\u0119ksz\u0105 ze wszystkich jest chyba wsparcie dla ECMAScript Module w Node.js. Modu\u0142y w JavaScript to prawdziwa g\u00f3ra lodowa, dlatego wszystkim, kt\u00f3rzy nie s\u0105 zaznajomieni z tematem polecam <a href=\"https:\/\/youtu.be\/5upaxzBNbmQ\">film od Przeprogramowanych po\u015bwi\u0119cony w ca\u0142o\u015bci temu zagadnieniu.<\/a><\/p>\n","innerContent":["\n<p>Nie popadajmy jednak w marazm i z nadziej\u0105 sp\u00f3jrzmy na nowo\u015bci jakie przynosi TypeScript 4.7. Najwi\u0119ksz\u0105 ze wszystkich jest chyba wsparcie dla ECMAScript Module w Node.js. Modu\u0142y w JavaScript to prawdziwa g\u00f3ra lodowa, dlatego wszystkim, kt\u00f3rzy nie s\u0105 zaznajomieni z tematem polecam <a href=\"https:\/\/youtu.be\/5upaxzBNbmQ\">film od Przeprogramowanych po\u015bwi\u0119cony w ca\u0142o\u015bci temu zagadnieniu.<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Co sk\u0142ada si\u0119 na wsparcie dla ECMAScript Modules? Przede wszystkim do tsconfig.json i package.json trafiaj\u0105 nowe pola, kt\u00f3re decydowa\u0107 b\u0119d\u0105 o tym w jaki spos\u00f3b traktowane s\u0105 importy w danym module. Do tego dochodzi wsparcie dla plik\u00f3w `.mts` i `.cts`, kt\u00f3re kompilowane b\u0119d\u0105 odpowiednio do plik\u00f3w `.mjs` i \u2018.cjs`. Oczywi\u015bcie jak zawsze w przypadku modu\u0142\u00f3w, temat jest du\u017co bardziej z\u0142o\u017cony, dlatego wszystkich zainteresowanych szczeg\u00f3\u0142ami odsy\u0142am do <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-7-beta\/#esm-nodejs\">notki Microsoftu<\/a>.<\/p>\n","innerContent":["\n<p>Co sk\u0142ada si\u0119 na wsparcie dla ECMAScript Modules? Przede wszystkim do tsconfig.json i package.json trafiaj\u0105 nowe pola, kt\u00f3re decydowa\u0107 b\u0119d\u0105 o tym w jaki spos\u00f3b traktowane s\u0105 importy w danym module. Do tego dochodzi wsparcie dla plik\u00f3w `.mts` i `.cts`, kt\u00f3re kompilowane b\u0119d\u0105 odpowiednio do plik\u00f3w `.mjs` i \u2018.cjs`. Oczywi\u015bcie jak zawsze w przypadku modu\u0142\u00f3w, temat jest du\u017co bardziej z\u0142o\u017cony, dlatego wszystkich zainteresowanych szczeg\u00f3\u0142ami odsy\u0142am do <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-7-beta\/#esm-nodejs\">notki Microsoftu<\/a>.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nowa edycja TypeScript jak zwykle przynosi r\u00f3wnie\u017c drobne usprawnienia inferencji typ\u00f3w. Wersja 4.7 b\u0119dzie lepiej radzi\u0107 sobie z analiz\u0105 przep\u0142ywu kodu, dzi\u0119ki czemu w wielu przypadkach b\u0119dzie w stanie zaw\u0119zi\u0107 inferowane typy Usprawniona zosta\u0142a r\u00f3wnie\u017c inferencja typ\u00f3w metod w obiektach.<\/p>\n","innerContent":["\n<p>Nowa edycja TypeScript jak zwykle przynosi r\u00f3wnie\u017c drobne usprawnienia inferencji typ\u00f3w. Wersja 4.7 b\u0119dzie lepiej radzi\u0107 sobie z analiz\u0105 przep\u0142ywu kodu, dzi\u0119ki czemu w wielu przypadkach b\u0119dzie w stanie zaw\u0119zi\u0107 inferowane typy Usprawniona zosta\u0142a r\u00f3wnie\u017c inferencja typ\u00f3w metod w obiektach.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">declare function f<T>(arg: {\n    produce: (n: string) => T,\n    consume: (x: T) => void }\n): void;\n\n\/\/ Works\nf({\n    produce: () => \"hello\",\n    consume: x => x.toLowerCase()\n});\n\n\/\/ Works\nf({\n    produce: (n: string) => n,\n    consume: x => x.toLowerCase(),\n});\n\n\/\/ Was an error, now works.\nf({\n    produce: n => n,\n    consume: x => x.toLowerCase(),\n});\n\n\/\/ Was an error, now works.\nf({\n    produce: function () { return \"hello\"; },\n    consume: x => x.toLowerCase(),\n});\n\n\/\/ Was an error, now works.\nf({\n    produce() { return \"hello\" },\n    consume: x => x.toLowerCase(),\n});<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">declare function f<T>(arg: {\n    produce: (n: string) => T,\n    consume: (x: T) => void }\n): void;\n\n\/\/ Works\nf({\n    produce: () => \"hello\",\n    consume: x => x.toLowerCase()\n});\n\n\/\/ Works\nf({\n    produce: (n: string) => n,\n    consume: x => x.toLowerCase(),\n});\n\n\/\/ Was an error, now works.\nf({\n    produce: n => n,\n    consume: x => x.toLowerCase(),\n});\n\n\/\/ Was an error, now works.\nf({\n    produce: function () { return \"hello\"; },\n    consume: x => x.toLowerCase(),\n});\n\n\/\/ Was an error, now works.\nf({\n    produce() { return \"hello\" },\n    consume: x => x.toLowerCase(),\n});<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kolejn\u0105 nowo\u015bci\u0105 jest wprowadzenie Instantiation Expressions, kt\u00f3re w zwi\u0119z\u0142y spos\u00f3b pozwalaj\u0105 zaw\u0119zi\u0107 typ danej funkcji, czy klasy. Ci\u0119\u017cko to wyt\u0142umaczy\u0107, wi\u0119c po prostu zerknijcie na przyk\u0142ad poni\u017cej:<\/p>\n","innerContent":["\n<p>Kolejn\u0105 nowo\u015bci\u0105 jest wprowadzenie Instantiation Expressions, kt\u00f3re w zwi\u0119z\u0142y spos\u00f3b pozwalaj\u0105 zaw\u0119zi\u0107 typ danej funkcji, czy klasy. Ci\u0119\u017cko to wyt\u0142umaczy\u0107, wi\u0119c po prostu zerknijcie na przyk\u0142ad poni\u017cej:<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">interface Box<T> {  value: T; }\n\nfunction makeBox<T>(value: T) {\n    return { value };\n}\n\n\/\/ In TypeScript 4.6\nconst makeStringBox: (string: string) => Box<string> = makeBox;\n\n\/\/ In TypeScript 4.7\nconst makeStringBox = makeBox<string>;\n\nmakeStringBos(42); \/\/ TypeScript correctly rejects this.<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">interface Box<T> {  value: T; }\n\nfunction makeBox<T>(value: T) {\n    return { value };\n}\n\n\/\/ In TypeScript 4.6\nconst makeStringBox: (string: string) => Box<string> = makeBox;\n\n\/\/ In TypeScript 4.7\nconst makeStringBox = makeBox<string>;\n\nmakeStringBos(42); \/\/ TypeScript correctly rejects this.<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na koniec zostawi\u0142em sobie prawdziw\u0105 bomb\u0119: wariancja typ\u00f3w. Nie wchodz\u0105c w szczeg\u00f3\u0142y, wariancja w przypadku generycznych typ\u00f3w pozwala okre\u015bli\u0107 czy dane typy mog\u0105 zosta\u0107 do siebie przypisane na podstawie struktury dziedziczenia ich generycznych parametr\u00f3w. Dog\u0142\u0119bne wyt\u0142umaczenie jak dzia\u0142a wariancja zdecydowanie nie mie\u015bci si\u0119 w formule naszych przegl\u0105d\u00f3w, dlatego zainteresowanych odsy\u0142am do <a href=\"https:\/\/kotlinlang.org\/docs\/generics.html\">dokumentacji Kotlina<\/a>, kt\u00f3ry zdecydowa\u0142 si\u0119 na tak\u0105 sam\u0105 nomenklatur\u0119 jak TypeScript (czyli s\u0142owa kluczowe in i out). Po co nam wariancja w strukturalnie typowanym j\u0119zyku? Na ch\u0142opski rozum, wszystkie typy mo\u017cna rozwin\u0105\u0107 i por\u00f3wna\u0107. Jak si\u0119 okazuje, w przypadku skomplikowanych zagnie\u017cd\u017conych typ\u00f3w sprawdzenie wariancji b\u0119dzie znacznie szybsze ni\u017c ich rozwijanie.<\/p>\n","innerContent":["\n<p>Na koniec zostawi\u0142em sobie prawdziw\u0105 bomb\u0119: wariancja typ\u00f3w. Nie wchodz\u0105c w szczeg\u00f3\u0142y, wariancja w przypadku generycznych typ\u00f3w pozwala okre\u015bli\u0107 czy dane typy mog\u0105 zosta\u0107 do siebie przypisane na podstawie struktury dziedziczenia ich generycznych parametr\u00f3w. Dog\u0142\u0119bne wyt\u0142umaczenie jak dzia\u0142a wariancja zdecydowanie nie mie\u015bci si\u0119 w formule naszych przegl\u0105d\u00f3w, dlatego zainteresowanych odsy\u0142am do <a href=\"https:\/\/kotlinlang.org\/docs\/generics.html\">dokumentacji Kotlina<\/a>, kt\u00f3ry zdecydowa\u0142 si\u0119 na tak\u0105 sam\u0105 nomenklatur\u0119 jak TypeScript (czyli s\u0142owa kluczowe in i out). Po co nam wariancja w strukturalnie typowanym j\u0119zyku? Na ch\u0142opski rozum, wszystkie typy mo\u017cna rozwin\u0105\u0107 i por\u00f3wna\u0107. Jak si\u0119 okazuje, w przypadku skomplikowanych zagnie\u017cd\u017conych typ\u00f3w sprawdzenie wariancji b\u0119dzie znacznie szybsze ni\u017c ich rozwijanie.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">interface Animal {\n    animalStuff: any;\n}\n\ninterface Dog extends Animal {\n    dogStuff: any;\n}\n\ntype Getter<out T> = () => T;\ntype Setter<in T> = (value: T) => void;\n\nlet animalGetter: Getter<Animal>;\nlet dogGetter: Getter<Dog>;\nanimalGetter = dogGetter; \/\/ This will work\ndogGetter = animalGetter; \/\/ This will throw an error\n\nlet animalSetter: Setter<Animal>;\nlet dogSetter: Setter<Dog>;\nanimalSetter = dogSetter; \/\/ This will throw an error\ndogSetter = animalSetter; \/\/ This will work<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">interface Animal {\n    animalStuff: any;\n}\n\ninterface Dog extends Animal {\n    dogStuff: any;\n}\n\ntype Getter<out T> = () => T;\ntype Setter<in T> = (value: T) => void;\n\nlet animalGetter: Getter<Animal>;\nlet dogGetter: Getter<Dog>;\nanimalGetter = dogGetter; \/\/ This will work\ndogGetter = animalGetter; \/\/ This will throw an error\n\nlet animalSetter: Setter<Animal>;\nlet dogSetter: Setter<Dog>;\nanimalSetter = dogSetter; \/\/ This will throw an error\ndogSetter = animalSetter; \/\/ This will work<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Czy TypeScript mnie zawi\u00f3d\u0142? Wyj\u0105tkowo wydaje si\u0119, \u017ce wydanie 4.7 b\u0119dzie jednym z bardziej interesuj\u0105cych. Z ostatecznymi wyrokami poczekajmy jeszcze do momentu, kiedy pewne b\u0119dzie czy wszystkie przedstawione tutaj funkcjonalno\u015bci dotr\u0105 do stabilnej wersji.<\/p>\n","innerContent":["\n<p>Czy TypeScript mnie zawi\u00f3d\u0142? Wyj\u0105tkowo wydaje si\u0119, \u017ce wydanie 4.7 b\u0119dzie jednym z bardziej interesuj\u0105cych. Z ostatecznymi wyrokami poczekajmy jeszcze do momentu, kiedy pewne b\u0119dzie czy wszystkie przedstawione tutaj funkcjonalno\u015bci dotr\u0105 do stabilnej wersji.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-7-beta\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-7-beta\/<\/a><br><a href=\"https:\/\/kotlinlang.org\/docs\/generics.html\">https:\/\/kotlinlang.org\/docs\/generics.html<\/a><br><a href=\"https:\/\/www.youtube.com\/watch?v=5upaxzBNbmQ&t=12s\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.youtube.com\/watch?v=5upaxzBNbmQ&t=12s<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-7-beta\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-7-beta\/<\/a><br><a href=\"https:\/\/kotlinlang.org\/docs\/generics.html\">https:\/\/kotlinlang.org\/docs\/generics.html<\/a><br><a href=\"https:\/\/www.youtube.com\/watch?v=5upaxzBNbmQ&t=12s\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.youtube.com\/watch?v=5upaxzBNbmQ&t=12s<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. \u00a0Leniwy Storybook i alternatywy<\/h2>\n","innerContent":["\n<h2>2. \u00a0Leniwy Storybook i alternatywy<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W ostatnich tygodniach Storybook doczeka\u0142 si\u0119 wreszcie sensownej alternatywy w postaci projektu Ladle. Narz\u0119dzie to jest alternatyw\u0105 typu \u201cDrop-In\u201d (to znaczy, \u017ce nie powinno wymaga\u0107 od Was \u017cadnych zmian w istniej\u0105cych storiesach) i chwali si\u0119 mi\u0119dzy innymi 20x mniejsz\u0105 paczk\u0105 wynikow\u0105 i 10x szybszym startem w trybie developmentu. Lepszy performance osi\u0105gni\u0119to dzi\u0119ki wykorzystaniu nowoczesnych narz\u0119dzi do budowania aplikacji takich jak Vite i Rollup. Wady? Na ten moment Ladle wspiera tylko Reactowe projekt i je\u015bli podczas konfiguracji Storybooka grzebali\u015bcie w konfiguracji Webpacka to migracja mo\u017ce nie wygl\u0105da\u0107 tak kolorowo.<\/p>\n","innerContent":["\n<p>W ostatnich tygodniach Storybook doczeka\u0142 si\u0119 wreszcie sensownej alternatywy w postaci projektu Ladle. Narz\u0119dzie to jest alternatyw\u0105 typu \u201cDrop-In\u201d (to znaczy, \u017ce nie powinno wymaga\u0107 od Was \u017cadnych zmian w istniej\u0105cych storiesach) i chwali si\u0119 mi\u0119dzy innymi 20x mniejsz\u0105 paczk\u0105 wynikow\u0105 i 10x szybszym startem w trybie developmentu. Lepszy performance osi\u0105gni\u0119to dzi\u0119ki wykorzystaniu nowoczesnych narz\u0119dzi do budowania aplikacji takich jak Vite i Rollup. Wady? Na ten moment Ladle wspiera tylko Reactowe projekt i je\u015bli podczas konfiguracji Storybooka grzebali\u015bcie w konfiguracji Webpacka to migracja mo\u017ce nie wygl\u0105da\u0107 tak kolorowo.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"id":4203,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/compilation-time-7299b9b4c7981fcbd272e8bb671d43eb.png\" alt=\"\" class=\"wp-image-4203\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/compilation-time-7299b9b4c7981fcbd272e8bb671d43eb.png\" alt=\"\" class=\"wp-image-4203\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Ca\u0142e szcz\u0119\u015bcie Storybook nie stoi w miejscu i r\u00f3wnie\u017c nieustannie pracuje nad popraw\u0105 wydajno\u015bci. W wersji 6.4 (o kt\u00f3rej w szczeg\u00f3\u0142ach pisali\u015bmy <a href=\"https:\/\/vived.io\/frontend-thursday-vol-66-storybook-6-4-cloudflare-pages-i-svelte-summit\/\">w 66 edycji naszego przegl\u0105du<\/a>) dodane zosta\u0142o wsparcie dla code splitting, co znacz\u0105co przyspieszy\u0142o pocz\u0105tkowe \u0142adowanie. Do wersji 6.5 trafi natomiast Lazy Compilation, co zwiastuje prawdziw\u0105 rewolucj\u0119 je\u015bli chodzi o Developer Experience. Poprzez kompilacj\u0119 jedynie wymaganych do wyrenderowania obecnego widoku komponent\u00f3w czas do zobaczenia pierwszego story zmala\u0142 4x. Ponadto dzi\u0119ki odpowiedniemu zastosowaniu cache\u2019y kolejne buildy s\u0105 jeszcze 2x szybsze.<\/p>\n","innerContent":["\n<p>Ca\u0142e szcz\u0119\u015bcie Storybook nie stoi w miejscu i r\u00f3wnie\u017c nieustannie pracuje nad popraw\u0105 wydajno\u015bci. W wersji 6.4 (o kt\u00f3rej w szczeg\u00f3\u0142ach pisali\u015bmy <a href=\"https:\/\/vived.io\/frontend-thursday-vol-66-storybook-6-4-cloudflare-pages-i-svelte-summit\/\">w 66 edycji naszego przegl\u0105du<\/a>) dodane zosta\u0142o wsparcie dla code splitting, co znacz\u0105co przyspieszy\u0142o pocz\u0105tkowe \u0142adowanie. Do wersji 6.5 trafi natomiast Lazy Compilation, co zwiastuje prawdziw\u0105 rewolucj\u0119 je\u015bli chodzi o Developer Experience. Poprzez kompilacj\u0119 jedynie wymaganych do wyrenderowania obecnego widoku komponent\u00f3w czas do zobaczenia pierwszego story zmala\u0142 4x. Ponadto dzi\u0119ki odpowiedniemu zastosowaniu cache\u2019y kolejne buildy s\u0105 jeszcze 2x szybsze.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4204,"sizeSlug":"large","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/lc-2-1024x393.png\" alt=\"\" class=\"wp-image-4204\"\/><figcaption>Czas pierwszego uruchomienia<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/lc-2-1024x393.png\" alt=\"\" class=\"wp-image-4204\"\/><figcaption>Czas pierwszego uruchomienia<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4205,"sizeSlug":"large","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/lc-fs-2-1024x393.png\" alt=\"\" class=\"wp-image-4205\"\/><figcaption>Czas pierwszego uruchomienia z rozgrzanym cache<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/lc-fs-2-1024x393.png\" alt=\"\" class=\"wp-image-4205\"\/><figcaption>Czas pierwszego uruchomienia z rozgrzanym cache<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4206,"sizeSlug":"large","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/lc-rebuild-2-1024x393.png\" alt=\"\" class=\"wp-image-4206\"\/><figcaption>Czas kolejnych prze\u0142adowa\u0144<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/lc-rebuild-2-1024x393.png\" alt=\"\" class=\"wp-image-4206\"\/><figcaption>Czas kolejnych prze\u0142adowa\u0144<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/www.ladle.dev\/blog\/introducing-ladle\/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter\">https:\/\/www.ladle.dev\/blog\/introducing-ladle\/<\/a><br><a href=\"https:\/\/storybook.js.org\/blog\/storybook-lazy-compilation-for-webpack\/\">https:\/\/storybook.js.org\/blog\/storybook-lazy-compilation-for-webpack\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/www.ladle.dev\/blog\/introducing-ladle\/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter\">https:\/\/www.ladle.dev\/blog\/introducing-ladle\/<\/a><br><a href=\"https:\/\/storybook.js.org\/blog\/storybook-lazy-compilation-for-webpack\/\">https:\/\/storybook.js.org\/blog\/storybook-lazy-compilation-for-webpack\/<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/comments?post=9983"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9983\/revisions"}],"predecessor-version":[{"id":10508,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9983\/revisions\/10508"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/8039"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=9983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=9983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=9983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}