TypeScript Tutorial #17 - Rendering an HTML Template

Hey gang, in this TypeScript tutorial we'll create a class to render new list item templates to the DOM, after a user submits the web form.

🐱‍👤🐱‍👤 JOIN THE GANG -
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Course Files:

🐱‍💻 🐱‍💻 Other Related Free Courses:

🐱‍💻 🐱‍💻 TypeScript Docs:

🐱‍💻 🐱‍💻 The Net Ninja Community Boards:

[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!

[xtraspicy]

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

[hank]

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

[Shakeel]

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

[thriftykapila]

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!

[renarsdilevka]

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.

[madd]

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

[MrKarthise]

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

[donmikele]

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.

[muhayminkhan]

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 =
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

[gururajmoger]

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

[komildeveloper]

You can learn a lot of information from your video lessons

[tomascarignano]

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.

[chromebookacer]

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

[genisz]

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.

[djpeka]

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.

[VinceAggrippino]

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

[yannsalmon]

I wondered, what's your color theme ?

[aneesasyed]

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