Learn TypeScript - Full Tutorial
Вставка
- Опубліковано 5 сер 2024
- Learn how to program with TypeScript in this full course for beginners. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript provides better error checking than JavaScript. This is because TypeScript uses a static type system, which means that the type of a variable is checked before the code is executed.
💻 GitHub Repo: github.com/hiteshchoudhary/ty...
✏️ Hitesh Choudhary created this course. Check out his channel: / hiteshchoudharydotcom
⭐️ Contents ⭐️
⌨️ (0:00:00) Why to learn TypeScript
⌨️ (0:07:08) TypeScript is not what you think
⌨️ (0:15:25) How to install TypeScript
⌨️ (0:27:33) Your first intro to TypeScript docs
⌨️ (0:39:21) Number, boolean, and type inference
⌨️ (0:39:21) Number, boolean, and type inference
⌨️ (0:46:52) Don't use ANY
⌨️ (0:51:30) Do you really know functions
⌨️ (1:02:55) A better way to write function
⌨️ (1:15:38) Bad behavior of objects
⌨️ (1:25:14) Type Aliases
⌨️ (1:32:28) READONLY and optional
⌨️ (1:42:13) Array
⌨️ (1:50:03) Union Types in TS
⌨️ (2:04:46) Tuples
⌨️ (2:14:33) Enums
⌨️ (2:24:03) interface
⌨️ (2:33:52) Interface vs Type
⌨️ (2:39:08) How to setup Typescript for real projects
⌨️ (2:53:44) Classes
⌨️ (3:02:06) Private Public
⌨️ (3:08:12) Getters and Setters
⌨️ (3:15:25) Protected
⌨️ (3:19:34) Why Interface is important
⌨️ (3:26:05) Abstract class
⌨️ (3:35:36) Generics
⌨️ (3:47:58) Generics in Array and Arrow functions
⌨️ (3:56:07) Generic Classes
⌨️ (4:07:16) Type Narrowing
⌨️ (4:17:04) The in operator narrowing
⌨️ (4:22:17) Instanceof and Type Predicates
⌨️ (4:31:35) Discriminated Union and Exhaustiveness Checking with never
⌨️ (4:42:54) TypeScript End
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
Thanks for sharing the video. Feel free to ask any doubt here, I will try to answer them. Also, I am on my way to contribute more videos to #freecodecamp
Stay tuned
❤️
Keep publishing such amazing content❤️
#women_life_freedom
#برای
❤️thnx Hitesh
Sab
After this course I learned that 70% of viewers are not subscribers and we shall hit the subscribe button. Thank you Hitesh
What about Typescript? Didn't you learn that? 😅
@@manan09ful no 😀
Hahaha. So true. I’m gonna go subscribe now. Like 20 times.
😂😂😂 Exactly, too.much self advertising
This is amazing typescript series I love it❤❤
Yes! We can push elements to read-only properties having type array; because arrays are not explicitly represented, but only by their memory address. So, technically we are not changing the memory address of array by pushing elements inside it, and READONLY still validates upon the address of the array.
What an amazing teacher, honestly. So eloquent and to the point.
The flow of the tutorial was really great. Each topic is discussed very appropriately. And the approach to make the people read documentation is splendid and seen for the first time any instructor emphasizing upon it.
Looking forward to a similar comprehensive course on Next.js and prerequisite for it from the same instructor if possible.
Thank you @Hitesh for creating a very easy-to-understand course. This is the 1st time I have seen approx 5 hours video tutorial and have not skipped a single part. This was on my todo watchlist for a very long time.
Enums stands for Enumerations. Enums are a new data type supported in TypeScript. It is used to define the set of named constants, i.e., a collection of related values. TypeScript supports both numeric and string-based enums
To my experience, Enums are the perfect balance between having to create an entire class for passing some data in a readable manner, and passing raw data (like numbers) to represent a certain meaning which you have in mind, which makes the code less readable and maintainable
That being said, I am a C# developer and just starting out with typescript, but i assume the benefits apply here as well
🎯 Key Takeaways for quick navigation:
00:00 📖 Introduction to the TypeScript Tutorial Series
01:21 🧐 Understanding TypeScript's Place in the Ecosystem
02:17 🚀 Diving Deep into TypeScript Characteristics
03:37 💡 The Importance of TypeSafety in TypeScript
04:59 🔍 TypeScript and TypeSafety
06:46 🎢 Beginning the TypeScript Journey
07:42 🛠️ Understanding TypeScript's Core Functionality
09:30 🖥️ TypeScript's Role in Development
10:52 🔄 Conversion of TypeScript to JavaScript
11:50 🧰 TypeScript as a Development Tool
15:23 📘 The Importance of Hands-On Learning
16:23 🖥️ Installing TypeScript System-Wide
17:45 🔧 TypeScript Installation Steps
20:57 🚀 Running TypeScript with TSC Command
21:55 🎯 Setting Up the Development Environment
22:18 ✍️ Basic TypeScript Syntax
24:11 🔧 Compiling TypeScript to JavaScript
26:03 ⚙️ TypeScript Configuration & Playground
27:19 🎓 Emphasis on Documentation & Learning Pace
28:42 📊 Understanding TypeScript Types
29:58 🚫 The Use of "any" in TypeScript
31:25 📚 TypeScript Documentation Exploration
32:19 🤝 TypeScript's Role in Collaboration
34:04 💡 TypeScript Syntax Basics
35:55 🔧 TSC Compilation and Handling Errors
36:52 🚫 Ensuring Data Type Consistency with TypeScript
37:41 🧐 Importance of Reading Documentation
38:34 🖊️ Writing and Understanding TypeScript Code
40:26 💡 Dive into Number Data Type in TypeScript
43:16 🛑 Avoiding Over-Annotation in TypeScript
44:11 🧠 TypeScript's Type Inference Mechanism
46:03 📖 TypeScript Syntax and Best Practices
46:56 ⚠️ Misuse of the "any" Keyword in TypeScript
48:21 📚 Official TypeScript Documentation on "any"
50:35 🚫 Avoiding "any" for Robust TypeScript Coding
51:30 🧐 Proper Use of Functions in TypeScript
52:26 📝 Basics of Function Creation and Error Handling
54:41 🚫 Avoiding Inaccurate Type Annotations
56:29 🔄 Converting Data Types within Functions
57:25 ✍️ User Signup Function Demonstration
57:51 🚦 Sign-Up Function Parameters and Types
59:44 🖊️ Login Function and Default Parameters
01:02:05 🔍 Ensuring Accurate Return Values
01:03:25 🌐 TypeScript Philosophy and Application
01:04:49 🛠️ Annotating Return Types in Functions
01:06:33 🔁 Understanding Multiple Return Types
01:07:58 🔄 Looping through Arrays with Map
01:11:10 📚 Redirecting to Documentation for Advanced Functions
01:12:06 ⚠️ Specifying Return Types: Void and Never
01:15:37 🧩 Odd Behaviors in TypeScript
01:16:34 📜 Objects in TypeScript
01:19:10 🛠️ Function Definitions & Object Exports
01:20:59 🔄 Functions Returning Objects
01:22:52 🤔 Odd Behaviors & Object Handling
01:25:11 📜 Type Aliases Introduction
01:26:36 👥 Using Type Aliases for User Data
01:28:49 📖 Documentation & Practical Usage
01:32:21 🔍 Quirky Behaviors & Specific Keywords
01:34:33 🚫 `read only` and Optional Properties in TypeScript
01:39:08 🔄 Combining Multiple Types
01:42:18 📋 Understanding Arrays in TypeScript
01:42:46 🌐 Defining Arrays in TypeScript
01:48:48 📖 TypeScript Array Documentation Review
01:50:12 🤝 Introduction to Union Types
01:50:38 🎤 Importance of Contextual Understanding
01:51:06 🤹♂️ Introduction to Union Types in TypeScript
01:53:24 🎥 Subscriber Engagement and Advanced Union Usage
01:58:56 🔍 Union Narrowing & Type Checking
02:00:44 📊 Union Types in Arrays and Classic Mistakes
02:04:46 🧩 Introduction to Tuples
02:07:03 📜 Restricting Array Order with Tuples
02:10:17 💡 Practical Implementation and Caution
02:14:20 🚩 Introduction to Enums
02:14:49 🎯 Enums: Definition and Basics
02:17:11 ⚙️ Implementing Enums in TypeScript
02:20:15 🔄 Enum Value Interpretation
02:22:24 🔄 Use of `const` with Enums
02:23:44 👤 Introduction to Interfaces
02:28:16 📜 Methods in Interfaces
02:30:09 🔖 Defining Methods in Interfaces
02:33:17 🖥️ Understanding the Role of Interfaces
02:34:14 🚀 Extending Interfaces & Inheritance
02:37:51 📚 Distinction between Type and Interface
02:39:16 🛠️ TypeScript in Production
02:41:08 🚀 Setting Up TypeScript for Projects
02:45:40 ⚙️ TypeScript Compilation Configuration
02:47:54 🌐 Using Live Server for TypeScript Projects
02:52:02 🎨 Styling and Further TypeScript Discussion
02:53:51 🌌 Introduction to Advanced TypeScript Use
02:54:45 🎓 Creating Classes in TypeScript
02:57:26 🔒 Using TypeScript for Data Safety
03:00:46 🛡️ Read-only Properties in TypeScript Classes
03:02:12 📌 Advanced TypeScript Concepts
03:03:08 🔐 Modifiers in TypeScript
03:07:40 🚀 Getters and Setters in TypeScript
03:09:58 📝 Setters in TypeScript
03:13:40 🚫 Private Methods in TypeScript
03:15:28 🔒 Access Modifiers and Inheritance in TypeScript
03:17:46 🖼️ Additional Class Properties in TypeScript
03:19:52 📐 Interfaces in TypeScript Explained
03:23:57 📹 Extending Interfaces for Additional Features
03:26:06 📜 Introduction to Abstract Classes in TypeScript
03:29:15 🖥️ Practical Implementation of Abstract Classes
03:33:18 🚀 Advanced Features of Abstract Classes
03:34:15 🔄 Abstract Classes Recap and Method Overwriting
03:35:41 🔗 Introduction to Generics in TypeScript
03:38:23 📖 Generics in Practical Coding and Documentation
03:42:21 🛠️ Differentiating Generics from Any in TypeScript
03:45:33 🍾 Creating and Implementing Custom Generics
03:47:48 📘 Diving Deeper into Generics and Arrow Functions
03:50:09 🔍 Basics of Defining Generics in TypeScript
03:52:47 🔄 Arrow Functions and Generics in TypeScript
03:55:29 📘 Distinguishing Generics Syntax in Codebases
03:56:20 🏛️ Deep Dive into Generics and its Constraints
03:57:49 📜 Using `extends` Keyword in TypeScript
04:01:28 📁 Database Interface and Generic Constraints
04:02:45 🎓 Selling Courses and Quizzes: Class Types in Generics
04:05:51 🛍️ Generic Class for Handling Products
04:07:12 📘 Business Case Logic vs Traditional Problems/Solutions
04:09:32 🚧 Cautionary Tales in TypeScript
04:14:26 📚 Understanding Type Guards
04:17:09 🔍 Advanced Type Narrowing Techniques
04:22:16 📉 More on Type Narrowing
04:22:45 🎯 Narrowing TypeScript Types
04:25:27 🐟 Using Type Predicates in TypeScript
04:29:33 🔄 Type Coercion and Identification
04:30:56 📄 Documentation-Based Learning
04:31:50 ⚙️ Tight Narrowing - Final Steps
04:37:10 🔄 Never Type & Exhaustive Checks
04:39:39 📚 Advanced TypeScript Concepts
04:42:55 🏁 Concluding the TypeScript Series
Made with HARPA AI
respect for creating this. respect++ for mentioning the AI you used
Hitesh Choudhary is one of my favorite teachers who makes complex topics into simple. Great to see Hitesh here 😃
Finally i found you 😂😂 you are so famous Yarr 😂😂
@@aarooral7997 how 🤔
@@Viralvlogvideos i know you from fsjs bro
@@aarooral7997 What's fsjs?
One of the best comprehensive tutorials I have watched in UA-cam!
Thank you so much Hitesh! Amazing tutorial, to the point, as it should be! 👏👏
Hey, thank you for the course, but I think you might be wrong at 1:18:30
You create a function "createUser", that takes in object with "name" and "isPaid" properties.
But instead of giving them a type, you destructuring the object
and reassigning "name" to "string" and "isPaid" to "boolean",
But object itself still has "any" type!
function createUser({ name: string, isPaid: boolean }) {}
Same as:
function createUser({ name: string, isPaid: boolean }: any) {}
Almost same as:
function createUser({ name, isPaid }) { ---> type is still "any"
const string = name
const boolean = isPaid
}
I think you wanted to to something like this instead:
function createUser({ name, isPaid }: { name: string, isPaid: boolean }) {}
Or this:
type User = { name: string, isPaid: boolean }
function createUser({ name, isPaid }: User) {}
Y'all can try to code this in typescript playground, if you don't believe me
www.typescriptlang.org/play
Info about Destructuring assignment (from MDN):
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
I hope it will help someone to feel less confused in this tough topic
Huh glad you took the time to write this comment clarifying that, I was replicating what he did in Typescript playground and it was erroring, I then I asked ChatGPT what was wrong with the function and the response was basically changing the structure of the function to how you have done it in your comment. Thanks for doing that good man!
thank you for your explaination
I spent half hour on this before I started wondering if someone highlighted this in the comments. Thanks man, great explanation
❤
thanks for exaplanation but what's the difference?
I can still do this
function createUser2({ name, isPaid }: { name: string; isPaid: boolean }) {}
let sampleData ={ name: "John", isPaid: true , age: 25}
createUser2(sampleData)
I was having difficulty grasping the basics from other sites. I am glad to have stumbled upon this. Super progressive explanations
I've been thinking about learning it since many weeks and you guys released it at the right time 😍
Just finished the tutorial. Hitesh is a wonderful teacher. I enjoyed from start to finish. I would definitely recommend this tutorial to anyone looking to not only understand Typescript, but also how to read and understand documentations.
Po 😊😊😅😊
Damn. Back in the days when I was learning coding I learned alot of Hitesh. Thank you very much for the helpful content. Time to learn TypeScript from this chad again. ✨
nostalgia hits
I was wanting to start learning typescript. Randomly I started today anyway and from google then freecode got over there and started with the course. 1/3rd is done. Great until now and will resume. I noticed that this was uploaded just a day ago so I believe my luck wanted me to wait so that I can learn from you. Thanks
This was an amazing tutorial - really enjoyed it from start to finish. Thanks Hitesh!
You are an awesome teacher Hitesh Choudhary . Clear communication , well explained. first time looking at your learning series. very well explained on basics concepts . looking forward to learn from your tutorials.
i have completed this series today within 4-5 days and gained lot of knowledge required to get start with typescript thanks hitesh sir for the helpful knowledge it was a great run
just finished. good course. he's a great teacher. now im gonna go do a bigger tutorial that uses this stuff.
Really good tutorial. Very precise and educational.
I wasn't even intending to learn this, but i was literally sucked into it! Good flow!
one of the best instructor out there, props to hitesh sir, his js series was exceptionally good
I learned JS as my first language and C# as my 2nd. TS is basically a combination of the two, and in a good way. Great series and you're an awesome teacher Hitesh!
u are ryt bro
What is Ienumerator equivalent in typescript.. I used it alot in my unity games
I mean, yeah, writing "Hello, World!" is pretty much the same
Lol,I think you don't know C#,otherwise you wouldn't say that
He is a great teacher indeed
one of the most amazing tutorials about TS, Thank you Hitesh.
I'm glad to say I finally finished this course. Thanks Hitesh :)
Great Typescript series, easily learnt a lot from this tutorial. Thank you Hitesh Choudhary
Finally completed the tutorial. Thanks for the informative and awesome content.
And the legend is here guys 🙌.
He's one of the best teachers on the internet 🔥. You're going to love this tutorial
Hitesh is real gem. The quality of content is real gold.
Just finished this series. You're a great teacher @hitesh and I'm already your happy subscriber :) Thank you for making this.
great video as always.
the 'in' operator is kind of tricky, I first thought it's equivalent to `hasownproperty` but it turns out that it's not making sure that the property does exist in the actual object and not some inherited prototype.
unfortunately they do not mention that in the manual.
I love the content and the delivery process. Made it really simple to understand Typescript.
This is the best video for who are searching to learn Typescript. Hitesh is great teacher.
Please feature more courses of hitesh sir on this channel ... World needs him
Completed the entire video and I am very thankful to the instructor for covering the topics with good instructions and examples. Loved it and can't wait to implement typescript on some projects, Cheers 🥂👩💻
This is an amazing tutorial. If you are a beginner then you can undoubtedly go for this tutoroial.
I recently finished a Typescript course and wanted to thank the instructor for such an informative and helpful tutorial. As a beginner, I was able to easily follow along and understand the concepts thanks to the clear explanations and examples provided. I feel much more confident in my ability to use Typescript in my projects now. Thank you for your hard work and for sharing your knowledge with others!
were you able to get some jobe or internship after this?
Did you learn JavaScript first?
@@nitilpoddar to be honest i haven't applied for any typsecript related job but this video helped m in my current company as our projects are shifting to adonis framework which uses typescript
@@unuefeejovwoke6609 yes
@@haseebsheikh6101 so can't I learn without knowing much on JavaScript? I'm a python developer and wanna learn typescript
Your method of teaching is good. Handling and clearing small small concept also. Thank you
Finally such a detailed video on Typescript.
Great Couse!. Much needed one for me in my current new project.
Hitesh is one of my favourite instructors on the internet, it's a great feeling to see him on this channel
Really glad to see Hitesh here
Finished the course finally.
It was a great course
Really cool
wow.. never thought this would happen but you guys did it... thanks alot... Indeed Hitesh is a great tutor.
Completed the series. Now, ready to use Typescript. Thank you Hitesh bhaiya
I was actually looking for a typescript tutorial since 2 days. Started many but then saw your post on Linkedin.
I hope it will be a good one. Starting now
Just in time with this, thank you very much. We liked it. 🎅
Beautifully explained, Hitesh, thank you so much. As a beginner I find so useful to be able to learn not only theory but also how it actually works in practice and most common mistakes we can make. This was amazing! 👏👏👏👏👏
Your way of teaching sounds tutorial hell safety !
thanks for sharing this great video.
Completed!! Thanks Hitesh :)
1:36:38 yes, we could manipulate with it (do .push() or change the value of certain elements) but we cannot replace that array with another array.
does "const" have to do with that?
@@rnsanyo I am not sure about the background logic (how TS works behind the curtain) but "readonly property" behaves exactly like a "const" does.
In JS, the array type (object type) is the reference type. This means that the variable store the reference (address) of the array or object instead of its value. So when you manipulate an array or object, the variable doesn't change because it always equals the address of the array in memory. Const and "readonly property" only ensure that variables do not change
I think you were going to destroy world
There's no doubt this is the best one . Love from Bangladesh boss
The best tutorial on the subject of typescript! Thank you for the hard work
Damn we were not ready for this collab !!
Really Proud to have you sir on a Freecodecamp video ♥️♥️🤩👌🏼
Thanks for this series, you're an excellent teacher
man, i used to hate ts until i found this lesson. Super helpful!
Good tutorial with best quality of song. Congratulations and thank you !
One of the best instructor 💯🚀
Was literally waiting for this one
Thank you so much. This was an amazing course, very useful!!
Best typescript tutorial with well details explanation.
Thanks
Very nice tutorial. Amazing and simple explanation. Thanks for sharing your knowledge.
Thank you so much hitesh sir for the best tutorial of typescript.👏🙌
This tutorial was amazing!!. The approach to each topic and the core concepts were very useful, thank you, Hitesh.
Awesome to see Hitesh sir.
Thank you. I completed this series.. got a lot of knowledge
hiyteshy chowdary , ok 😆 , This is what i needed 😊😊
I learned typescript using these series. Thanks very much sir Hitesh
Thanks for this video. It is the most complex free typescript tutorial in the internet.
Chai aur Code ❤ . Exceptional mentor 🙌
When it comes to high quality tutorials, Hitesh is always on top in my list 🔥😎🙌
This is a good lesson. It demystifies the difference between typescript and JavaScript. I am much more confident to learn other web technology after watching this wonderful video.
I used types script in ionic 3 in 2019 without knowing A-Z depth of type script. It's very beautiful ..
Thank you very much for this tutorial with quick and easy type explanations, now many things are much clearer to me
Perfect tutorial. Thank you so much for such a lovely video.
Insturctions are very clear and to the point. Thank you!
you are a good human as well thanks for your efforts
Thank you for sharing the video. This is good introductions for start learning Typescript. I'll try this knowledge on my job.
Thanks for making this high quality content!
Thank you so much Mr Hitesh, I love this Tutorial & learned a lot. Wish you luck boss
Legend is there With amazing content .... His art of teaching is just out of the world ...Thank you freedcodecamp
Fantastic tutorial. Thank you Hitesh.
bro please bring more indian teachers, they are so clear and accurate
are u tryna be funny?
@@wovasteengova nah they really are the best once you get used to the accent
True!
you are a genius brother, keep up it. And create videos for us.
I finished the whole thing x2 and x1.5 omg
Amazing course. I learned Typescript from him.
The is hands down one of the best tutorials ever made
just finished , It was awesome. Thank u sir.
Tuples work fine when you set their types as string and number. However, if you try to push a Boolean value into the first index, TypeScript does not allow it. but If you keep the value at the zero index as a string, it is possible to push a number into the tuple.
just what i needed, exactly today!
Hitesh Sir on freeCodeCamp rocking 😍😍🔥🔥🔥🔥
Such a nice tutorial!
Thank you Hitesh Sir 🙇🏻♂️
Thanks! Hitesh Sir!
For making such a nice tutorial.
very pleased for the free content, i'm gonna eat this in a row
Amazing, best learning stuff from hitesh. Thankyou.
Thank You Hitesh. This is an excellent tutorial.
finally from staring to ending very nice @hitesh thank you so much