{"id":15239,"date":"2023-03-17T15:22:21","date_gmt":"2023-03-17T14:22:21","guid":{"rendered":"https:\/\/vived.io\/?p=15239"},"modified":"2023-03-17T15:22:25","modified_gmt":"2023-03-17T14:22:25","slug":"typescript-5-0-juz-tu-jest-frontend-weekly-vol-129","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/","title":{"rendered":"TypeScript 5.0 ju\u017c tu jest! | Frontend Weekly vol. 129"},"content":{"rendered":"\n

1. TypeScript 5.0<\/h2>\n\n\n\n

Migracja do modu\u0142\u00f3w<\/h3>\n\n\n\n

Najwi\u0119ksz\u0105 nowo\u015bci\u0105 w TypeScript 5.0 jest migracja kodu z namespaces do modu\u0142\u00f3w. Wi\u0105\u017ce si\u0119 z ni\u0105 znacz\u0105ce odchudzenie paczki i lekka poprawa wydajno\u015bci. Decyzja o migracji podyktowana by\u0142a potrzebami spo\u0142eczno\u015bci, kt\u00f3ra od lat korzysta ju\u017c z modu\u0142\u00f3w. TypeScript stosuje technik\u0119 zwan\u0105 Dog Feeding, czyli w ramach test\u00f3w kompiluje sam siebie. Pomimo tego, \u017ce j\u0119zyk w ostatnich latach wprowadza\u0142 sporo nowo\u015bci je\u015bli chodzi o modu\u0142y, to sam nie m\u00f3g\u0142 z nich skorzysta\u0107. Ponadto nie korzystaj\u0105c z modu\u0142\u00f3w, zesp\u00f3\u0142 traci\u0142 okazj\u0119 do test\u00f3w funkcjonalno\u015bci mocno wykorzystywanej przez spo\u0142eczno\u015b\u0107.<\/p>\n\n\n

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

Je\u015bli swoj\u0105 przygod\u0119 z TypeScript zaczynali\u015bcie na przestrzeni kilku ostatnich lat, to istnieje spore prawdopodobie\u0144stwo, \u017ce nigdy nie mieli\u015bcie styczno\u015bci z namespaces. Funkcjonalno\u015b\u0107 ta powsta\u0142a w 2014 roku, kiedy JavaScriptowe modu\u0142y by\u0142y jeszcze w powijakach, a o miano standardu rywalizowa\u0142o kilka konwencji. TypeScript pilnie potrzebowa\u0142 rozwi\u0105za\u0107 problem modularyzacji i zanieczyszczenia przestrzeni nazw, dlatego zaproponowa\u0142 swoje autorskie rozwi\u0105zanie. W du\u017cym skr\u00f3cie, namespace to s\u0142odzik syntaktyczny na stwrzenie globalnego obiektu.<\/p>\n\n\n\n

\/\/ TypeScript input\nnamespace Example {\n  export const name = 'Tomek';\n}<\/code><\/pre>\n\n\n\n
\/\/ JavaScript output\nvar Example;\n(function (Example) {\n    Example.name = 'Tomek';\n})(Example || (Example = {}));<\/code><\/pre>\n\n\n\n
W 2015 roku do standardu ECMAScript trafi\u0142y wrescie pe\u0142noprawne i dobrze zaporojektowane modu\u0142y. Rozwi\u0105zywa\u0142y one nie tylko problem zanieczyszczenia przestrzeni nazw, ale dawa\u0142y te\u017c narz\u0119dzia pozwalaj\u0105ce kontrolowa\u0107 w jaki spos\u00f3b nasza aplikacja jest dzielona na kawa\u0142ki i kiedy kawa\u0142ki te s\u0105 \u0142adowane. Tym samym TypeScriptowe namespaces sta\u0142y si\u0119 niepotrzebne i szybko zapomniane przez spo\u0142eczno\u015b\u0107.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Z migracj\u0105 TypeScript do modu\u0142\u00f3w wi\u0105\u017ce si\u0119 naprawd\u0119 sporo ciekawych historii. Od wyboru odpowiednieg Bundlera, przez problemy wydajno\u015bciowe zwi\u0105zane z stosowaniem let<\/code> i const<\/code>, po odchudzenie rozmiaru paczkie przez zmniejszenie wci\u0119\u0107. Je\u015bli macie ochot\u0119 zag\u0142\u0119bi\u0107 si\u0119 troch\u0119 w temat, to zdecydowanie polecam kr\u00f3tkie case study przygotowane przez Microsoft<\/a>.<\/p>\n\n\n\n
Dekoratory<\/h3>\n\n\n\n
Historia dekorator\u00f3w w TypeScript to materia\u0142 na kilku sezonowy serial pe\u0142en zwrot\u00f3w akcji i cliffhanger\u00f3w. Przygoda zaczyna si\u0119 w pa\u017adzierniku 2014 roku, kiedy to na spotkaniu TC39 (przyp: grupa standaryzacyjna JavaScript, ja lubi\u0119 j\u0105 por\u00f3wnywa\u0107 do plemiennej starszyzny) zaprezenotwany zosta\u0142 pierwszy proposal dekorator\u00f3w. W\u0142a\u015bciwie r\u00f3wnolegle, na konferencji ngEurope og\u0142oszono, \u017ce Angular 2.0 napisany b\u0119dzie w AtScript. Nowy j\u0119zyk od Google maia\u0142 by\u0107 oparty o TypeScript, ale rozszerza\u0107 go o kilka nowych funkcjonalno\u015bci. W\u015br\u00f3d nich znajdowa\u0142y si\u0119 mi\u0119dzy innymi tytu\u0142owe dekoratory.<\/p>\n\n\n
\n
\"\"
Czy wiecie, \u017ce jen\u0105 z funkcjonalno\u015bci AtScript mia\u0142o by\u0107 wsparcie dla typ\u00f3w w runtime? Na papierze brzmi to dobrze, ale ciekawe jak wp\u0142ywa\u0142oby na wydajno\u015b\u0107.<\/figcaption><\/figure><\/div>\n\n\n
Zasadnym wydaje si\u0119 pytanie, dlaczego Google nie zdecydowa\u0142 si\u0119 po prostu zainwestowa\u0107 w rozw\u00f3j TypeScriptu. Sta\u0142o si\u0119 tak ze wzgl\u0119du na konflikt interes\u00f3w. Zespo\u0142owi z Microsoft zale\u017ca\u0142o, \u017ceby TypeScript by\u0142 tak blisko JavaScriptu jak to tylko mo\u017cliwe. To w\u0142a\u015bciwie wyklucza\u0142o szanse, na dodanie funkcjonalno\u015bci, kt\u00f3ra w przysz\u0142o\u015bci mog\u0142aby kolidowa\u0107 ze standardem. Zesp\u00f3\u0142 z Google potrzebowa\u0142 narz\u0119dzi, kt\u00f3re pozwol\u0105 im zbudowa\u0107 ich wymarzony framework. Bez dekorator\u00f3w TypeScipt nie by\u0142 takim narz\u0119dziem.<\/p>\n\n\n\n
Na szcz\u0119\u015bcie po burzliwych negocjacjach obie firmy doszy\u0142y do porozumienia. W maju 2015 roku na jednej z europejskich konferencji og\u0142oszono, \u017ce do TypeScript trafi\u0105 dekoratory zgodne z Proposalem znajduj\u0105cym si\u0119 w Stage 1 (przyp: proces standaryzacyjny JavaSciprt sk\u0142ada si\u0119 z 4 etap\u00f3w \u2013 dopiero funkcjonalno\u015bci w 3 etapie uznaje si\u0119 za w miar\u0119 stabilne). Podczas tej samej konferencji og\u0142oszono, \u017ce Angular zostanie jednak opraty o TypeScript.<\/p>\n\n\n
\n
\"\"
Mo\u017ce jest to niepopularna opinia, ale gdyby Microsoft nie dogada\u0142 si\u0119 z Google w 2015 roku, to historia TypeScript mog\u0142aby si\u0119 potoczy\u0107 zupe\u0142nie inaczej. Mo\u017ce i dzisiaj Angular przegrywa walk\u0119 z Reactem, ale 8 lat temu wszystkie oczy skierowane by\u0142y na framework od Google.<\/figcaption><\/figure><\/div>\n\n\n
Od 2015 roku w kwestii dekorator\u00f3w sporo si\u0119 zmieni\u0142o. Przede wszystki proposal przedar\u0142 si\u0119 do Stage 3. Nie oby\u0142o si\u0119 jednak bez strat. Z oryginalnego proposala wyci\u0119to znaczn\u0105 cz\u0119\u015b\u0107 dotycz\u0105c\u0105 metadanych. To oznacza, \u017ce dekoratory b\u0119d\u0105ce ju\u017c u progu standardu JavaScript, nie s\u0105 zgodne z tymi zaimplementowanymi w TypeScript. Na szcz\u0119\u015bcie na ratunek nam wszystkim przyszed\u0142 TypeScript 5.0.<\/p>\n\n\n\n
Je\u015bli do tej pory nie mieli\u015bcie doczynienia z dekoratorami, to s\u0105 to po prostu funkcje, kt\u00f3re pozwalaj\u0105 nam modyfikowa\u0107 zachowanie innch funckji lub klas. Temat jest na tyle skomplikowany i szeroki, \u017ce nie podejm\u0119 si\u0119 przybli\u017cenia go na \u0142amach tego przegl\u0105d. Wszystkoch g\u0142odnych wiedzy odsys\u0142am do \u015bwietnego artyku\u0142u Axela Rauschmayer<\/a>. Po jego przeczytaniu mo\u017cecie uda\u0107 si\u0119 prosto do notatki od Microsoftu<\/a>, z kt\u00f3rej dowiecie si\u0119 jak otypowa\u0107 swoje dekoratory.<\/p>\n\n\n\n
\/\/ Decorator definition\nfunction debut(originalMethod: any, _context: ClassMethodDecoratorContext) {\n    function replacementMethod(this: any, ...args: any[]) {\n        console.log("LOG: Entering method.")\n        const result = originalMethod.call(this, ...args);\n        console.log("LOG: Exiting method.")\n        return result;\n    }\n    return replacementMethod;\n}\n\n\/\/ Decorator usage\nclass Person {\n    constructor(private readonly name: string) {}\n\n    @debug greet() {\n        console.log(`Hello, my name is ${this.name}.`);\n    }\n}\n\nnew Person("Tomek").greet(); \n\n\/\/ Expected output:\n\/\/ LOG: Entering method.\n\/\/ Hello, my name is Tomek\n\/\/ LOG: Exiting method.<\/code><\/pre>\n\n\n\n
Co z projektami wykorzystuj\u0105cymi star\u0105 implementacj\u0119 dekorator\u00f3w (m.in. Angular, Ember i MobX)? Tak d\u0142ugo jak w konfiguracji TypeScript znajdowa\u0107 si\u0119 b\u0119dzie flaga --experimentalDecorators<\/code> ich zachowanie nie ulegnie zmianie. W d\u0142u\u017cszej perspektywie wszystkie te biblioteki czeka jednak migracja.<\/p>\n\n\n\n
const<\/code> Type Parametrs<\/h3>\n\n\n\n
Je\u015bli na codzie\u0144 pracujecie z TypeScript, to na pewno znacie trik z as const<\/code>, kt\u00f3ry pozwala nam zaw\u0119zi\u0107 inferowany typ.<\/p>\n\n\n\n
\/\/ Inferred type: string[]  \nconst namesA = ["Alice", "Bob", "Eve"];\n\n\/\/ Inferred type: readonly ["Alice", "Bob", "Eve"]\nconst namesB = ["Alice", "Bob", "Eve"] as const; <\/code><\/pre>\n\n\n\n
Trik ten cz\u0119sto wykorzystujemy na przyk\u0142ad do zaw\u0119\u017cania typu zwracanego przez funkcj\u0119.<\/p>\n\n\n\n
function getNames<T extends { name: readonly string[]}>(arg: T): T["names"] {\n    return arg.names;\n}\n\n\/\/ Inferred type: string[]\nconst namesA = getNames({ names: ["Alice", "Bob", "Eve"]});\n\n\/\/ Inferred type: readonly ["Alice", "Bob", "Eve"]         \nconst namesB = getNames({ names: ["Alice", "Bob", "Eve"]} as const); <\/code><\/pre>\n\n\n\n
TypeScript 5.0 wprowadza mechanizm, kt\u00f3ry pozwala nam przenie\u015b\u0107 as const<\/code> do definicji typu. W ten spos\u00f3b zabieramy ten ci\u0119\u017car z plec\u00f3w naszych u\u017cytkownik\u00f3w i bierzemy go na swoje barki.<\/p>\n\n\n\n
\/*                \ud83d\udc47 Hese is the new const type parameter                *\/\nfunction getNames<const T extends { names: readonly string[] }>(arg: T): T["names"] {\n    return arg.names;\n}\n\n\/\/ Inferred type: readonly ["Alice", "Bob", "Eve"]\nconst names = getNames{ names: ["Alice", "Bob", "Eve"] });<\/code><\/pre>\n\n\n\n
I wiele wi\u0119cej…<\/h3>\n\n\n\n
Oczywi\u015bcie to nie koniec nowo\u015bci w TypeScript 5.0. Wszystkich zainteresowanych szczeg\u00f3\u0142ami najnowszej wersji j\u0119zyka odsy\u0142am do \u015bwietnej notatki przygotowanej przez Microsoft<\/a>. 
<\/p>\n\n\n\n
2. Lazy Loading w React Router 6.9<\/h2>\n\n\n\n
React Router z wersji na wersj\u0119 staje si\u0119 coraz bardziej rozbudowan\u0105 bibliotek\u0105. W React Router 6.4 w nasze r\u0119ce trafi\u0142y loadery, kt\u00f3re umo\u017cwiliaj\u0105 nam zr\u00f3wnoleglenie pobierania danych dla wszystkich potrzebnych komponent\u00f3w.\/pr<\/p>\n\n\n\n
const routes = [{\n  path: '\/',\n  loader: () => getUser(),\n  element: <Layout \/>,\n  children: [{\n    path: 'projects',\n    loader: () => getProjects(),\n    element: <Projects \/>,\n    children: [{\n      path: ':projectId',\n      loader: ({ params }) => getProject(params.projectId),\n      element: <Project \/>,\n    }],\n  }],\n}]<\/code><\/pre>\n\n\n
\n
\"\"
\u0179r\u00f3d\u0142o: Lazy Loading Routes in React Router 6.4+<\/a><\/figcaption><\/figure><\/div>\n\n\n
W wydanym w tym tygodniu React Router 6.9 w nasze r\u0119ce trafi\u0142a funkcja React.lazy<\/code>, kt\u00f3ra umo\u017cliwia zr\u00f3wnoleglenie pobierania komponent\u00f3w. \u0141\u0105cz\u0105c j\u0105 z opizanymi w poprzednim akapicie loaders<\/code>, mo\u017cemy zr\u00f3wnolegli\u0107 zar\u00f3wno pobieranie danych jak i komponent\u00f3w.<\/p>\n\n\n\n
const routes = [{\n  path: '\/',\n  element: <Layout \/>,\n  children: [{\n    path: 'projects',\n    loader: () => getProjects(),\n    lazy: () => import(".\/projects"), \/\/ \ud83d\udca4 Lazy load!\n    children: [{\n      path: ':projectId',\n      loader: ({ params }) => getProject(params.projectId),\n      lazy: () => import(".\/project"), \/\/ \ud83d\udca4 Lazy load!\n    }],\n  }],\n}]<\/code><\/pre>\n\n\n
\n
\"\"
\u0179r\u00f3d\u0142o: Lazy Loading Routes in React Router 6.4+<\/a><\/figcaption><\/figure><\/div>\n\n\n
Je\u015bli temat Was zainteresowa\u0142, to na blogu React Router opublikowany zosta\u0142 artyku\u0142, kt\u00f3ry w detalach opisuje jakie mo\u017cliwo\u015bci zr\u00f3wnoleglenia pobierania oferuje nam biblioteka<\/a>.<\/p>\n\n\n\n
3. Nowa dokumentacja Reacta<\/h2>\n\n\n\n
React doczeka\u0142 si\u0119 wreszcie dokumentacji na jak\u0105 zas\u0142uguje<\/a>. Po d\u0142ugich miesi\u0105cach w becie, nowa i przepisana od zera dokumentacja<\/a>, staje si\u0119 t\u0105 domy\u015blna. Przestarza\u0142a ju\u017c poprzednicza nie znika z internetu i dost\u0119pna b\u0119dzie pod adresem legacy.reactjs.org<\/a>. Co wyr\u00f3\u017cnia now\u0105 dokumentacj\u0105? Przede wszystkim jest ona bogata w interaktywne przyk\u0142ady i posiada od\u015bwie\u017con\u0105 szat\u0119 graficzn\u0105. Je\u015bli jeszcze jej nie widzieli\u015bcie, to najwy\u017csza pora to nadrobi\u0107. Zw\u0142aszcza, \u017ce zosta\u0142a ona uzupe\u0142niona o kilka ciekawych zaawansowanych zagadnie\u0144 (np. dlaczego powinni\u015bmy unika\u0107 useEffect<\/code>). <\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
4. ECMAScript\u00ae 2023<\/h2>\n\n\n\n
W minionym tygodni do sieci trafi\u0142a nowa specyfikacja JavaScript<\/a>. Jak zwykle nie jest to lekka lektura i zanim do niej przyst\u0105picie polecam zapozna\u0107 si\u0119 z poradnikiem czytania specyfikacji ECMAScript przygotowanym przez Timothy Gu<\/a>. Je\u015bli mimo wszystko lektura oka\u017ce si\u0119 dla Was za trudna, to w zesz\u0142ym tygodniu Reddita podbi\u0142 artyku\u0142 Linusa Schlumbergera, kt\u00f3ry \u015bwietnie podsumowywuje wszystkie nowo\u015bci w JavaScript z ostatnich trzech lat.<\/a><\/p>\n\n\n
\n
\"\"\/
\u0179r\u00f3d\u0142o: XKCD<\/a><\/figcaption><\/figure><\/div>","protected":false},"excerpt":{"rendered":"
Od wydania poprzedniej du\u017cej wersji TypeScript min\u0119\u0142o ju\u017c prawie trzy lata. Z tego powodu wydanie TypeScript 5.0 to niema\u0142e wydarzenie! Wraz z now\u0105 wersj\u0105 otrzymali\u015bmy wreszcie dekoratory zgodne ze standardem ECMAScript i kilka innych ciekawych nowo\u015bci.<\/p>\n","protected":false},"author":12,"featured_media":15261,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273,1],"tags":[],"class_list":["post-15239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl","category-no-category"],"acf":{"feature_image_visible":false,"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2-2.png","feature_image_blog":{"ID":15268,"id":15268,"title":"Vived_A_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min","filename":"Vived_A_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min.png","filesize":625249,"url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Vived_A_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min.png","link":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/vived_a_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min\/","alt":"","author":"12","description":"","caption":"","name":"vived_a_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min","status":"inherit","uploaded_to":15239,"date":"2023-03-17 13:50:42","modified":"2023-03-17 13:50:42","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/vived.io\/wp-includes\/images\/media\/default.png","width":1536,"height":1024,"sizes":{"thumbnail":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Vived_A_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Vived_A_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min-300x200.png","medium-width":300,"medium-height":200,"medium_large":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Vived_A_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min-768x512.png","medium_large-width":768,"medium_large-height":512,"large":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Vived_A_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min-1024x683.png","large-width":1024,"large-height":683,"1536x1536":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Vived_A_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min.png","1536x1536-width":1536,"1536x1536-height":1024,"2048x2048":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Vived_A_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min.png","2048x2048-width":1536,"2048x2048-height":1024,"gform-image-choice-sm":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Vived_A_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min.png","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":200,"gform-image-choice-md":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Vived_A_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min.png","gform-image-choice-md-width":400,"gform-image-choice-md-height":267,"gform-image-choice-lg":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Vived_A_close-up_of_a_beautiful_bouquet_of_colorful_flowers_inc_aa59a75c-6fe4-4297-924f-16917b2cb85b-min.png","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":400}},"estimated_reading_time":"7"},"yoast_head":"\nTypeScript 5.0 ju\u017c tu jest! | Frontend Weekly vol. 129 - 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\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TypeScript 5.0 ju\u017c tu jest! | Frontend Weekly vol. 129 - Vived\" \/>\n<meta property=\"og:description\" content=\"Od wydania poprzedniej du\u017cej wersji TypeScript min\u0119\u0142o ju\u017c prawie trzy lata. Z tego powodu wydanie TypeScript 5.0 to niema\u0142e wydarzenie! Wraz z now\u0105 wersj\u0105 otrzymali\u015bmy wreszcie dekoratory zgodne ze standardem ECMAScript i kilka innych ciekawych nowo\u015bci.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-17T14:22:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-17T14:22:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2-2.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<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"TypeScript 5.0 ju\u017c tu jest! | Frontend Weekly vol. 129\",\"datePublished\":\"2023-03-17T14:22:21+00:00\",\"dateModified\":\"2023-03-17T14:22:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/\"},\"wordCount\":1252,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2-2.png\",\"articleSection\":[\"Frontend\",\"No category\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/\",\"url\":\"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/\",\"name\":\"TypeScript 5.0 ju\u017c tu jest! | Frontend Weekly vol. 129 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2-2.png\",\"datePublished\":\"2023-03-17T14:22:21+00:00\",\"dateModified\":\"2023-03-17T14:22:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2-2.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2-2.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"TypeScript 5.0 ju\u017c tu jest! | Frontend Weekly vol. 129\"}]},{\"@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":"TypeScript 5.0 ju\u017c tu jest! | Frontend Weekly vol. 129 - 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\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/","og_locale":"pl_PL","og_type":"article","og_title":"TypeScript 5.0 ju\u017c tu jest! | Frontend Weekly vol. 129 - Vived","og_description":"Od wydania poprzedniej du\u017cej wersji TypeScript min\u0119\u0142o ju\u017c prawie trzy lata. Z tego powodu wydanie TypeScript 5.0 to niema\u0142e wydarzenie! Wraz z now\u0105 wersj\u0105 otrzymali\u015bmy wreszcie dekoratory zgodne ze standardem ECMAScript i kilka innych ciekawych nowo\u015bci.","og_url":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/","og_site_name":"Vived","article_published_time":"2023-03-17T14:22:21+00:00","article_modified_time":"2023-03-17T14:22:25+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2-2.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"TypeScript 5.0 ju\u017c tu jest! | Frontend Weekly vol. 129","datePublished":"2023-03-17T14:22:21+00:00","dateModified":"2023-03-17T14:22:25+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/"},"wordCount":1252,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2-2.png","articleSection":["Frontend","No category"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/","url":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/","name":"TypeScript 5.0 ju\u017c tu jest! | Frontend Weekly vol. 129 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2-2.png","datePublished":"2023-03-17T14:22:21+00:00","dateModified":"2023-03-17T14:22:25+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2-2.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2-2.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/typescript-5-0-juz-tu-jest-frontend-weekly-vol-129\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"TypeScript 5.0 ju\u017c tu jest! | Frontend Weekly vol. 129"}]},{"@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 5.0<\/h2>\n","innerContent":["\n<h2>1. TypeScript 5.0<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Migracja do modu\u0142\u00f3w<\/h3>\n","innerContent":["\n<h3>Migracja do modu\u0142\u00f3w<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Najwi\u0119ksz\u0105 nowo\u015bci\u0105 w TypeScript 5.0 jest migracja kodu z namespaces do modu\u0142\u00f3w. Wi\u0105\u017ce si\u0119 z ni\u0105 znacz\u0105ce odchudzenie paczki i lekka poprawa wydajno\u015bci. Decyzja o migracji podyktowana by\u0142a potrzebami spo\u0142eczno\u015bci, kt\u00f3ra od lat korzysta ju\u017c z modu\u0142\u00f3w. TypeScript stosuje technik\u0119 zwan\u0105 Dog Feeding, czyli w ramach test\u00f3w kompiluje sam siebie. Pomimo tego, \u017ce j\u0119zyk w ostatnich latach wprowadza\u0142 sporo nowo\u015bci je\u015bli chodzi o modu\u0142y, to sam nie m\u00f3g\u0142 z nich skorzysta\u0107. Ponadto nie korzystaj\u0105c z modu\u0142\u00f3w, zesp\u00f3\u0142 traci\u0142 okazj\u0119 do test\u00f3w funkcjonalno\u015bci mocno wykorzystywanej przez spo\u0142eczno\u015b\u0107.<\/p>\n","innerContent":["\n<p>Najwi\u0119ksz\u0105 nowo\u015bci\u0105 w TypeScript 5.0 jest migracja kodu z namespaces do modu\u0142\u00f3w. Wi\u0105\u017ce si\u0119 z ni\u0105 znacz\u0105ce odchudzenie paczki i lekka poprawa wydajno\u015bci. Decyzja o migracji podyktowana by\u0142a potrzebami spo\u0142eczno\u015bci, kt\u00f3ra od lat korzysta ju\u017c z modu\u0142\u00f3w. TypeScript stosuje technik\u0119 zwan\u0105 Dog Feeding, czyli w ramach test\u00f3w kompiluje sam siebie. Pomimo tego, \u017ce j\u0119zyk w ostatnich latach wprowadza\u0142 sporo nowo\u015bci je\u015bli chodzi o modu\u0142y, to sam nie m\u00f3g\u0142 z nich skorzysta\u0107. Ponadto nie korzystaj\u0105c z modu\u0142\u00f3w, zesp\u00f3\u0142 traci\u0142 okazj\u0119 do test\u00f3w funkcjonalno\u015bci mocno wykorzystywanej przez spo\u0142eczno\u015b\u0107.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":15247,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/download-12.jpeg\" alt=\"\" class=\"wp-image-15247\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/download-12.jpeg\" alt=\"\" class=\"wp-image-15247\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli swoj\u0105 przygod\u0119 z TypeScript zaczynali\u015bcie na przestrzeni kilku ostatnich lat, to istnieje spore prawdopodobie\u0144stwo, \u017ce nigdy nie mieli\u015bcie styczno\u015bci z namespaces. Funkcjonalno\u015b\u0107 ta powsta\u0142a w 2014 roku, kiedy JavaScriptowe modu\u0142y by\u0142y jeszcze w powijakach, a o miano standardu rywalizowa\u0142o kilka konwencji. TypeScript pilnie potrzebowa\u0142 rozwi\u0105za\u0107 problem modularyzacji i zanieczyszczenia przestrzeni nazw, dlatego zaproponowa\u0142 swoje autorskie rozwi\u0105zanie. W du\u017cym skr\u00f3cie, namespace to s\u0142odzik syntaktyczny na stwrzenie globalnego obiektu.<\/p>\n","innerContent":["\n<p>Je\u015bli swoj\u0105 przygod\u0119 z TypeScript zaczynali\u015bcie na przestrzeni kilku ostatnich lat, to istnieje spore prawdopodobie\u0144stwo, \u017ce nigdy nie mieli\u015bcie styczno\u015bci z namespaces. Funkcjonalno\u015b\u0107 ta powsta\u0142a w 2014 roku, kiedy JavaScriptowe modu\u0142y by\u0142y jeszcze w powijakach, a o miano standardu rywalizowa\u0142o kilka konwencji. TypeScript pilnie potrzebowa\u0142 rozwi\u0105za\u0107 problem modularyzacji i zanieczyszczenia przestrzeni nazw, dlatego zaproponowa\u0142 swoje autorskie rozwi\u0105zanie. W du\u017cym skr\u00f3cie, namespace to s\u0142odzik syntaktyczny na stwrzenie globalnego obiektu.<\/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\">\/\/ TypeScript input\nnamespace Example {\n  export const name = 'Tomek';\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ TypeScript input\nnamespace Example {\n  export const name = 'Tomek';\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ JavaScript output\nvar Example;\n(function (Example) {\n    Example.name = 'Tomek';\n})(Example || (Example = {}));<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ JavaScript output\nvar Example;\n(function (Example) {\n    Example.name = 'Tomek';\n})(Example || (Example = {}));<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W 2015 roku do standardu ECMAScript trafi\u0142y wrescie pe\u0142noprawne i dobrze zaporojektowane modu\u0142y. Rozwi\u0105zywa\u0142y one nie tylko problem zanieczyszczenia przestrzeni nazw, ale dawa\u0142y te\u017c narz\u0119dzia pozwalaj\u0105ce kontrolowa\u0107 w jaki spos\u00f3b nasza aplikacja jest dzielona na kawa\u0142ki i kiedy kawa\u0142ki te s\u0105 \u0142adowane. Tym samym TypeScriptowe namespaces sta\u0142y si\u0119 niepotrzebne i szybko zapomniane przez spo\u0142eczno\u015b\u0107.<\/p>\n","innerContent":["\n<p>W 2015 roku do standardu ECMAScript trafi\u0142y wrescie pe\u0142noprawne i dobrze zaporojektowane modu\u0142y. Rozwi\u0105zywa\u0142y one nie tylko problem zanieczyszczenia przestrzeni nazw, ale dawa\u0142y te\u017c narz\u0119dzia pozwalaj\u0105ce kontrolowa\u0107 w jaki spos\u00f3b nasza aplikacja jest dzielona na kawa\u0142ki i kiedy kawa\u0142ki te s\u0105 \u0142adowane. Tym samym TypeScriptowe namespaces sta\u0142y si\u0119 niepotrzebne i szybko zapomniane przez spo\u0142eczno\u015b\u0107.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":15249,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/download-13.jpeg\" alt=\"\" class=\"wp-image-15249\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/download-13.jpeg\" alt=\"\" class=\"wp-image-15249\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Z migracj\u0105 TypeScript do modu\u0142\u00f3w wi\u0105\u017ce si\u0119 naprawd\u0119 sporo ciekawych historii. Od wyboru odpowiednieg Bundlera, przez problemy wydajno\u015bciowe zwi\u0105zane z stosowaniem <code>let<\/code> i <code>const<\/code>, po odchudzenie rozmiaru paczkie przez zmniejszenie wci\u0119\u0107. Je\u015bli macie ochot\u0119 zag\u0142\u0119bi\u0107 si\u0119 troch\u0119 w temat, to zdecydowanie polecam <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/typescripts-migration-to-modules\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">kr\u00f3tkie case study przygotowane przez Microsoft<\/a>.<\/p>\n","innerContent":["\n<p>Z migracj\u0105 TypeScript do modu\u0142\u00f3w wi\u0105\u017ce si\u0119 naprawd\u0119 sporo ciekawych historii. Od wyboru odpowiednieg Bundlera, przez problemy wydajno\u015bciowe zwi\u0105zane z stosowaniem <code>let<\/code> i <code>const<\/code>, po odchudzenie rozmiaru paczkie przez zmniejszenie wci\u0119\u0107. Je\u015bli macie ochot\u0119 zag\u0142\u0119bi\u0107 si\u0119 troch\u0119 w temat, to zdecydowanie polecam <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/typescripts-migration-to-modules\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">kr\u00f3tkie case study przygotowane przez Microsoft<\/a>.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Dekoratory<\/h3>\n","innerContent":["\n<h3>Dekoratory<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Historia dekorator\u00f3w w TypeScript to materia\u0142 na kilku sezonowy serial pe\u0142en zwrot\u00f3w akcji i cliffhanger\u00f3w. Przygoda zaczyna si\u0119 w pa\u017adzierniku 2014 roku, kiedy to na spotkaniu TC39 (przyp: grupa standaryzacyjna JavaScript, ja lubi\u0119 j\u0105 por\u00f3wnywa\u0107 do plemiennej starszyzny) zaprezenotwany zosta\u0142 pierwszy proposal dekorator\u00f3w. W\u0142a\u015bciwie r\u00f3wnolegle, na konferencji ngEurope og\u0142oszono, \u017ce Angular 2.0 napisany b\u0119dzie w AtScript. Nowy j\u0119zyk od Google maia\u0142 by\u0107 oparty o TypeScript, ale rozszerza\u0107 go o kilka nowych funkcjonalno\u015bci. W\u015br\u00f3d nich znajdowa\u0142y si\u0119 mi\u0119dzy innymi tytu\u0142owe dekoratory.<\/p>\n","innerContent":["\n<p>Historia dekorator\u00f3w w TypeScript to materia\u0142 na kilku sezonowy serial pe\u0142en zwrot\u00f3w akcji i cliffhanger\u00f3w. Przygoda zaczyna si\u0119 w pa\u017adzierniku 2014 roku, kiedy to na spotkaniu TC39 (przyp: grupa standaryzacyjna JavaScript, ja lubi\u0119 j\u0105 por\u00f3wnywa\u0107 do plemiennej starszyzny) zaprezenotwany zosta\u0142 pierwszy proposal dekorator\u00f3w. W\u0142a\u015bciwie r\u00f3wnolegle, na konferencji ngEurope og\u0142oszono, \u017ce Angular 2.0 napisany b\u0119dzie w AtScript. Nowy j\u0119zyk od Google maia\u0142 by\u0107 oparty o TypeScript, ale rozszerza\u0107 go o kilka nowych funkcjonalno\u015bci. W\u015br\u00f3d nich znajdowa\u0142y si\u0119 mi\u0119dzy innymi tytu\u0142owe dekoratory.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":15251,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/giphy-1.gif\" alt=\"\" class=\"wp-image-15251\"\/><figcaption class=\"wp-element-caption\">Czy wiecie, \u017ce jen\u0105 z funkcjonalno\u015bci AtScript mia\u0142o by\u0107 wsparcie dla typ\u00f3w w runtime? Na papierze brzmi to dobrze, ale ciekawe jak wp\u0142ywa\u0142oby na wydajno\u015b\u0107.<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/giphy-1.gif\" alt=\"\" class=\"wp-image-15251\"\/><figcaption class=\"wp-element-caption\">Czy wiecie, \u017ce jen\u0105 z funkcjonalno\u015bci AtScript mia\u0142o by\u0107 wsparcie dla typ\u00f3w w runtime? Na papierze brzmi to dobrze, ale ciekawe jak wp\u0142ywa\u0142oby na wydajno\u015b\u0107.<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zasadnym wydaje si\u0119 pytanie, dlaczego Google nie zdecydowa\u0142 si\u0119 po prostu zainwestowa\u0107 w rozw\u00f3j TypeScriptu. Sta\u0142o si\u0119 tak ze wzgl\u0119du na konflikt interes\u00f3w. Zespo\u0142owi z Microsoft zale\u017ca\u0142o, \u017ceby TypeScript by\u0142 tak blisko JavaScriptu jak to tylko mo\u017cliwe. To w\u0142a\u015bciwie wyklucza\u0142o szanse, na dodanie funkcjonalno\u015bci, kt\u00f3ra w przysz\u0142o\u015bci mog\u0142aby kolidowa\u0107 ze standardem. Zesp\u00f3\u0142 z Google potrzebowa\u0142 narz\u0119dzi, kt\u00f3re pozwol\u0105 im zbudowa\u0107 ich wymarzony framework. Bez dekorator\u00f3w TypeScipt nie by\u0142 takim narz\u0119dziem.<\/p>\n","innerContent":["\n<p>Zasadnym wydaje si\u0119 pytanie, dlaczego Google nie zdecydowa\u0142 si\u0119 po prostu zainwestowa\u0107 w rozw\u00f3j TypeScriptu. Sta\u0142o si\u0119 tak ze wzgl\u0119du na konflikt interes\u00f3w. Zespo\u0142owi z Microsoft zale\u017ca\u0142o, \u017ceby TypeScript by\u0142 tak blisko JavaScriptu jak to tylko mo\u017cliwe. To w\u0142a\u015bciwie wyklucza\u0142o szanse, na dodanie funkcjonalno\u015bci, kt\u00f3ra w przysz\u0142o\u015bci mog\u0142aby kolidowa\u0107 ze standardem. Zesp\u00f3\u0142 z Google potrzebowa\u0142 narz\u0119dzi, kt\u00f3re pozwol\u0105 im zbudowa\u0107 ich wymarzony framework. Bez dekorator\u00f3w TypeScipt nie by\u0142 takim narz\u0119dziem.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na szcz\u0119\u015bcie po burzliwych negocjacjach obie firmy doszy\u0142y do porozumienia. W maju 2015 roku na jednej z europejskich konferencji og\u0142oszono, \u017ce do TypeScript trafi\u0105 dekoratory zgodne z Proposalem znajduj\u0105cym si\u0119 w Stage 1 (przyp: proces standaryzacyjny JavaSciprt sk\u0142ada si\u0119 z 4 etap\u00f3w \u2013 dopiero funkcjonalno\u015bci w 3 etapie uznaje si\u0119 za w miar\u0119 stabilne). Podczas tej samej konferencji og\u0142oszono, \u017ce Angular zostanie jednak opraty o TypeScript.<\/p>\n","innerContent":["\n<p>Na szcz\u0119\u015bcie po burzliwych negocjacjach obie firmy doszy\u0142y do porozumienia. W maju 2015 roku na jednej z europejskich konferencji og\u0142oszono, \u017ce do TypeScript trafi\u0105 dekoratory zgodne z Proposalem znajduj\u0105cym si\u0119 w Stage 1 (przyp: proces standaryzacyjny JavaSciprt sk\u0142ada si\u0119 z 4 etap\u00f3w \u2013 dopiero funkcjonalno\u015bci w 3 etapie uznaje si\u0119 za w miar\u0119 stabilne). Podczas tej samej konferencji og\u0142oszono, \u017ce Angular zostanie jednak opraty o TypeScript.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":15253,"width":580,"height":416,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/download-14.jpeg\" alt=\"\" class=\"wp-image-15253\" width=\"580\" height=\"416\"\/><figcaption class=\"wp-element-caption\">Mo\u017ce jest to niepopularna opinia, ale gdyby Microsoft nie dogada\u0142 si\u0119 z Google w 2015 roku, to historia TypeScript mog\u0142aby si\u0119 potoczy\u0107 zupe\u0142nie inaczej. Mo\u017ce i dzisiaj Angular przegrywa walk\u0119 z Reactem, ale 8 lat temu wszystkie oczy skierowane by\u0142y na framework od Google.<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/download-14.jpeg\" alt=\"\" class=\"wp-image-15253\" width=\"580\" height=\"416\"\/><figcaption class=\"wp-element-caption\">Mo\u017ce jest to niepopularna opinia, ale gdyby Microsoft nie dogada\u0142 si\u0119 z Google w 2015 roku, to historia TypeScript mog\u0142aby si\u0119 potoczy\u0107 zupe\u0142nie inaczej. Mo\u017ce i dzisiaj Angular przegrywa walk\u0119 z Reactem, ale 8 lat temu wszystkie oczy skierowane by\u0142y na framework od Google.<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Od 2015 roku w kwestii dekorator\u00f3w sporo si\u0119 zmieni\u0142o. Przede wszystki proposal przedar\u0142 si\u0119 do Stage 3. Nie oby\u0142o si\u0119 jednak bez strat. Z oryginalnego proposala wyci\u0119to znaczn\u0105 cz\u0119\u015b\u0107 dotycz\u0105c\u0105 metadanych. To oznacza, \u017ce dekoratory b\u0119d\u0105ce ju\u017c u progu standardu JavaScript, nie s\u0105 zgodne z tymi zaimplementowanymi w TypeScript. Na szcz\u0119\u015bcie na ratunek nam wszystkim przyszed\u0142 TypeScript 5.0.<\/p>\n","innerContent":["\n<p>Od 2015 roku w kwestii dekorator\u00f3w sporo si\u0119 zmieni\u0142o. Przede wszystki proposal przedar\u0142 si\u0119 do Stage 3. Nie oby\u0142o si\u0119 jednak bez strat. Z oryginalnego proposala wyci\u0119to znaczn\u0105 cz\u0119\u015b\u0107 dotycz\u0105c\u0105 metadanych. To oznacza, \u017ce dekoratory b\u0119d\u0105ce ju\u017c u progu standardu JavaScript, nie s\u0105 zgodne z tymi zaimplementowanymi w TypeScript. Na szcz\u0119\u015bcie na ratunek nam wszystkim przyszed\u0142 TypeScript 5.0.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli do tej pory nie mieli\u015bcie doczynienia z dekoratorami, to s\u0105 to po prostu funkcje, kt\u00f3re pozwalaj\u0105 nam modyfikowa\u0107 zachowanie innch funckji lub klas. Temat jest na tyle skomplikowany i szeroki, \u017ce nie podejm\u0119 si\u0119 przybli\u017cenia go na \u0142amach tego przegl\u0105d. Wszystkoch g\u0142odnych wiedzy odsys\u0142am do <a href=\"https:\/\/2ality.com\/2022\/10\/javascript-decorators.html\" target=\"_blank\" rel=\"noreferrer noopener\">\u015bwietnego artyku\u0142u Axela Rauschmayer<\/a>. Po jego przeczytaniu mo\u017cecie uda\u0107 si\u0119 prosto do <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-5-0-beta\/\" target=\"_blank\" rel=\"noreferrer noopener\">notatki od Microsoftu<\/a>, z kt\u00f3rej dowiecie si\u0119 jak otypowa\u0107 swoje dekoratory.<\/p>\n","innerContent":["\n<p>Je\u015bli do tej pory nie mieli\u015bcie doczynienia z dekoratorami, to s\u0105 to po prostu funkcje, kt\u00f3re pozwalaj\u0105 nam modyfikowa\u0107 zachowanie innch funckji lub klas. Temat jest na tyle skomplikowany i szeroki, \u017ce nie podejm\u0119 si\u0119 przybli\u017cenia go na \u0142amach tego przegl\u0105d. Wszystkoch g\u0142odnych wiedzy odsys\u0142am do <a href=\"https:\/\/2ality.com\/2022\/10\/javascript-decorators.html\" target=\"_blank\" rel=\"noreferrer noopener\">\u015bwietnego artyku\u0142u Axela Rauschmayer<\/a>. Po jego przeczytaniu mo\u017cecie uda\u0107 si\u0119 prosto do <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-5-0-beta\/\" target=\"_blank\" rel=\"noreferrer noopener\">notatki od Microsoftu<\/a>, z kt\u00f3rej dowiecie si\u0119 jak otypowa\u0107 swoje dekoratory.<\/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\">\/\/ Decorator definition\nfunction debut(originalMethod: any, _context: ClassMethodDecoratorContext) {\n    function replacementMethod(this: any, ...args: any[]) {\n        console.log(\"LOG: Entering method.\")\n        const result = originalMethod.call(this, ...args);\n        console.log(\"LOG: Exiting method.\")\n        return result;\n    }\n    return replacementMethod;\n}\n\n\/\/ Decorator usage\nclass Person {\n    constructor(private readonly name: string) {}\n\n    @debug greet() {\n        console.log(`Hello, my name is ${this.name}.`);\n    }\n}\n\nnew Person(\"Tomek\").greet(); \n\n\/\/ Expected output:\n\/\/ LOG: Entering method.\n\/\/ Hello, my name is Tomek\n\/\/ LOG: Exiting method.<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ Decorator definition\nfunction debut(originalMethod: any, _context: ClassMethodDecoratorContext) {\n    function replacementMethod(this: any, ...args: any[]) {\n        console.log(\"LOG: Entering method.\")\n        const result = originalMethod.call(this, ...args);\n        console.log(\"LOG: Exiting method.\")\n        return result;\n    }\n    return replacementMethod;\n}\n\n\/\/ Decorator usage\nclass Person {\n    constructor(private readonly name: string) {}\n\n    @debug greet() {\n        console.log(`Hello, my name is ${this.name}.`);\n    }\n}\n\nnew Person(\"Tomek\").greet(); \n\n\/\/ Expected output:\n\/\/ LOG: Entering method.\n\/\/ Hello, my name is Tomek\n\/\/ LOG: Exiting method.<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Co z projektami wykorzystuj\u0105cymi star\u0105 implementacj\u0119 dekorator\u00f3w (m.in. Angular, Ember i MobX)? Tak d\u0142ugo jak w konfiguracji TypeScript znajdowa\u0107 si\u0119 b\u0119dzie flaga <code>--experimentalDecorators<\/code> ich zachowanie nie ulegnie zmianie. W d\u0142u\u017cszej perspektywie wszystkie te biblioteki czeka jednak migracja.<\/p>\n","innerContent":["\n<p>Co z projektami wykorzystuj\u0105cymi star\u0105 implementacj\u0119 dekorator\u00f3w (m.in. Angular, Ember i MobX)? Tak d\u0142ugo jak w konfiguracji TypeScript znajdowa\u0107 si\u0119 b\u0119dzie flaga <code>--experimentalDecorators<\/code> ich zachowanie nie ulegnie zmianie. W d\u0142u\u017cszej perspektywie wszystkie te biblioteki czeka jednak migracja.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3><code>const<\/code> Type Parametrs<\/h3>\n","innerContent":["\n<h3><code>const<\/code> Type Parametrs<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli na codzie\u0144 pracujecie z TypeScript, to na pewno znacie trik z <code>as const<\/code>, kt\u00f3ry pozwala nam zaw\u0119zi\u0107 inferowany typ.<\/p>\n","innerContent":["\n<p>Je\u015bli na codzie\u0144 pracujecie z TypeScript, to na pewno znacie trik z <code>as const<\/code>, kt\u00f3ry pozwala nam zaw\u0119zi\u0107 inferowany typ.<\/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\">\/\/ Inferred type: string[]  \nconst namesA = [\"Alice\", \"Bob\", \"Eve\"];\n\n\/\/ Inferred type: readonly [\"Alice\", \"Bob\", \"Eve\"]\nconst namesB = [\"Alice\", \"Bob\", \"Eve\"] as const; <\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ Inferred type: string[]  \nconst namesA = [\"Alice\", \"Bob\", \"Eve\"];\n\n\/\/ Inferred type: readonly [\"Alice\", \"Bob\", \"Eve\"]\nconst namesB = [\"Alice\", \"Bob\", \"Eve\"] as const; <\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Trik ten cz\u0119sto wykorzystujemy na przyk\u0142ad do zaw\u0119\u017cania typu zwracanego przez funkcj\u0119.<\/p>\n","innerContent":["\n<p>Trik ten cz\u0119sto wykorzystujemy na przyk\u0142ad do zaw\u0119\u017cania typu zwracanego przez funkcj\u0119.<\/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\">function getNames<T extends { name: readonly string[]}>(arg: T): T[\"names\"] {\n    return arg.names;\n}\n\n\/\/ Inferred type: string[]\nconst namesA = getNames({ names: [\"Alice\", \"Bob\", \"Eve\"]});\n\n\/\/ Inferred type: readonly [\"Alice\", \"Bob\", \"Eve\"]         \nconst namesB = getNames({ names: [\"Alice\", \"Bob\", \"Eve\"]} as const); <\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">function getNames<T extends { name: readonly string[]}>(arg: T): T[\"names\"] {\n    return arg.names;\n}\n\n\/\/ Inferred type: string[]\nconst namesA = getNames({ names: [\"Alice\", \"Bob\", \"Eve\"]});\n\n\/\/ Inferred type: readonly [\"Alice\", \"Bob\", \"Eve\"]         \nconst namesB = getNames({ names: [\"Alice\", \"Bob\", \"Eve\"]} as const); <\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>TypeScript 5.0 wprowadza mechanizm, kt\u00f3ry pozwala nam przenie\u015b\u0107 <code>as const<\/code> do definicji typu. W ten spos\u00f3b zabieramy ten ci\u0119\u017car z plec\u00f3w naszych u\u017cytkownik\u00f3w i bierzemy go na swoje barki.<\/p>\n","innerContent":["\n<p>TypeScript 5.0 wprowadza mechanizm, kt\u00f3ry pozwala nam przenie\u015b\u0107 <code>as const<\/code> do definicji typu. W ten spos\u00f3b zabieramy ten ci\u0119\u017car z plec\u00f3w naszych u\u017cytkownik\u00f3w i bierzemy go na swoje barki.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":[],"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/*                \ud83d\udc47 Hese is the new const type parameter                *\/\nfunction getNames<const T extends { names: readonly string[] }>(arg: T): T[\"names\"] {\n    return arg.names;\n}\n\n\/\/ Inferred type: readonly [\"Alice\", \"Bob\", \"Eve\"]\nconst names = getNames{ names: [\"Alice\", \"Bob\", \"Eve\"] });<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/*                \ud83d\udc47 Hese is the new const type parameter                *\/\nfunction getNames<const T extends { names: readonly string[] }>(arg: T): T[\"names\"] {\n    return arg.names;\n}\n\n\/\/ Inferred type: readonly [\"Alice\", \"Bob\", \"Eve\"]\nconst names = getNames{ names: [\"Alice\", \"Bob\", \"Eve\"] });<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>I wiele wi\u0119cej...<\/h3>\n","innerContent":["\n<h3>I wiele wi\u0119cej...<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Oczywi\u015bcie to nie koniec nowo\u015bci w TypeScript 5.0. Wszystkich zainteresowanych szczeg\u00f3\u0142ami najnowszej wersji j\u0119zyka odsy\u0142am do <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-5-0\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">\u015bwietnej notatki przygotowanej przez Microsoft<\/a>. <br><\/p>\n","innerContent":["\n<p>Oczywi\u015bcie to nie koniec nowo\u015bci w TypeScript 5.0. Wszystkich zainteresowanych szczeg\u00f3\u0142ami najnowszej wersji j\u0119zyka odsy\u0142am do <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-5-0\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">\u015bwietnej notatki przygotowanej przez Microsoft<\/a>. <br><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. Lazy Loading w React Router 6.9<\/h2>\n","innerContent":["\n<h2>2. Lazy Loading w React Router 6.9<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>React Router z wersji na wersj\u0119 staje si\u0119 coraz bardziej rozbudowan\u0105 bibliotek\u0105. W React Router 6.4 w nasze r\u0119ce trafi\u0142y loadery, kt\u00f3re umo\u017cwiliaj\u0105 nam zr\u00f3wnoleglenie pobierania danych dla wszystkich potrzebnych komponent\u00f3w.\/pr<\/p>\n","innerContent":["\n<p>React Router z wersji na wersj\u0119 staje si\u0119 coraz bardziej rozbudowan\u0105 bibliotek\u0105. W React Router 6.4 w nasze r\u0119ce trafi\u0142y loadery, kt\u00f3re umo\u017cwiliaj\u0105 nam zr\u00f3wnoleglenie pobierania danych dla wszystkich potrzebnych komponent\u00f3w.\/pr<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">const routes = [{\n  path: '\/',\n  loader: () => getUser(),\n  element: <Layout \/>,\n  children: [{\n    path: 'projects',\n    loader: () => getProjects(),\n    element: <Projects \/>,\n    children: [{\n      path: ':projectId',\n      loader: ({ params }) => getProject(params.projectId),\n      element: <Project \/>,\n    }],\n  }],\n}]<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">const routes = [{\n  path: '\/',\n  loader: () => getUser(),\n  element: <Layout \/>,\n  children: [{\n    path: 'projects',\n    loader: () => getProjects(),\n    element: <Projects \/>,\n    children: [{\n      path: ':projectId',\n      loader: ({ params }) => getProject(params.projectId),\n      element: <Project \/>,\n    }],\n  }],\n}]<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":15243,"width":673,"height":187,"sizeSlug":"large","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/network2-1024x285.png\" alt=\"\" class=\"wp-image-15243\" width=\"673\" height=\"187\"\/><figcaption class=\"wp-element-caption\">\u0179r\u00f3d\u0142o: <a href=\"https:\/\/remix.run\/blog\/lazy-loading-routes\" target=\"_blank\" rel=\"noreferrer noopener\">Lazy Loading Routes in React Router 6.4+<\/a><\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/network2-1024x285.png\" alt=\"\" class=\"wp-image-15243\" width=\"673\" height=\"187\"\/><figcaption class=\"wp-element-caption\">\u0179r\u00f3d\u0142o: <a href=\"https:\/\/remix.run\/blog\/lazy-loading-routes\" target=\"_blank\" rel=\"noreferrer noopener\">Lazy Loading Routes in React Router 6.4+<\/a><\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W wydanym w tym tygodniu React Router 6.9 w nasze r\u0119ce trafi\u0142a funkcja <code>React.lazy<\/code>, kt\u00f3ra umo\u017cliwia zr\u00f3wnoleglenie pobierania komponent\u00f3w. \u0141\u0105cz\u0105c j\u0105 z opizanymi w poprzednim akapicie <code>loaders<\/code>, mo\u017cemy zr\u00f3wnolegli\u0107 zar\u00f3wno pobieranie danych jak i komponent\u00f3w.<\/p>\n","innerContent":["\n<p>W wydanym w tym tygodniu React Router 6.9 w nasze r\u0119ce trafi\u0142a funkcja <code>React.lazy<\/code>, kt\u00f3ra umo\u017cliwia zr\u00f3wnoleglenie pobierania komponent\u00f3w. \u0141\u0105cz\u0105c j\u0105 z opizanymi w poprzednim akapicie <code>loaders<\/code>, mo\u017cemy zr\u00f3wnolegli\u0107 zar\u00f3wno pobieranie danych jak i komponent\u00f3w.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">const routes = [{\n  path: '\/',\n  element: <Layout \/>,\n  children: [{\n    path: 'projects',\n    loader: () => getProjects(),\n    lazy: () => import(\".\/projects\"), \/\/ \ud83d\udca4 Lazy load!\n    children: [{\n      path: ':projectId',\n      loader: ({ params }) => getProject(params.projectId),\n      lazy: () => import(\".\/project\"), \/\/ \ud83d\udca4 Lazy load!\n    }],\n  }],\n}]<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">const routes = [{\n  path: '\/',\n  element: <Layout \/>,\n  children: [{\n    path: 'projects',\n    loader: () => getProjects(),\n    lazy: () => import(\".\/projects\"), \/\/ \ud83d\udca4 Lazy load!\n    children: [{\n      path: ':projectId',\n      loader: ({ params }) => getProject(params.projectId),\n      lazy: () => import(\".\/project\"), \/\/ \ud83d\udca4 Lazy load!\n    }],\n  }],\n}]<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":15245,"width":641,"height":242,"sizeSlug":"large","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/network6-1024x387.png\" alt=\"\" class=\"wp-image-15245\" width=\"641\" height=\"242\"\/><figcaption class=\"wp-element-caption\">\u0179r\u00f3d\u0142o: <a href=\"https:\/\/remix.run\/blog\/lazy-loading-routes\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lazy Loading Routes in React Router 6.4+<\/a><\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/network6-1024x387.png\" alt=\"\" class=\"wp-image-15245\" width=\"641\" height=\"242\"\/><figcaption class=\"wp-element-caption\">\u0179r\u00f3d\u0142o: <a href=\"https:\/\/remix.run\/blog\/lazy-loading-routes\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lazy Loading Routes in React Router 6.4+<\/a><\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli temat Was zainteresowa\u0142, to na blogu React Router opublikowany zosta\u0142 <a href=\"https:\/\/remix.run\/blog\/lazy-loading-routes\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">artyku\u0142, kt\u00f3ry w detalach opisuje jakie mo\u017cliwo\u015bci zr\u00f3wnoleglenia pobierania oferuje nam biblioteka<\/a>.<\/p>\n","innerContent":["\n<p>Je\u015bli temat Was zainteresowa\u0142, to na blogu React Router opublikowany zosta\u0142 <a href=\"https:\/\/remix.run\/blog\/lazy-loading-routes\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">artyku\u0142, kt\u00f3ry w detalach opisuje jakie mo\u017cliwo\u015bci zr\u00f3wnoleglenia pobierania oferuje nam biblioteka<\/a>.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>3. Nowa dokumentacja Reacta<\/h2>\n","innerContent":["\n<h2>3. Nowa dokumentacja Reacta<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/react.dev\/blog\/2023\/03\/16\/introducing-react-dev\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">React doczeka\u0142 si\u0119 wreszcie dokumentacji na jak\u0105 zas\u0142uguje<\/a>. Po d\u0142ugich miesi\u0105cach w becie, <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">nowa i przepisana od zera dokumentacja<\/a>, staje si\u0119 t\u0105 domy\u015blna. Przestarza\u0142a ju\u017c poprzednicza nie znika z internetu i dost\u0119pna b\u0119dzie pod adresem <a href=\"https:\/\/legacy.reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">legacy.reactjs.org<\/a>. Co wyr\u00f3\u017cnia now\u0105 dokumentacj\u0105? Przede wszystkim jest ona bogata w interaktywne przyk\u0142ady i posiada od\u015bwie\u017con\u0105 szat\u0119 graficzn\u0105. Je\u015bli jeszcze jej nie widzieli\u015bcie, to najwy\u017csza pora to nadrobi\u0107. Zw\u0142aszcza, \u017ce zosta\u0142a ona uzupe\u0142niona o kilka ciekawych zaawansowanych zagadnie\u0144 (np. dlaczego powinni\u015bmy unika\u0107 <code>useEffect<\/code>). <\/p>\n","innerContent":["\n<p><a href=\"https:\/\/react.dev\/blog\/2023\/03\/16\/introducing-react-dev\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">React doczeka\u0142 si\u0119 wreszcie dokumentacji na jak\u0105 zas\u0142uguje<\/a>. Po d\u0142ugich miesi\u0105cach w becie, <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">nowa i przepisana od zera dokumentacja<\/a>, staje si\u0119 t\u0105 domy\u015blna. Przestarza\u0142a ju\u017c poprzednicza nie znika z internetu i dost\u0119pna b\u0119dzie pod adresem <a href=\"https:\/\/legacy.reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">legacy.reactjs.org<\/a>. Co wyr\u00f3\u017cnia now\u0105 dokumentacj\u0105? Przede wszystkim jest ona bogata w interaktywne przyk\u0142ady i posiada od\u015bwie\u017con\u0105 szat\u0119 graficzn\u0105. Je\u015bli jeszcze jej nie widzieli\u015bcie, to najwy\u017csza pora to nadrobi\u0107. Zw\u0142aszcza, \u017ce zosta\u0142a ona uzupe\u0142niona o kilka ciekawych zaawansowanych zagadnie\u0144 (np. dlaczego powinni\u015bmy unika\u0107 <code>useEffect<\/code>). <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":15255,"width":490,"height":374,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/download-15.jpeg\" alt=\"\" class=\"wp-image-15255\" width=\"490\" height=\"374\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/download-15.jpeg\" alt=\"\" class=\"wp-image-15255\" width=\"490\" height=\"374\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>4. ECMAScript\u00ae 2023<\/h2>\n","innerContent":["\n<h2>4. ECMAScript\u00ae 2023<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W minionym tygodni do sieci trafi\u0142a <a href=\"https:\/\/tc39.es\/ecma262\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">nowa specyfikacja JavaScript<\/a>. Jak zwykle nie jest to lekka lektura i zanim do niej przyst\u0105picie polecam zapozna\u0107 si\u0119 z <a href=\"https:\/\/timothygu.me\/es-howto\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">poradnikiem czytania specyfikacji ECMAScript przygotowanym przez Timothy Gu<\/a>. Je\u015bli mimo wszystko lektura oka\u017ce si\u0119 dla Was za trudna, to w zesz\u0142ym tygodniu Reddita podbi\u0142 <a href=\"https:\/\/betterprogramming.pub\/all-javascript-and-typescript-features-of-the-last-3-years-629c57e73e42\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">artyku\u0142 Linusa Schlumbergera, kt\u00f3ry \u015bwietnie podsumowywuje wszystkie nowo\u015bci w JavaScript z ostatnich trzech lat.<\/a><\/p>\n","innerContent":["\n<p>W minionym tygodni do sieci trafi\u0142a <a href=\"https:\/\/tc39.es\/ecma262\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">nowa specyfikacja JavaScript<\/a>. Jak zwykle nie jest to lekka lektura i zanim do niej przyst\u0105picie polecam zapozna\u0107 si\u0119 z <a href=\"https:\/\/timothygu.me\/es-howto\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">poradnikiem czytania specyfikacji ECMAScript przygotowanym przez Timothy Gu<\/a>. Je\u015bli mimo wszystko lektura oka\u017ce si\u0119 dla Was za trudna, to w zesz\u0142ym tygodniu Reddita podbi\u0142 <a href=\"https:\/\/betterprogramming.pub\/all-javascript-and-typescript-features-of-the-last-3-years-629c57e73e42\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">artyku\u0142 Linusa Schlumbergera, kt\u00f3ry \u015bwietnie podsumowywuje wszystkie nowo\u015bci w JavaScript z ostatnich trzech lat.<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","sizeSlug":"large"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/manuals.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">\u0179r\u00f3d\u0142o: <a href=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/manuals.png\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">XKCD<\/a><\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/manuals.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">\u0179r\u00f3d\u0142o: <a href=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/manuals.png\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">XKCD<\/a><\/figcaption><\/figure>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/15239","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=15239"}],"version-history":[{"count":11,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/15239\/revisions"}],"predecessor-version":[{"id":15277,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/15239\/revisions\/15277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/15261"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=15239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=15239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=15239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}