TypeScript Tutorial #17 - Rendering an HTML Template

[@isurujn]

This series has been fantastic. Short and concise with no BS, straight to the point lessons. I did something additional. Instead of having the `position` parameter of the render() method as string, I created an enum called ListTemplatePosition with two options as Start and End. Just to enforce the options available.

[@vaneliot]

Hey Shaun! I came here for TypeScript syntax and I ended up brushing up on OOP concepts and how interfaces could work with rendering. I liked that you made a render() method and I love how all of these kinda look like React components. Thank you so much, Shaun!

[@3xtraspicy]

This lesson has been extremely enlightening! Thank you mr. Net Ninja for all the amazing courses you do!

[@hank91918]

very. very slick lessons! Love how you brought everything together nicely at the end! Thanks Shaun!

[@Shakeel714]

Very helpful video series to learn TypeScript!! I am so excited to finally be able to learn TypeScript thanks to this tutorial series!

[@thriftykapila8420]

You are the best, just a little request. The Net Ninja, I hope you see this comment. Like me many other people want a web series based on building couple of web apps using complete MERN stack, as you had already covered everything like these in separate playlists dedicated to each technology. Kindly make a series for complete MERN stack web app. Also please teach Role based access control. and dashboard building... Lots of love, big time fan... Alright then Gang!

[@madd5]

Thanks for these videos. It's really inspiring me to learn more.

[@renarsdilevka6573]

I would recommend though to separate the domain/model data and formatting functionality. So it could be DocumentInterface which includes all the functionality and structure, and if you need to format then the concrete class can implement DocumentInterface and that can implement deeper HasFormatter (Formattable) interface. So that would mean Payment, Invoice would be documents and you can pass around DocumentInterface instead but it will have possible different extra functionality from other interfaces within. The other variant would be to have a Formatter which implements FormatterInterface and which does the formatting job only. You could pass then just a DocumentInterface, you would separate concerns then for sure. This code also works, but it mixes two concerns in the code, the main model and extra functionality we can do with it.

[@MrKarthise]

Quality explanation. Worth the time. Thank You The Net Ninja :)

[@genxgamer777]

So far so good!

[@VS257]

This is pure OOP!!!

[@donmikele07]

Great teacher, great tutorial(S), and a huge community! God bless you! BTW: I was playing arround and instead of doc = new Payment.... and doc = new Invoice, I typed: ``` let doc: HasFormatter; let className: typeof Invoice | typeof Payment = type.value === 'invoice' ? Invoice : Payment; doc = new className(toFrom.value, details.value, amount.valueAsNumber); ``` Is that correct in the TS context or I should have wrote it in the other way? It works but I'm not sure if it is correct implementation.

[@chromebookacer7289]

Question: the format() method is called in HasFormatter but defined in Payments and render() is defined in ListTemplate, right?

I can try to explain. On the HasFormatter Interface, He defined to return type (as a string) for function. On the Payments Class, He created a useful method and return a string value, because of format type is a string. Also same is defined for ListTemplate. Maybe you can watch again Type videos 😊

[@francomacias8904]

The Net Ninja is awesome!!!

[@gururajmoger8649]

Thanks 😊.. pls explain about to create services with crud operation without using any dependency like jQuery.. fetch method.. axios..

[@VinceAggrippino]

The reason VSCode didn't put `.js` on the end of the module name is because it doesn't belong there.

[@muhayminkhan7063]

Hello everyone just a quick question. As a beginner I am following the same thing and it made successfully but I wanna store that data in local storage. so when I refresh the page the elements should remain their so I try to do this const ul = document.querySelector('ul')!; const itemStore = localStorage.setItem('element', ul.outerHTML); let List = new listElement(itemStore); But typescript is giving error on (ItemStore) ERROR: src/app.ts:17:28 - error TS2345: Argument of type 'void' is not assignable to parameter of type 'HTMLUListElement'. does anyone know how to solve this issue

[@tomascarignano5002]

Damnn I thought I would make tons of money by learning how to code, but now I see that doing some plumbing work I'll make about the same amount.

[@komil.sobitov]

You can learn a lot of information from your video lessons

[@ridl27]

xD

[@genisz2754]

Does anyone else has the following error in index.html? "Uncaught SyntaxError: Cannot use import statement outside a module (at app.js:1:1)" I searched in StackOvflow, and tried their solution, adding "type": "module", in package.json. But it doesn't solve the error.

[@djpe4ka]

Why we need interface HasFormatter? let doc: HasFormatter - it prevent's us from getting object properties, like doc.client. We know that we have those properties, but TS shows that "HasFormatter doesn't containt those properties". It is confusing and i think that in real projects we mostly want to get access to properties of object that we create. Another issue: if i write "let doc: Invoice|Payment", and "class Invoice implements HasFormatter" i actually can console.log(doc.client) and it works. Why? If our class implements HasFormatter, which, as we know, doesn't have any properties, only .format I will be glad if someone explain this to me.

[@yannsalmon4074]

I wondered, what's your color theme ?

[@NetNinja]

Hey its Monokai++

[@ridl27]

ty.

[@aneesasyed4906]

Someone, please suggest to me the Best Latest Angular tutorials as The net Ninja aren't uploading. Similar to the teaching methodology like him.

[@fredteixeira3604]

basic that's how React might work under the hood.

[@danielwood2432]

Great tutorial for Typescript, but not very SOLID.

[@Elduque40]

Polymorphism is that you?

[@fayking]

thank you