Type Assertions & Type Casting | Typescript Tutorial for Beginners
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Learn Type Assertions & Type Casting in this Typescript tutorial for beginners. Learn more about type assertions and type casting and complete a Typescript student challenge in detailed TS tutorial.
🚀 Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: https://bit.ly/WebDevMaster
- Master the Coding Interview: https://bit.ly/FAANGInterview
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ https://discord.gg/neKghyefqh
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
🔗 All Resources for this Typescript Course: https://github.com/gitdagray/typescript-course
🔗 Playlist for this Typescript Course: http://bit.ly/3GcNJ78
Type Assertions & Type Casting | Typescript Tutorial for Beginners
(00:00) Intro
(00:05) Welcome
(00:28) Type Assertions vs Type Casting
(01:18) What are Type Assertions?
(01:58) Starter Code
(03:44) Converting Types with Assertions
(04:53) Angle Bracket Syntax instead of "as"
(05:55) Narrowing Return Values with Assertions
(08:37) Caution: Assertions allow mistakes!
(10:07) Double Casting and the unknown type
(12:03) DOM Selection Types
(16:19) Non-Null Assertions
(17:43) Angle Brackets and the DOM
(18:14) Student Challenge
(21:27) Solution 1: Beginners
(24:13) Solution 2: Type Assertion
Corrections:
(13:50) Syntax error: document.getElementById('img') is what is needed if the element has an id set to "img". This does not change the concept I'm discussing. Just tired eyes and a syntax error.
📚 Suggested Pre-requisites for this Typescript course:
🔗JavaScript for Beginners full course: https://youtu.be/EfAl9bwzVZk
📚 Tutorial References:
🔗 Typescript Official Website: https://www.typescriptlang.org/
🔗 Anders Hejlsberg, Creator of Typescript and C# Interview: https://dev.to/destrodevshow/typescript-and-c-both-created-by-the-same-person-named-anders-hejlsberg-42g4
🔗 Stackoverflow Survey Results: https://survey.stackoverflow.co/2022/#technology-most-popular-technologies
🔗 MDN - Static Typing: https://developer.mozilla.org/en-US/docs/Glossary/Static_typing
🔗 MDN - Dynamic Typing: https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing
🔗 MDN - Type Coercion: https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion
🔗 TS Type Assertions: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions
⚙ Web Dev Tools:
🔗 Chrome Browser: https://www.google.com/chrome/
🔗 Visual Studio Code (VS Code): https://code.visualstudio.com/
🔗 Node.js & npm: https://nodejs.org/
🔗 Live Server VS Code Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Was this Typescript Assertions and Type Casting tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#typescript #assertions #casting
Видео Type Assertions & Type Casting | Typescript Tutorial for Beginners канала Dave Gray
Learn Type Assertions & Type Casting in this Typescript tutorial for beginners. Learn more about type assertions and type casting and complete a Typescript student challenge in detailed TS tutorial.
🚀 Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: https://bit.ly/WebDevMaster
- Master the Coding Interview: https://bit.ly/FAANGInterview
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ https://discord.gg/neKghyefqh
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
🔗 All Resources for this Typescript Course: https://github.com/gitdagray/typescript-course
🔗 Playlist for this Typescript Course: http://bit.ly/3GcNJ78
Type Assertions & Type Casting | Typescript Tutorial for Beginners
(00:00) Intro
(00:05) Welcome
(00:28) Type Assertions vs Type Casting
(01:18) What are Type Assertions?
(01:58) Starter Code
(03:44) Converting Types with Assertions
(04:53) Angle Bracket Syntax instead of "as"
(05:55) Narrowing Return Values with Assertions
(08:37) Caution: Assertions allow mistakes!
(10:07) Double Casting and the unknown type
(12:03) DOM Selection Types
(16:19) Non-Null Assertions
(17:43) Angle Brackets and the DOM
(18:14) Student Challenge
(21:27) Solution 1: Beginners
(24:13) Solution 2: Type Assertion
Corrections:
(13:50) Syntax error: document.getElementById('img') is what is needed if the element has an id set to "img". This does not change the concept I'm discussing. Just tired eyes and a syntax error.
📚 Suggested Pre-requisites for this Typescript course:
🔗JavaScript for Beginners full course: https://youtu.be/EfAl9bwzVZk
📚 Tutorial References:
🔗 Typescript Official Website: https://www.typescriptlang.org/
🔗 Anders Hejlsberg, Creator of Typescript and C# Interview: https://dev.to/destrodevshow/typescript-and-c-both-created-by-the-same-person-named-anders-hejlsberg-42g4
🔗 Stackoverflow Survey Results: https://survey.stackoverflow.co/2022/#technology-most-popular-technologies
🔗 MDN - Static Typing: https://developer.mozilla.org/en-US/docs/Glossary/Static_typing
🔗 MDN - Dynamic Typing: https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing
🔗 MDN - Type Coercion: https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion
🔗 TS Type Assertions: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions
⚙ Web Dev Tools:
🔗 Chrome Browser: https://www.google.com/chrome/
🔗 Visual Studio Code (VS Code): https://code.visualstudio.com/
🔗 Node.js & npm: https://nodejs.org/
🔗 Live Server VS Code Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Was this Typescript Assertions and Type Casting tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#typescript #assertions #casting
Видео Type Assertions & Type Casting | Typescript Tutorial for Beginners канала Dave Gray
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Toast Notification Patterns with Next.js Server Actions and next-safe-action](https://i.ytimg.com/vi/A_061Vqh6Bc/default.jpg)
![10 Javascript Functions Examples You Can Use to Save Time](https://i.ytimg.com/vi/LDgPTw6tePk/default.jpg)
![Typescript Utility Types | TS Beginners Tutorial](https://i.ytimg.com/vi/YN4RoihmVKM/default.jpg)
![Python Lists & Tuples for Beginners | Python tutorial](https://i.ytimg.com/vi/KWKWswDfAb0/default.jpg)
![How To Build A TinyPNG Clone with Javascript | Clone TinyJPG | Javascript Project](https://i.ytimg.com/vi/jEjo9UytpIc/default.jpg)
![Python File Handling for Beginners](https://i.ytimg.com/vi/BRrem1k3904/default.jpg)
![If Statements in Javascript | Tutorial for Beginners](https://i.ytimg.com/vi/9Ykz2_PhdfE/default.jpg)
![Python Django Images - How to Upload & Display Images](https://i.ytimg.com/vi/GNsuF4xB80E/default.jpg)
![Python Exception Handling Tutorial for Beginners](https://i.ytimg.com/vi/PHzm_Iox1mE/default.jpg)
![useLayoutEffect vs useEffect | React Hooks Tutorial](https://i.ytimg.com/vi/pHxQtHwcT-s/default.jpg)
![Reaction to the Comments on my Javascript Search App tutorial](https://i.ytimg.com/vi/pvAyeUWYmfY/default.jpg)
![How to Create a Simple Search Box with HTML and CSS | Responsive Search Bar Tutorial](https://i.ytimg.com/vi/cW_7LIbAB-U/default.jpg)
![useImperativeHandle Explained with an Example | React Hooks Tutorial](https://i.ytimg.com/vi/ZtcgPhWv1e8/default.jpg)
![Typescript Basic Types - Beginners Lesson](https://i.ytimg.com/vi/bDCPYSanB7A/default.jpg)
![Python User Input & Control Flow | Python tutorial](https://i.ytimg.com/vi/N94vSNBF-EI/default.jpg)
![Javascript Modules | Export Import Syntax for ES6 Modules](https://i.ytimg.com/vi/Q3SBogjUfMk/default.jpg)
![React Summit US - Don't Miss Out!](https://i.ytimg.com/vi/Lut9rs7gyKs/default.jpg)
![You Never Heard of This Form Element!? 😱](https://i.ytimg.com/vi/y6aufauPTUg/default.jpg)
![Skeleton Loading Components with Animation | React & CSS Examples](https://i.ytimg.com/vi/cNQTg920Nx0/default.jpg)
![MongoDB MERN Stack Tutorial | MERN Project Data](https://i.ytimg.com/vi/cUV3uYXEOxI/default.jpg)