vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(overload): add challenge 15

Browse Source
This commit is contained in:
thomas
2023-01-20 11:11:35 +01:00
parent b4b0203ce2
commit fc74e43ddb
2 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@@ -2,7 +2,7 @@
<img src='./logo/angular-challenge.png' height="150px"/>
</p>
<p align='center'>Collection of Angular challenges</p>
<p align='center' style='font-weight:bold'>Collection of Angular challenges</p>
<br>
@@ -34,6 +34,11 @@ This goal of this project is to help you get better at Angular and NgRx by resol
<a href="./apps/scroll-cd/README.md"><img src="https://img.shields.io/badge/12-change detection -- scroll-orange" alt="change detection with scroll event"/></a>
<a href="./apps/styling/README.md"><img src="https://img.shields.io/badge/13-styling-orange" alt="styling"/></a>
</br>
<img src="https://img.shields.io/badge/Typescript--gray?logo=typescript" alt="Typescript"/>
<a href="./apps/overload/README.md"><img src="https://img.shields.io/badge/15-overload function-orange" alt="Overload function"/></a>
</br>
<img src="https://img.shields.io/badge/RxJs--gray?logo=rxjs" alt="RxJs"/>
@@ -56,7 +61,7 @@ This goal of this project is to help you get better at Angular and NgRx by resol
<table>
<tbody>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://medium.com/@thomas.laforge"><img src="https://avatars.githubusercontent.com/u/30832608?s…00&u=6f0ad9676792f29fd7fe6e113df06213d384a813&v=4" width="100px;" alt="Thomas Laforge"/><br /><sub><b>Thomas Laforge</b></sub></a><br />13 🧩</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://medium.com/@thomas.laforge"><img src="https://avatars.githubusercontent.com/u/30832608?s…00&u=6f0ad9676792f29fd7fe6e113df06213d384a813&v=4" width="100px;" alt="Thomas Laforge"/><br /><sub><b>Thomas Laforge</b></sub></a><br />15 🧩</a></td>
</tr>
</tbody>
</table>

11
apps/overload/README.md
View File

@@ -4,16 +4,17 @@
### Information
Angular is using Typescript and mastering Typescript can help you avoid runtime errors at compile time. In this challenge, we have a function to create a vehicle.
But each vehicle type needs different type of property. Right now we are throwing an error at runtime which is less than ideal since we can catch this error at compile time.
Angular uses TypeScript, and mastering TypeScript can help you avoid runtime errors by catching them at compile time.
One easy way would be to create a function per vehicle type but for this challenge I want to use the same fonction and depending on the type passed as first parameter , Typescript should autocomplete for you.
To archieve this, we will use function overload.
In this challenge, we have a function to create a vehicle. However, each vehicle type requires different mandatory properties.
Currently, we are getting an error at runtime if one property is missing and we don't get the return Type, which is not ideal.
One solution would be to create a separate function for each vehicle type, but for this challenge, I want to use the same function and have TypeScript automatically complete the properties depending on the type passed as the first parameter.
To achieve this, we will use overload functions.
### Statement
- Use function overload
- Delete all `throw new Error`
### Submitting your work