create account

Dotevo programowanie [#1] - TypeScript by dotevo

View this thread on: hive.blogpeakd.comecency.com
· @dotevo · (edited)
$0.82
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.

# Wstęp

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.

## TypeScript



![typescriptlogoB29A3F462Dseeklogo.com_.webp](https://files.peakd.com/file/peakd-hive/dotevo/nT1eZbel-typescript-logo-B29A3F462D-seeklogo.com_.webp)



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 `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.
Dodatkowo nawej najbardziej typowany język nie pozwala tak dobrze typować jak Typescript. Przykład:

```
type PowerStatus = 'on' | 'off';
const variable: PowerStatus = 'on';
const variable2: PowerStatus = 'string';   // Type '"string"' is not assignable to type 'PowerStatus'
```

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.


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.:
```
{
  propercja_1: true,
  propercja_tekstowa: string,
}
```
zostaje zamieniona na:
```
{
  propercja1: true,
  propercjaTekstowa: string,
}
```
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?

Możemy wtedy napisać typ, który podmieni nam `jakis_tekst` na `jakisTekst` w ten sposób:
```
type Rename<
  S extends string
> = S extends `${infer PRE}_${infer POST}`
  ? Rename<`${PRE}${Capitalize<POST>}`>
  : S;
```
A następnie użyć kolejnej nowej rzeczy w języku czyli mapowania kluczy (słowo kluczowe `as`):
```

type ReplaceProps<O extends object> = {
  [P in keyof O & string as Rename<P>]: O[P];
};
```

```
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'?
```

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 `{TYP}` na poziomie typów to prawdziwy As w rękawie.

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.
Podrzucę kilka rozwiązań:
- Sprawdzanie czy string na wejściu pasuje pod `{field} as {name}` 
https://www.typescriptlang.org/play?strictPropertyInitialization=false#code/C4TwDgpgBAogHgWzAFXNAvFA5MCBnYLKAH2wEMjSsAjLAbgCgHRIoBhACzIDsBzCADIBLXACcyAGwA8qVhDi5uAEzxQCooXwA0UABpR5ilWuAa+APiiZZ0UgAMAJAG8bAXyhlVz3a7uMGAMYSnqrwZEgSEDIGChDKquqavJZODFBQYACu1BJCAVBwIABeUvqGccaJFgAUAGZCkUoAXOxcfIIiEOLSyDq65gCUUKnprgxjgQD23AQZVlDcEADusHDhYJFS8Eg25tUDjGAAdIVF1VhkHqq6FAcMx6fnuLOeULxYdw-FT-jAl68fOhQAD0wKgAElgGoOJNMhIlFBamQGhAlPcTt8cL8rnhASCwZDobD4YjkY0GEA

- Wyciąganie modelu, w sposób zagnieżdżony
```
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);
```

[Pełny przykład](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)


Jest jeszcze wiele rzeczy, które próbowałem pisać. Ale zostawię sobie te rzeczy na później ;-)

Miłego programowania!
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
authordotevo
permlinkdotevo-programowanie-1-typescript
categorypolish
json_metadata{"app":"peakd/2020.11.4","format":"markdown","tags":["polish","typescript","dotevo-programowanie","gems"],"links":["https://www.typescriptlang.org/play?strictPropertyInitialization=false#code/C4TwDgpgBAogHgWzAFXNAvFA5MCBnYLKAH2wEMjSsAjLAbgCgHRIoBhACzIDsBzCADIBLXACcyAGwA8qVhDi5uAEzxQCooXwA0UABpR5ilWuAa+APiiZZ0UgAMAJAG8bAXyhlVz3a7uMGAMYSnqrwZEgSEDIGChDKquqavJZODFBQYACu1BJCAVBwIABeUvqGccaJFgAUAGZCkUoAXOxcfIIiEOLSyDq65gCUUKnprgxjgQD23AQZVlDcEADusHDhYJFS8Eg25tUDjGAAdIVF1VhkHqq6FAcMx6fnuLOeULxYdw-FT-jAl68fOhQAD0wKgAElgGoOJNMhIlFBamQGhAlPcTt8cL8rnhASCwZDobD4YjkY0GEA","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"],"image":[]}
created2020-12-07 08:15:51
last_update2020-12-07 08:35:33
depth0
children1
last_payout2020-12-14 08:15:51
cashout_time1969-12-31 23:59:59
total_payout_value0.414 HBD
curator_payout_value0.405 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length7,522
author_reputation7,534,182,686,491
root_title"Dotevo programowanie [#1] - TypeScript"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id100,848,044
net_rshares5,161,876,269,541
author_curate_reward""
vote details (34)
@hivebuzz ·
Congratulations @dotevo! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :

<table><tr><td><img src="https://images.hive.blog/60x70/http://hivebuzz.me/@dotevo/upvoted.png?202101042159"></td><td>You received more than 3750 upvotes. Your next target is to reach 4000 upvotes.</td></tr>
</table>

<sub>_You can view your badges on [your board](https://hivebuzz.me/@dotevo) and compare yourself to others in the [Ranking](https://hivebuzz.me/ranking)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



**Do not miss the last post from @hivebuzz:**
<table><tr><td><a href="/hivebuzz/@hivebuzz/pud-202101-feedback"><img src="https://images.hive.blog/64x128/https://i.imgur.com/xQGM37X.png"></a></td><td><a href="/hivebuzz/@hivebuzz/pud-202101-feedback">Feedback from the January 1st Hive Power Up Day</a></td></tr><tr><td><a href="/hivebuzz/@hivebuzz/update-202101"><img src="https://images.hive.blog/64x128/https://i.imgur.com/GZV4AF7.png"></a></td><td><a href="/hivebuzz/@hivebuzz/update-202101">Happy New Year - Project Activity Update</a></td></tr></table>
properties (22)
authorhivebuzz
permlinkhivebuzz-notify-dotevo-20210104t220644000z
categorypolish
json_metadata{"image":["http://hivebuzz.me/notify.t6.png"]}
created2021-01-04 22:06:42
last_update2021-01-04 22:06:42
depth1
children0
last_payout2021-01-11 22:06:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,178
author_reputation369,411,469,328,352
root_title"Dotevo programowanie [#1] - TypeScript"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id101,221,208
net_rshares0