(<< Back <<) Useful TS 3rd party library (<< Back <<)
Maximilian Schwarzmüller Typescript Lecture notes.
install @types/xxx --save-dev, Lodash, Validators, using class-transformer and import 'reflect-metadata', declare external variables from Html level (setting)
![](/TsLecture/MaxTs324_1.png)
![](/TsLecture/MaxTs481_1.png)
1 - Module Introduction.mp4 2 - Using JavaScript ( ) Libraries with TypeScript.mp4 3 - Using declare as a Last Resort.mp4 4 - No Types Needed class-transformer.mp4 5 - TypeScript-embracing class-validator.mp4 6 - Wrap Up.mp4
Various useful JS library embrace helpful functional, for example Lodash contains a lot of functions to working with Array, Number, Object, String, Math, Date, Collection and so on.
![](/TsLecture/MaxTs325_1.png)
![](/TsLecture/MaxTs326_1.png)
![](/TsLecture/MaxTs338_1.png)
![](/TsLecture/MaxTs339_1.png)
![](/TsLecture/MaxTs340_1.png)
![](/TsLecture/MaxTs341_1.png)
![](/TsLecture/MaxTs342_1.png)
![](/TsLecture/MaxTs343_1.png)
![](/TsLecture/MaxTs344_1.png)
![](/TsLecture/MaxTs345_1.png)
![](/TsLecture/MaxTs327_1.png)
![](/TsLecture/MaxTs328_1.png)
![](/TsLecture/MaxTs329_1.png)
![](/TsLecture/MaxTs330_1.png)
![](/TsLecture/MaxTs331_1.png)
![](/TsLecture/MaxTs332_1.png)
Even if we block TS errors function will not working on runtime
![](/TsLecture/MaxTs334_1.png)
![](/TsLecture/MaxTs335_1.png)
![](/TsLecture/MaxTs336_1.png)
![](/TsLecture/MaxTs337_1.png)
We need install @types/xxxx --save-dev (locally)
![](/TsLecture/MaxTs346_1.png)
![](/TsLecture/MaxTs347_1.png)
![](/TsLecture/MaxTs348_1.png)
![](/TsLecture/MaxTs349_1.png)
![](/TsLecture/MaxTs350_1.png)
![](/TsLecture/MaxTs351_1.png)
![](/TsLecture/MaxTs352_1.png)
Most JS library has @types
![](/TsLecture/MaxTs353_1.png)
But TS don't see global variables defined on Html level
![](/TsLecture/MaxTs354_1.png)
![](/TsLecture/MaxTs355_1.png)
This is trick what allow to use external variable, need to use DECLARE statement and this way allow access to various setting on Html level
![](/TsLecture/MaxTs356_1.png)
![](/TsLecture/MaxTs357_1.png)
![](/TsLecture/MaxTs358_1.png)
![](/TsLecture/MaxTs359_1.png)
Some library has no need types, for example class-transformer
![](/TsLecture/MaxTs360_1.png)
This is class
![](/TsLecture/MaxTs361_1.png)
![](/TsLecture/MaxTs362_1.png)
![](/TsLecture/MaxTs363_1.png)
![](/TsLecture/MaxTs364_1.png)
This is array of Anonymous class
![](/TsLecture/MaxTs365_1.png)
To create array of class we nee to use MAP, this is traditional JS way
![](/TsLecture/MaxTs366_1.png)
![](/TsLecture/MaxTs367_1.png)
![](/TsLecture/MaxTs368_1.png)
![](/TsLecture/MaxTs369_1.png)
But we need to use class-transformer
![](/TsLecture/MaxTs370_1.png)
![](/TsLecture/MaxTs371_1.png)
![](/TsLecture/MaxTs372_1.png)
![](/TsLecture/MaxTs373_1.png)
![](/TsLecture/MaxTs374_1.png)
![](/TsLecture/MaxTs375_1.png)
This is generic function what can automatically convert object to TS class
![](/TsLecture/MaxTs376_1.png)
![](/TsLecture/MaxTs377_1.png)
![](/TsLecture/MaxTs378_1.png)
After transformation used, all working fine without installation @types, we need just Import 'reflect-metadata' - dynamic definition of new class
![](/TsLecture/MaxTs379_1.png)
![](/TsLecture/MaxTs380_1.png)
Other similar class - https://github.com/orgs/typestack/repositories
![](/TsLecture/MaxTs381_1.png)
![](/TsLecture/MaxTs382_1.png)
![](/TsLecture/MaxTs383_1.png)
![](/TsLecture/MaxTs384_1.png)
![](/TsLecture/MaxTs385_1.png)
![](/TsLecture/MaxTs386_1.png)
![](/TsLecture/MaxTs387_1.png)
We need install class-validator and allow to use decorator on TS confog
![](/TsLecture/MaxTs388_1.png)
![](/TsLecture/MaxTs389_1.png)
![](/TsLecture/MaxTs390_1.png)
Setup restriction from Validator
![](/TsLecture/MaxTs391_1.png)
![](/TsLecture/MaxTs392_1.png)
![](/TsLecture/MaxTs393_1.png)
We want to prevent empty titile
![](/TsLecture/MaxTs394_1.png)
![](/TsLecture/MaxTs395_1.png)
![](/TsLecture/MaxTs396_1.png)
For using class-validator we need to finally validate all restrinction
![](/TsLecture/MaxTs397_1.png)
Validate is asynchronous, return Promise, we need to use Then
![](/TsLecture/MaxTs398_1.png)
![](/TsLecture/MaxTs399_1.png)
And check how validator works
![](/TsLecture/MaxTs400_1.png)
![](/TsLecture/MaxTs401_1.png)
![](/TsLecture/MaxTs402_1.png)
Related pages
- Angular documentation
- Typescript documentation
- Javascript documentation
- ECMAScript ES6 vs Typescript
- React vs Angular
- (2024) Google Cloud and Cloudflare
- (2023) CloudflareWorker and Supabase
- (2022) JS, Css
- (2022) Typescript, Webpack
- (2022) Angular, RxJs, Firebase, MongoDb
- (2022) Node, NestJs, Electron, Pwa, Telegram
- (2022) React, Redux, GraphQL, NextJs
- (2022) Angular/Typescript, JS books
![](http://forum.vb-net.com/GetTopicCount.png?id=52475b70-2796-4553-a442-ba3a4d12f057)
<SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |