TypeScript Tutorial #12 - Classes

Hey gang, in this TypeScript tutorial we'll take a look at how to create classes.

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

🐱‍💻 🐱‍💻 Course Files:

🐱‍💻 🐱‍💻 Other Related Free Courses:

🐱‍💻 🐱‍💻 TypeScript Docs:

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

[dawn_signal]

I think it's worth noting here:

In TypeScript, there is a concept called "structural typing" or "duck typing" where the type compatibility is based on the shape or structure of the objects rather than their explicit type declarations. This means that TypeScript is not strictly checking the type compatibility based on the declared type, but rather if the object has the required properties and methods.

So what this means is if you had another class (in this example AnotherInvoice )which had the same structure, properties, and method(s) as Invoice class, Typescript would not throw an error if you pushed an instance of it to the array invoices, even though the declared type of the invoices array is Invoice[]:

let anotherInv = new AnotherInvoice("name", "details", 42);
let invoices: Invoice[] = [];
invoices.push(anotherInv)

[nelsonjoppi]

the way you think the thing you're going to explain.. my god, you sir are a genius, really. thank you for this classes!

[HologramJay]

Dang, Luigi got done dirty. Had to dish out an extra fiddy.

[Shakeel]

I found no better tutorial in YouTube to learn TypeScript. Thanks The Net Ninja.

[HappyHorge]

As with OOP in languages such as Java, it's normal to use the toString() method if you want to output an object as a string. You can do it with the code below:
public toString(): string{
return `${this.client} owes €${this.amount} for ${this.details}`
}
I took the liberty of adding the "public" keyword before the function name, which means the method can be used anywhere. This is also by default.
And the : string keyword afterwards for the return type(which is enforces the TS type rules).

[monique]

If you got stuck finding the pound sign on your keyboard like I did, first ensure numlock is on then press alt+156. So hold down the alt key and press 156 using the numbers on the right of your keyboard. Or you can use alt+0163.

[samer]

You explain this so well! i was beating my head trying to understand this properly.. you make the syntax understandable!

[hosseinjavan]

zero dislikes! How amazing a teacher can be

[charlydt]

this is just perfection, thanks Shaun, I can't thank you enough

[StarBattle]

invoices = [invOne,  invTwo]; also works rather then using push()

[dirantechie]

Net Ninja you are the best thanks for a wonderful tutorial

[ahmaddawood]

Perfect Perfect !!

You are a real Savior

[earthtomemphis]

I would love to see a react typescript tutorial from

[shadowB]

You later increased Luigi's debt and totally left Mario off the hook XD

[gabrielmg]

In my country I always get a notification at 2:00 a.m. with your new videos 🤗 excelent content!!

[BhupenderSingh-tonk]

Hey Shaun, are you planning to upload react-native updated course in coming months

[dipanshusrivastava]

on doing console.log on invoices before changing its value and then after changing its value, console displays the changed values only both the times, even when I changed the value after displaying it once

[Nasir_Haidari]

You make the Dev. world better place !!! thx

[Slikon]

Comment this if you got stuck at the moment when Shaun said: "... and then I do a Pound sign ...". I was like 0_0 where is this sign on my keyboard :D
Amazing course, thanks!

[micheledellamea]

For me the dollar sign inside the strings doesn't work correctly (for example '${this.amount}')... should I install something to make it work?