{"id":10114,"date":"2021-07-08T12:56:40","date_gmt":"2021-07-08T10:56:40","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-45\/"},"modified":"2022-09-19T13:16:40","modified_gmt":"2022-09-19T11:16:40","slug":"frontend-thursday-vol-45","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/","title":{"rendered":"Frontend Thursday vol. 45"},"content":{"rendered":"

1. TypeScript 4.4 Beta<\/h1>\n

W minionym tygodniu \u015bwiat\u0142o dzienne ujrza\u0142a beta TypeScript 4.4 i po raz kolejny nie znajdziemy tu wielkich nowo\u015bci, a raczej zbi\u00f3r drobnych usprawnie\u0144. Nie ma si\u0119 zreszt\u0105 czemu dziwi\u0107 – kolejne wersje TypeScriptu ukazuj\u0105 si\u0119 ostatnio jak grzyby po deszczu, a czasy, kiedy standardem na rynku by\u0142y rzadkie i du\u017ce releasy mamy ju\u017c dawno za sob\u0105. Je\u015bli chcecie zg\u0142\u0119bi\u0107 w szczeg\u00f3\u0142y tego wydania, to odsy\u0142am Was do blogposta, kt\u00f3ry znajdziecie w \u017ar\u00f3d\u0142ach. Ja natomiast postaram si\u0119 przybli\u017cy\u0107 Wam w telegraficznym skr\u00f3cie wszystkie usprawnienia.<\/p>\n

Zacznijmy od wprowadzenia type guards dzia\u0142aj\u0105cych nie tylko bezpo\u015brednio w klauzuli if, ale tak\u017ce w przy wyniesieniu warunku do osobnej zmiennej. Z usprawnienia najbardziej skorzystaj\u0105 deweloperzy agresywnie optymalizuj\u0105cy sw\u00f3j kod (do tej pory byli oni skazani albo na niewydajne wielokrotne sprawdzanie typu, albo niebezpieczne asercje typu), ale my\u015bl\u0119, \u017ce znajdzie si\u0119 te\u017c grupa problem\u00f3w, w kt\u00f3rych usprawnienie to pozwoli tworzy\u0107 po prostu czytelniejszy kod.<\/p>\n

function foo(arg: unknown) {\n    const argIsString = typeof arg === "string";\n    if (argIsString) {\n        console.log(arg.toUpperCase());\n        \/\/ Before TS 4.4: Error! Property 'toUpperCase' does not exist on type 'unknown'.\n    }\n}<\/code><\/pre>\n
Kolejna nowo\u015b\u0107 to wsparcie dla symboli i template string patterns w indexed signatures (to jedno z takich zda\u0144, kt\u00f3re sprawia, \u017ce czuj\u0119 si\u0119 jak pot\u0119\u017cny elficki mag wypowiadaj\u0105cy prastare zakl\u0119cie). Z mojej perspektywy szczeg\u00f3lnie ciekawie wygl\u0105da ta druga opcja, bo pozwala na modelowanie niedost\u0119pnych do tej pory struktur danych (np. obiekt\u00f3w posiadaj\u0105cych dowoln\u0105 liczb\u0119 data parameters).<\/p>\n
interface ObjectWithDataParameters {\n    [optName: `data-${string}`]: unknown;\n}\ndeclare let obj: ObjectWithDataParameters;\n\/\/ Valid to assigns\nobj["data-foo"] = true;\nobj["data-bar"] = \u201cfoo\u201d;\n\/\/ Error! 'bar' wasn't declared in\u2019ObjectWithDataParameters\u2019.\nmyDict["bar"] = "oops";\n<\/code><\/pre>\n
Do TypeScriptu 4.4 trafi\u0105 te\u017c dwie nowe flagi. Pierwsza z nich to `–useUnknownInCatchVariables` i zmienia ona typ wy\u0142apanych w klauzuli try-catch b\u0142\u0119d\u00f3w z any na unknown. Szczerze m\u00f3wi\u0105c, a\u017c ci\u0119\u017cko mi uwierzy\u0107, \u017ce dopiero teraz doczekali\u015bmy si\u0119 takiego usprawnienia, bo typ unknow daje w tej sytuacji du\u017co wi\u0119ksze bezpiecze\u0144stwo typ\u00f3w.<\/p>\n
try {\n    executeSomeThirdPartyCode();\n}\ncatch (err) { \/\/ err: unknown\n    \/\/ Error! Property 'message' does not exist on type 'unknown'.\n    console.error(err.message);\n    \/\/ Works! We can narrow 'err' from 'unknown' to 'Error'.\n    if (err instanceof Error) {\n        console.error(err.message);\n    }\n}<\/code><\/pre>\n
Druga nowa flaga to `–exactOptionalPropertyTypes` i pozwoli ona na rozr\u00f3\u017cnienie w typach sytuacji, kiedy pole mo\u017ce by\u0107 nieobecne i kiedy do pola przypisana zosta\u0142a warto\u015b\u0107 undefined. Ma to szczeg\u00f3lne znaczenie, kiedy korzystamy z spread operator i p\u0119tli for-in i po raz kolejny przyczynia si\u0119 do lepszego oddania przez typu stanu rzeczywistego obiekt\u00f3w.<\/p>\n
interface Dog {\n    name: string,\n    age?: number;\n}\nconst dogA: Dog = {\n    name: "Daniel",\n    age: undefined, \/\/ Error! undefined isn't a number\n};\nconst dogB: Dog = {\n    name: "Daniel",\n};\ninterface Cat {\n    name: string,\n    age: number | undefined;\n}\nconst catA: Cat = {\n    name: "Daniel",\n    age: undefined,\n};\nconst catB: Cat = {\n    name: "Daniel",\n};\n<\/code><\/pre>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-4-beta\/<\/a><\/p>\n
2. Czy to ju\u017c pora po\u017cegna\u0107 Enzyme.js ?<\/h1>\n
Je\u015bli chodzi o nowo\u015bci to doczekali\u015bmy si\u0119 tak zwanego sezonu og\u00f3rkowego, wi\u0119c w najbli\u017cszym czasie mo\u017cecie spodziewa\u0107 si\u0119 od nas troch\u0119 wi\u0119cej opiniii i podsumowa\u0144 ni\u017c news\u00f3w. Artyku\u0142, kt\u00f3ry znajdziecie w \u017ar\u00f3d\u0142ach to mini-felieton na temat Enzyme.js i jego przysz\u0142o\u015bci. Je\u015bli jeszcze u\u017cywacie go w swoich projektach i szukacie argument\u00f3w, jak przekona\u0107 koleg\u00f3w do migracji, to znajdziecie tutaj, co najmniej kilka bardzo sensownych. Je\u015bli natomiast nigdy nie s\u0142yszeli\u015bcie o Enzyme.js, albo ju\u017c po\u017cegnali\u015bcie go w swoich projektach to ta publikacja mo\u017ce by\u0107 dla Was ma\u0142\u0105 lekcj\u0105 historii lub te\u017c sentymentaln\u0105 podr\u00f3\u017c\u0105.<\/p>\n
A i by\u0142bym zapomnia\u0142: artyku\u0142 jest mocno zopiniowany i macie prawo si\u0119 z nim nie zgadza\u0107.<\/p>\n
\"\"<\/figure>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/www.piotrstaniow.pl\/goodbye-enzyme<\/a><\/p>\n
Bonus: `image-set` wreszcie jest wspierany we wszystkich popularnych przegl\u0105darkach<\/h1>\n
Razem z pojawieniem si\u0119 ko\u0144cem kwietnia Firefox 88, selektor `image-set` sta\u0142 si\u0119 powszechnie wspierany. Je\u015bli jeszcze nigdy o nim nie s\u0142yszeli\u015bcie, to w du\u017cym skr\u00f3cie pozwala on zdefiniowa\u0107 obraz w kilku rozdzielczo\u015bciach (mi ta funkcjonalno\u015b\u0107 strasznie przypomina okre\u015blanie zasob\u00f3w w androidowych aplikacjach). W ten spos\u00f3b sama przegl\u0105darka mo\u017ce zdecydowa\u0107, kt\u00f3ry wariant najlepiej za\u0142adowa\u0107. Pod uwag\u0119 brane s\u0105 takie czynniki jak rozdzielczo\u015b\u0107 ekranu, czy pr\u0119dko\u015b\u0107 internetu.<\/p>\n
Je\u015bli mocno optymalizujecie swoje aplikacje to zdecydowanie warto zainteresowa\u0107 si\u0119 tym selektorem (w \u017ar\u00f3d\u0142ach znajdziecie bardzo dobre podsumowanie tematu, kt\u00f3re zahacza te\u017c o mocno powi\u0105zane tematy, takie jak na przyk\u0142ad optymalne formaty zdj\u0119\u0107)<\/p>\n
.hero {\n  \/* Fallback *\/\n  background-image: url("platypus.png");\n  \/* Standard use *\/\n  background-image: image-set("platypus.png" 1x, "platypus-2x.png" 2x);\n}\n.villain {\n  background-image: image-set(\n    "kitten.avif" type("image\/avif"),\n    "kitten.jpg" type("image\/jpeg")\n  );\n}\n<\/code><\/pre>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/css-tricks.com\/using-performant-next-gen-images-in-css-with-image-set\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
W tym tygodniu mamy dla Was kolejn\u0105 bet\u0119 TypeScript, troch\u0119 dywagacji na temat Enzyme.js i pe\u0142ne wsparcie dla selektora `image-set`.<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-10114","post","type-post","status-publish","format-standard","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"estimated_reading_time":"4"},"yoast_head":"\nFrontend Thursday vol. 45 - 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-45\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 45 - Vived\" \/>\n<meta property=\"og:description\" content=\"W tym tygodniu mamy dla Was kolejn\u0105 bet\u0119 TypeScript, troch\u0119 dywagacji na temat Enzyme.js i pe\u0142ne wsparcie dla selektora `image-set`.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-08T10:56:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d090ec506a.gif\" \/>\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\/frontend-thursday-vol-45\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 45\",\"datePublished\":\"2021-07-08T10:56:40+00:00\",\"dateModified\":\"2022-09-19T11:16:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/\"},\"wordCount\":654,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d090ec506a.gif\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/\",\"name\":\"Frontend Thursday vol. 45 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d090ec506a.gif\",\"datePublished\":\"2021-07-08T10:56:40+00:00\",\"dateModified\":\"2022-09-19T11:16:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d090ec506a.gif\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d090ec506a.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 45\"}]},{\"@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. 45 - 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-45\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 45 - Vived","og_description":"W tym tygodniu mamy dla Was kolejn\u0105 bet\u0119 TypeScript, troch\u0119 dywagacji na temat Enzyme.js i pe\u0142ne wsparcie dla selektora `image-set`.","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/","og_site_name":"Vived","article_published_time":"2021-07-08T10:56:40+00:00","article_modified_time":"2022-09-19T11:16:40+00:00","og_image":[{"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d090ec506a.gif","type":"","width":"","height":""}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 45","datePublished":"2021-07-08T10:56:40+00:00","dateModified":"2022-09-19T11:16:40+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/"},"wordCount":654,"commentCount":0,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d090ec506a.gif","articleSection":["Frontend"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/","name":"Frontend Thursday vol. 45 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d090ec506a.gif","datePublished":"2021-07-08T10:56:40+00:00","dateModified":"2022-09-19T11:16:40+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d090ec506a.gif","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d090ec506a.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-45\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 45"}]},{"@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":null,"attrs":[],"innerBlocks":[],"innerHTML":"<h1 id=\"1-typescript-44-beta\">1. TypeScript 4.4 Beta<\/h1>\nW minionym tygodniu \u015bwiat\u0142o dzienne ujrza\u0142a beta TypeScript 4.4 i po raz kolejny nie znajdziemy tu wielkich nowo\u015bci, a raczej zbi\u00f3r drobnych usprawnie\u0144. Nie ma si\u0119 zreszt\u0105 czemu dziwi\u0107 - kolejne wersje TypeScriptu ukazuj\u0105 si\u0119 ostatnio jak grzyby po deszczu, a czasy, kiedy standardem na rynku by\u0142y rzadkie i du\u017ce releasy mamy ju\u017c dawno za sob\u0105. Je\u015bli chcecie zg\u0142\u0119bi\u0107 w szczeg\u00f3\u0142y tego wydania, to odsy\u0142am Was do blogposta, kt\u00f3ry znajdziecie w \u017ar\u00f3d\u0142ach. Ja natomiast postaram si\u0119 przybli\u017cy\u0107 Wam w telegraficznym skr\u00f3cie wszystkie usprawnienia.\n\nZacznijmy od wprowadzenia type guards dzia\u0142aj\u0105cych nie tylko bezpo\u015brednio w klauzuli if, ale tak\u017ce w przy wyniesieniu warunku do osobnej zmiennej. Z usprawnienia najbardziej skorzystaj\u0105 deweloperzy agresywnie optymalizuj\u0105cy sw\u00f3j kod (do tej pory byli oni skazani albo na niewydajne wielokrotne sprawdzanie typu, albo niebezpieczne asercje typu), ale my\u015bl\u0119, \u017ce znajdzie si\u0119 te\u017c grupa problem\u00f3w, w kt\u00f3rych usprawnienie to pozwoli tworzy\u0107 po prostu czytelniejszy kod.\n<pre><code class=\"language-ts\">function foo(arg: unknown) {\n    const argIsString = typeof arg === \"string\";\n    if (argIsString) {\n        console.log(arg.toUpperCase());\n        \/\/ Before TS 4.4: Error! Property 'toUpperCase' does not exist on type 'unknown'.\n    }\n}<\/code><\/pre>\nKolejna nowo\u015b\u0107 to wsparcie dla symboli i template string patterns w indexed signatures (to jedno z takich zda\u0144, kt\u00f3re sprawia, \u017ce czuj\u0119 si\u0119 jak pot\u0119\u017cny elficki mag wypowiadaj\u0105cy prastare zakl\u0119cie). Z mojej perspektywy szczeg\u00f3lnie ciekawie wygl\u0105da ta druga opcja, bo pozwala na modelowanie niedost\u0119pnych do tej pory struktur danych (np. obiekt\u00f3w posiadaj\u0105cych dowoln\u0105 liczb\u0119 data parameters).\n<pre><code class=\"language-ts\">interface ObjectWithDataParameters {\n    [optName: `data-${string}`]: unknown;\n}\ndeclare let obj: ObjectWithDataParameters;\n\/\/ Valid to assigns\nobj[\"data-foo\"] = true;\nobj[\"data-bar\"] = \u201cfoo\u201d;\n\/\/ Error! 'bar' wasn't declared in\u2019ObjectWithDataParameters\u2019.\nmyDict[\"bar\"] = \"oops\";\n<\/code><\/pre>\nDo TypeScriptu 4.4 trafi\u0105 te\u017c dwie nowe flagi. Pierwsza z nich to `--useUnknownInCatchVariables` i zmienia ona typ wy\u0142apanych w klauzuli try-catch b\u0142\u0119d\u00f3w z any na unknown. Szczerze m\u00f3wi\u0105c, a\u017c ci\u0119\u017cko mi uwierzy\u0107, \u017ce dopiero teraz doczekali\u015bmy si\u0119 takiego usprawnienia, bo typ unknow daje w tej sytuacji du\u017co wi\u0119ksze bezpiecze\u0144stwo typ\u00f3w.\n<pre><code class=\"language-ts\">try {\n    executeSomeThirdPartyCode();\n}\ncatch (err) { \/\/ err: unknown\n    \/\/ Error! Property 'message' does not exist on type 'unknown'.\n    console.error(err.message);\n    \/\/ Works! We can narrow 'err' from 'unknown' to 'Error'.\n    if (err instanceof Error) {\n        console.error(err.message);\n    }\n}<\/code><\/pre>\nDruga nowa flaga to `--exactOptionalPropertyTypes` i pozwoli ona na rozr\u00f3\u017cnienie w typach sytuacji, kiedy pole mo\u017ce by\u0107 nieobecne i kiedy do pola przypisana zosta\u0142a warto\u015b\u0107 undefined. Ma to szczeg\u00f3lne znaczenie, kiedy korzystamy z spread operator i p\u0119tli for-in i po raz kolejny przyczynia si\u0119 do lepszego oddania przez typu stanu rzeczywistego obiekt\u00f3w.\n<pre><code class=\"language-ts\">interface Dog {\n    name: string,\n    age?: number;\n}\nconst dogA: Dog = {\n    name: \"Daniel\",\n    age: undefined, \/\/ Error! undefined isn't a number\n};\nconst dogB: Dog = {\n    name: \"Daniel\",\n};\ninterface Cat {\n    name: string,\n    age: number | undefined;\n}\nconst catA: Cat = {\n    name: \"Daniel\",\n    age: undefined,\n};\nconst catB: Cat = {\n    name: \"Daniel\",\n};\n<\/code><\/pre>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-4-beta\/\">https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-4-beta\/<\/a>\n<h1 id=\"2-czy-to-ju%C5%BC-pora-po%C5%BCegna%C4%87-enzymejs\">2. Czy to ju\u017c pora po\u017cegna\u0107 Enzyme.js ?<\/h1>\nJe\u015bli chodzi o nowo\u015bci to doczekali\u015bmy si\u0119 tak zwanego sezonu og\u00f3rkowego, wi\u0119c w najbli\u017cszym czasie mo\u017cecie spodziewa\u0107 si\u0119 od nas troch\u0119 wi\u0119cej opiniii i podsumowa\u0144 ni\u017c news\u00f3w. Artyku\u0142, kt\u00f3ry znajdziecie w \u017ar\u00f3d\u0142ach to mini-felieton na temat Enzyme.js i jego przysz\u0142o\u015bci. Je\u015bli jeszcze u\u017cywacie go w swoich projektach i szukacie argument\u00f3w, jak przekona\u0107 koleg\u00f3w do migracji, to znajdziecie tutaj, co najmniej kilka bardzo sensownych. Je\u015bli natomiast nigdy nie s\u0142yszeli\u015bcie o Enzyme.js, albo ju\u017c po\u017cegnali\u015bcie go w swoich projektach to ta publikacja mo\u017ce by\u0107 dla Was ma\u0142\u0105 lekcj\u0105 historii lub te\u017c sentymentaln\u0105 podr\u00f3\u017c\u0105.\n\nA i by\u0142bym zapomnia\u0142: artyku\u0142 jest mocno zopiniowany i macie prawo si\u0119 z nim nie zgadza\u0107.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d090ec506a.gif\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/www.piotrstaniow.pl\/goodbye-enzyme\">https:\/\/www.piotrstaniow.pl\/goodbye-enzyme<\/a>\n<h1 id=\"bonus-%60image-set%60-wreszcie-jest-wspierany-we-wszystkich-popularnych-przegl%C4%85darkach\">Bonus: `image-set` wreszcie jest wspierany we wszystkich popularnych przegl\u0105darkach<\/h1>\nRazem z pojawieniem si\u0119 ko\u0144cem kwietnia Firefox 88, selektor `image-set` sta\u0142 si\u0119 powszechnie wspierany. Je\u015bli jeszcze nigdy o nim nie s\u0142yszeli\u015bcie, to w du\u017cym skr\u00f3cie pozwala on zdefiniowa\u0107 obraz w kilku rozdzielczo\u015bciach (mi ta funkcjonalno\u015b\u0107 strasznie przypomina okre\u015blanie zasob\u00f3w w androidowych aplikacjach). W ten spos\u00f3b sama przegl\u0105darka mo\u017ce zdecydowa\u0107, kt\u00f3ry wariant najlepiej za\u0142adowa\u0107. Pod uwag\u0119 brane s\u0105 takie czynniki jak rozdzielczo\u015b\u0107 ekranu, czy pr\u0119dko\u015b\u0107 internetu.\n\nJe\u015bli mocno optymalizujecie swoje aplikacje to zdecydowanie warto zainteresowa\u0107 si\u0119 tym selektorem (w \u017ar\u00f3d\u0142ach znajdziecie bardzo dobre podsumowanie tematu, kt\u00f3re zahacza te\u017c o mocno powi\u0105zane tematy, takie jak na przyk\u0142ad optymalne formaty zdj\u0119\u0107)\n<pre><code class=\"language-css\">.hero {\n  \/* Fallback *\/\n  background-image: url(\"platypus.png\");\n  \/* Standard use *\/\n  background-image: image-set(\"platypus.png\" 1x, \"platypus-2x.png\" 2x);\n}\n.villain {\n  background-image: image-set(\n    \"kitten.avif\" type(\"image\/avif\"),\n    \"kitten.jpg\" type(\"image\/jpeg\")\n  );\n}\n<\/code><\/pre>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-2\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/css-tricks.com\/using-performant-next-gen-images-in-css-with-image-set\/\">https:\/\/css-tricks.com\/using-performant-next-gen-images-in-css-with-image-set\/<\/a>","innerContent":["<h1 id=\"1-typescript-44-beta\">1. TypeScript 4.4 Beta<\/h1>\nW minionym tygodniu \u015bwiat\u0142o dzienne ujrza\u0142a beta TypeScript 4.4 i po raz kolejny nie znajdziemy tu wielkich nowo\u015bci, a raczej zbi\u00f3r drobnych usprawnie\u0144. Nie ma si\u0119 zreszt\u0105 czemu dziwi\u0107 - kolejne wersje TypeScriptu ukazuj\u0105 si\u0119 ostatnio jak grzyby po deszczu, a czasy, kiedy standardem na rynku by\u0142y rzadkie i du\u017ce releasy mamy ju\u017c dawno za sob\u0105. Je\u015bli chcecie zg\u0142\u0119bi\u0107 w szczeg\u00f3\u0142y tego wydania, to odsy\u0142am Was do blogposta, kt\u00f3ry znajdziecie w \u017ar\u00f3d\u0142ach. Ja natomiast postaram si\u0119 przybli\u017cy\u0107 Wam w telegraficznym skr\u00f3cie wszystkie usprawnienia.\n\nZacznijmy od wprowadzenia type guards dzia\u0142aj\u0105cych nie tylko bezpo\u015brednio w klauzuli if, ale tak\u017ce w przy wyniesieniu warunku do osobnej zmiennej. Z usprawnienia najbardziej skorzystaj\u0105 deweloperzy agresywnie optymalizuj\u0105cy sw\u00f3j kod (do tej pory byli oni skazani albo na niewydajne wielokrotne sprawdzanie typu, albo niebezpieczne asercje typu), ale my\u015bl\u0119, \u017ce znajdzie si\u0119 te\u017c grupa problem\u00f3w, w kt\u00f3rych usprawnienie to pozwoli tworzy\u0107 po prostu czytelniejszy kod.\n<pre><code class=\"language-ts\">function foo(arg: unknown) {\n    const argIsString = typeof arg === \"string\";\n    if (argIsString) {\n        console.log(arg.toUpperCase());\n        \/\/ Before TS 4.4: Error! Property 'toUpperCase' does not exist on type 'unknown'.\n    }\n}<\/code><\/pre>\nKolejna nowo\u015b\u0107 to wsparcie dla symboli i template string patterns w indexed signatures (to jedno z takich zda\u0144, kt\u00f3re sprawia, \u017ce czuj\u0119 si\u0119 jak pot\u0119\u017cny elficki mag wypowiadaj\u0105cy prastare zakl\u0119cie). Z mojej perspektywy szczeg\u00f3lnie ciekawie wygl\u0105da ta druga opcja, bo pozwala na modelowanie niedost\u0119pnych do tej pory struktur danych (np. obiekt\u00f3w posiadaj\u0105cych dowoln\u0105 liczb\u0119 data parameters).\n<pre><code class=\"language-ts\">interface ObjectWithDataParameters {\n    [optName: `data-${string}`]: unknown;\n}\ndeclare let obj: ObjectWithDataParameters;\n\/\/ Valid to assigns\nobj[\"data-foo\"] = true;\nobj[\"data-bar\"] = \u201cfoo\u201d;\n\/\/ Error! 'bar' wasn't declared in\u2019ObjectWithDataParameters\u2019.\nmyDict[\"bar\"] = \"oops\";\n<\/code><\/pre>\nDo TypeScriptu 4.4 trafi\u0105 te\u017c dwie nowe flagi. Pierwsza z nich to `--useUnknownInCatchVariables` i zmienia ona typ wy\u0142apanych w klauzuli try-catch b\u0142\u0119d\u00f3w z any na unknown. Szczerze m\u00f3wi\u0105c, a\u017c ci\u0119\u017cko mi uwierzy\u0107, \u017ce dopiero teraz doczekali\u015bmy si\u0119 takiego usprawnienia, bo typ unknow daje w tej sytuacji du\u017co wi\u0119ksze bezpiecze\u0144stwo typ\u00f3w.\n<pre><code class=\"language-ts\">try {\n    executeSomeThirdPartyCode();\n}\ncatch (err) { \/\/ err: unknown\n    \/\/ Error! Property 'message' does not exist on type 'unknown'.\n    console.error(err.message);\n    \/\/ Works! We can narrow 'err' from 'unknown' to 'Error'.\n    if (err instanceof Error) {\n        console.error(err.message);\n    }\n}<\/code><\/pre>\nDruga nowa flaga to `--exactOptionalPropertyTypes` i pozwoli ona na rozr\u00f3\u017cnienie w typach sytuacji, kiedy pole mo\u017ce by\u0107 nieobecne i kiedy do pola przypisana zosta\u0142a warto\u015b\u0107 undefined. Ma to szczeg\u00f3lne znaczenie, kiedy korzystamy z spread operator i p\u0119tli for-in i po raz kolejny przyczynia si\u0119 do lepszego oddania przez typu stanu rzeczywistego obiekt\u00f3w.\n<pre><code class=\"language-ts\">interface Dog {\n    name: string,\n    age?: number;\n}\nconst dogA: Dog = {\n    name: \"Daniel\",\n    age: undefined, \/\/ Error! undefined isn't a number\n};\nconst dogB: Dog = {\n    name: \"Daniel\",\n};\ninterface Cat {\n    name: string,\n    age: number | undefined;\n}\nconst catA: Cat = {\n    name: \"Daniel\",\n    age: undefined,\n};\nconst catB: Cat = {\n    name: \"Daniel\",\n};\n<\/code><\/pre>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-4-beta\/\">https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-4-beta\/<\/a>\n<h1 id=\"2-czy-to-ju%C5%BC-pora-po%C5%BCegna%C4%87-enzymejs\">2. Czy to ju\u017c pora po\u017cegna\u0107 Enzyme.js ?<\/h1>\nJe\u015bli chodzi o nowo\u015bci to doczekali\u015bmy si\u0119 tak zwanego sezonu og\u00f3rkowego, wi\u0119c w najbli\u017cszym czasie mo\u017cecie spodziewa\u0107 si\u0119 od nas troch\u0119 wi\u0119cej opiniii i podsumowa\u0144 ni\u017c news\u00f3w. Artyku\u0142, kt\u00f3ry znajdziecie w \u017ar\u00f3d\u0142ach to mini-felieton na temat Enzyme.js i jego przysz\u0142o\u015bci. Je\u015bli jeszcze u\u017cywacie go w swoich projektach i szukacie argument\u00f3w, jak przekona\u0107 koleg\u00f3w do migracji, to znajdziecie tutaj, co najmniej kilka bardzo sensownych. Je\u015bli natomiast nigdy nie s\u0142yszeli\u015bcie o Enzyme.js, albo ju\u017c po\u017cegnali\u015bcie go w swoich projektach to ta publikacja mo\u017ce by\u0107 dla Was ma\u0142\u0105 lekcj\u0105 historii lub te\u017c sentymentaln\u0105 podr\u00f3\u017c\u0105.\n\nA i by\u0142bym zapomnia\u0142: artyku\u0142 jest mocno zopiniowany i macie prawo si\u0119 z nim nie zgadza\u0107.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d090ec506a.gif\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/www.piotrstaniow.pl\/goodbye-enzyme\">https:\/\/www.piotrstaniow.pl\/goodbye-enzyme<\/a>\n<h1 id=\"bonus-%60image-set%60-wreszcie-jest-wspierany-we-wszystkich-popularnych-przegl%C4%85darkach\">Bonus: `image-set` wreszcie jest wspierany we wszystkich popularnych przegl\u0105darkach<\/h1>\nRazem z pojawieniem si\u0119 ko\u0144cem kwietnia Firefox 88, selektor `image-set` sta\u0142 si\u0119 powszechnie wspierany. Je\u015bli jeszcze nigdy o nim nie s\u0142yszeli\u015bcie, to w du\u017cym skr\u00f3cie pozwala on zdefiniowa\u0107 obraz w kilku rozdzielczo\u015bciach (mi ta funkcjonalno\u015b\u0107 strasznie przypomina okre\u015blanie zasob\u00f3w w androidowych aplikacjach). W ten spos\u00f3b sama przegl\u0105darka mo\u017ce zdecydowa\u0107, kt\u00f3ry wariant najlepiej za\u0142adowa\u0107. Pod uwag\u0119 brane s\u0105 takie czynniki jak rozdzielczo\u015b\u0107 ekranu, czy pr\u0119dko\u015b\u0107 internetu.\n\nJe\u015bli mocno optymalizujecie swoje aplikacje to zdecydowanie warto zainteresowa\u0107 si\u0119 tym selektorem (w \u017ar\u00f3d\u0142ach znajdziecie bardzo dobre podsumowanie tematu, kt\u00f3re zahacza te\u017c o mocno powi\u0105zane tematy, takie jak na przyk\u0142ad optymalne formaty zdj\u0119\u0107)\n<pre><code class=\"language-css\">.hero {\n  \/* Fallback *\/\n  background-image: url(\"platypus.png\");\n  \/* Standard use *\/\n  background-image: image-set(\"platypus.png\" 1x, \"platypus-2x.png\" 2x);\n}\n.villain {\n  background-image: image-set(\n    \"kitten.avif\" type(\"image\/avif\"),\n    \"kitten.jpg\" type(\"image\/jpeg\")\n  );\n}\n<\/code><\/pre>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-2\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/css-tricks.com\/using-performant-next-gen-images-in-css-with-image-set\/\">https:\/\/css-tricks.com\/using-performant-next-gen-images-in-css-with-image-set\/<\/a>"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10114","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=10114"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10114\/revisions"}],"predecessor-version":[{"id":10632,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10114\/revisions\/10632"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}