Dotevo programowanie [#1] - TypeScript

Postanowiłem napisać pewną serię związaną z moim życiem zawodowym. Pozwoli mi to na podzielenie się z Wam pewnymi doświadczeniami, a przy okazji zmotywuje do napisania czegoś na Hive.

<h1>Wstęp <p dir="auto">Jestem zawodowo programistą od 9 lat i przez ten czas pracowałem w różnych technologiach i pisałem bardzo różne rzeczy - od urządzeń wbudowanych, automotive i technologii mobilnych po technologie webowe, z którymi pracuję aktualnie. Przez te lata zauważyłem, że podejście w zależności od obszaru jest zupełnie inne, ale też takie szerokie znajomości pomagają w pracy. <h2>TypeScript <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/dotevo/nT1eZbel-typescript-logo-B29A3F462D-seeklogo.com_.webp" alt="typescriptlogoB29A3F462Dseeklogo.com_.webp" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/dotevo/nT1eZbel-typescript-logo-B29A3F462D-seeklogo.com_.webp 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/dotevo/nT1eZbel-typescript-logo-B29A3F462D-seeklogo.com_.webp 2x" /> <p dir="auto">Pisałem w wielu językach programowania. Zaczynałem od C i C++ w podstawówce, potem w technikum próbowałem sił również w perlu. Na studiach była Java, ale kilka projektów zrobiłem w C++. Pisałem też wtedy swoje pierwsze projekty w JavaScript. W pracy doszedł potem Python, a po drodze liznąłem jeszcze kilku języków. Lecz jedno jest pewne. Zawsze w pythonie brakowało mi typowania z javy i C++, a w C++ brakowało mi dynamicznych template (takich na poziomie runtime) z Javy. W Javie denerwowała zaś mnie wydajność. Każdy język ma swoje wady i zalety. Największą wadą i zaletą JS w mojej opinii były typy. Dlaczego wadą i zaletą? Bo czasem fajnie było napisać stronę w leaflet i rozszerzyć pewne obiekty używając <code>prototype. Był to dla mnie taki wytrych, który pozwalał na bardzo dużo. Z drugiej strony, czasem zależało mi abym miał wygodne podpowiadanie propsów w obiekcie i aby one tam faktycznie były. TypeScript to pod tym względem najlepszy język bo pozwala zachować elastyczność i dodać do tej elastyczności pewne reguły.<br /> Dodatkowo nawej najbardziej typowany język nie pozwala tak dobrze typować jak Typescript. Przykład: <pre><code>type PowerStatus = 'on' | 'off'; const variable: PowerStatus = 'on'; const variable2: PowerStatus = 'string'; // Type '"string"' is not assignable to type 'PowerStatus' <p dir="auto">Od roku jestem w projekcie, który używa Nest.js i TypeScript oraz kilku innych fajnych technologii, o których może napiszę kiedyś indziej. Dzisiaj skupię się na TS, który nie tak dawno dorobił się wydania 4.1. Co dla mnie jest osobiście ważne, że to pierwsze wydanie, którego używałem zanim pojawiło się w wersji stabilnej, a zmiany, które przynosi były mi znane jeszcze przed latem. <p dir="auto">Template Literal Types to w mojej opinii najlepszy feature, który się pojawił bo nigdy jeszcze nie spędziłem tyle czasu na zabawę typami. Daje on ogromne możliwości. Wyobraźcie sobie, że macie funkcję, która przerabia obiekt tak, że np.: <pre><code>{ propercja_1: true, propercja_tekstowa: string, } <p dir="auto">zostaje zamieniona na: <pre><code>{ propercja1: true, propercjaTekstowa: string, } <p dir="auto">sprawa jest oczywiście bardzo prosta, gdy znamy dokładny model i w return type możemy podać inny model. Co jednak jeśli ta funkcja ma być generyczna? <p dir="auto">Możemy wtedy napisać typ, który podmieni nam <code>jakis_tekst na <code>jakisTekst w ten sposób: <pre><code>type Rename< S extends string > = S extends `${infer PRE}_${infer POST}` ? Rename<`${PRE}${Capitalize<POST>}`> : S; <p dir="auto">A następnie użyć kolejnej nowej rzeczy w języku czyli mapowania kluczy (słowo kluczowe <code>as): <pre><code> type ReplaceProps<O extends object> = { [P in keyof O & string as Rename<P>]: O[P]; }; <pre><code>type Test = { jakis_typ: number; jakis_string: string; } const w: ReplaceProps<Test> ={ jakisTyp: 3, jakisString: 'a'}; const z: ReplaceProps<Test> ={ jakisTyp: 3, jakis_string: 'a'}; // Type '{ jakisTyp: number; jakis_string: string; }' is not assignable to type // ReplaceProps<Test>'. Object literal may only specify known properties, but 'jakis_string' // does not exist in type 'ReplaceProps<Test>'. Did you mean to write 'jakisString'? <p dir="auto">Fajne prawda? Zrobiłem już tyle różnych własnych typów używając tego, że mam wrażenie, że za jakiś czas nie będę potrafił żyć bez tego. Możliwość podawania <code>{TYP} na poziomie typów to prawdziwy As w rękawie. <p dir="auto">Od pewnego czasu pracuję w weekendy nad własną nakładką na infrastrukturę. Coś podobnego do ORM, ale jedynie do odczytu, ale za to zawiera różne dodatkowe funkcje.<br /> Podrzucę kilka rozwiązań: <ul> <li><p dir="auto">Sprawdzanie czy string na wejściu pasuje pod <code>{field} as {name}<br /><span> <a href="https://www.typescriptlang.org/play?strictPropertyInitialization=false#code/C4TwDgpgBAogHgWzAFXNAvFA5MCBnYLKAH2wEMjSsAjLAbgCgHRIoBhACzIDsBzCADIBLXACcyAGwA8qVhDi5uAEzxQCooXwA0UABpR5ilWuAa+APiiZZ0UgAMAJAG8bAXyhlVz3a7uMGAMYSnqrwZEgSEDIGChDKquqavJZODFBQYACu1BJCAVBwIABeUvqGccaJFgAUAGZCkUoAXOxcfIIiEOLSyDq65gCUUKnprgxjgQD23AQZVlDcEADusHDhYJFS8Eg25tUDjGAAdIVF1VhkHqq6FAcMx6fnuLOeULxYdw-FT-jAl68fOhQAD0wKgAElgGoOJNMhIlFBamQGhAlPcTt8cL8rnhASCwZDobD4YjkY0GEA" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://www.typescriptlang.org/play?strictPropertyInitialization=false#code/C4TwDgpgBAogHgWzAFXNAvFA5MCBnYLKAH2wEMjSsAjLAbgCgHRIoBhACzIDsBzCADIBLXACcyAGwA8qVhDi5uAEzxQCooXwA0UABpR5ilWuAa+APiiZZ0UgAMAJAG8bAXyhlVz3a7uMGAMYSnqrwZEgSEDIGChDKquqavJZODFBQYACu1BJCAVBwIABeUvqGccaJFgAUAGZCkUoAXOxcfIIiEOLSyDq65gCUUKnprgxjgQD23AQZVlDcEADusHDhYJFS8Eg25tUDjGAAdIVF1VhkHqq6FAcMx6fnuLOeULxYdw-FT-jAl68fOhQAD0wKgAElgGoOJNMhIlFBamQGhAlPcTt8cL8rnhASCwZDobD4YjkY0GEA <li><p dir="auto">Wyciąganie modelu, w sposób zagnieżdżony <pre><code>export class ResultBuilder<T extends object> { public select(list: SelectorKeys<T> | SelectorKeys<T>[]) {} public filter<K extends keyof Filter<T>, L extends Filter<T>[K]>( list: K, ...args: Parameters<L> ) {} } //------------------------------------------------------------------- type AEntity = { a: number; b: string; differentMethod(active: boolean, end: number): void; }; type BEntity = { aEntity: AEntity; testProperty: number; isActive(active: boolean): void; }; const rb = new ResultBuilder<BEntity>(); rb.select('testProperty'); rb.select('aEntity.a'); rb.select('aEntity.as'); // Failed because of missing property rb.filter('isActive', true); rb.filter('isActive', 42); // Failed because of wrong filter type rb.filter('aEntity.differentMethod', true); // Failed because of only one param rb.filter('aEntity.differentMethod', true, 42); <p dir="auto"><a href="https://www.typescriptlang.org/play?#code/C4TwDgpgBAYgrgOwMbAJYHsEAUBO7I6gByAhgLYQDOAPACoB8UAvFAN4BQUUA2gNJSoEUANYQQ6AGZRaAXQBc0vjKgQAHsAgIAJpViIUGIQH4o-BQggA3CDgDc7AL7dR4qbPtqw6QlFCQ9yGiYuPg2aFR0jCxYqEjCdAA0AQbBeATE5BEM9LZ+0LioZKho1iHpIKQUNAzMbJw8-IIiYpLS8oq8ymoa2rrwgYb1XCYW1jhDUAq0SirqmjpQ6ABGAFYQKBMjVjYTCrz2Ti6t7uye3sC+4Pk4hcWopWlhqFlRUDFxiW83RSUQZWEVTLVeg5AD0oKgRCoGi0UDAJEI7DyXystW4oxsSQADEkAIxJABMSQAzEkAHQUrHcGQyWxnHzIgBS6EEAEEADbsz4AEVmPQWCDgZCWNlqpLefPmukowBuCAA5rUAERK17cerc9hdOa9HgYnAyeomVgOepTSW65ZrDbDKDg6QAC1QunhPmdUBwVC8CEoqCW7OgEm8UBInKgCHQFzAaUoEwAPnUuEnkw0BEIjm4ZABaIx7C0LGVyxUJwXCnYpitQEzTTr53RW9bACaVpMmZlszl0JRJXBWbjcmRJAAGABJWLwHGSh-Rmy3JmxTXOkwoTfYW4cWpnZwmOEu+Gnmq5pFAAGRQQuCRUkXSj1hYBxjidD7O50x18+yy9QEtCkXjJe2jW2r8n0+hBAgs4ttWSiQZWUwzN0UqLKsjawRWWxjGhKbwZ0WFcOY2x2LBi7zquyK8GINAAKqvFR74AErrN4WjUIIEiirwSQkAgICMCYZjhoRHiqF4DJXFAACSCAaDglCNoY1B0YhlooSgry7qmTQUSA1H0O0Sk6gsjFIMx1CcWm7E4NIfHHgRYwHPYyIAMoQAGKDeHQ74NmptQFD89x-I8hDPDQUkyXJKQINQ7YIByXLZDkSLiS5bnAN42nVF5qnAK8GZQCljYeQwuTiTAqDsjJnnKQs3k5bU-SRf8wURGFNgReB0UsrFnYJfYpwiecUBIOy166IxlBwBVABCcDlVoNhVYZ9bZYwGlgHA-qxOermNgAFOyzrAAoBXuTgGWRN++U7ad50MNSACUC71Otm1IFAEjlZV-DVboeVlRVC0MEkAAy77-ZVd2dPQu0TAdMp7AkEwUmSCLypQChYAimThdQwMzlwj0mo47DglmZPkxTlNU9TNO03T9NZkl-isgAotJxQgLUGkkOYv42GuUBLAoF4KrYUD1FoqASJZmjAAAshAwAOugWi7SQBjWAoSzoOgAbcUk8y82WOD3QolgsloDlM9AU1s2goBc-UJB2xzCis+zoACxoMpNaARt-mL9TOqyGsQGrodazresIKbUDm6gluOH1Jk+hcOBLLUFgAO5QONk3ADNc0LbbHu8bt932OnZJyalu0AOTe8AvsgHXFfsFXNd7XXzulyjreV0s1fXcA9c9-bIAo5Q-d2hCMAkOVECwiKSAkHAcmLFIRSUL6CpwkFoDt4PH0Azg9fB6HddJLKcAQG3VfHzJZ+UCHvyX1AAAsBIVzPsDzwGS-rFXuvVoWc8C7wfqKPIh8yQQNPt3F2oAySS2ljYWWCslYqzftfW+Yt7RzwXgAlea9oCtEwOyTmmBoCunINA2Bo8EET2QTLaS6DlZaCwTgG+SRP4VyAA" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Pełny przykład <p dir="auto">Jest jeszcze wiele rzeczy, które próbowałem pisać. Ale zostawię sobie te rzeczy na później ;-) <p dir="auto">Miłego programowania!