chore: update roadmap content json (#6972)

Co-authored-by: kamranahmedse <kamranahmedse@users.noreply.github.com>
pull/6980/head
github-actions[bot] 3 months ago committed by GitHub
parent 3accbf503b
commit 8c104aed7f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 30
      public/roadmap-content/angular.json
  2. 38
      public/roadmap-content/backend.json
  3. 10
      public/roadmap-content/cyber-security.json
  4. 4
      public/roadmap-content/data-analyst.json
  5. 195
      public/roadmap-content/frontend.json
  6. 51
      public/roadmap-content/full-stack.json
  7. 19
      public/roadmap-content/react.json
  8. 860
      public/roadmap-content/sql.json
  9. 77
      public/roadmap-content/typescript.json

@ -247,8 +247,34 @@
}, },
"19c7D-fWIJ3vYFT6h8ZfN": { "19c7D-fWIJ3vYFT6h8ZfN": {
"title": "Communication", "title": "Communication",
"description": "", "description": "Angular components can communicate with each other using `@Input()` and `@Output()` decorators. These decorators facilitate data exchange between parent and child components.\n\n* **@Input()**: This decorator allows a parent component to pass data to a child component, enabling the child to receive and use the data.\n* **@Output()**: This decorator allows a child component to emit events to a parent component, enabling the parent to respond to changes or actions within the child component.\n\nAdditionally, **model inputs** are a special type of input that enable two-way data binding. This means that changes in the child component can be propagated back to the parent component, ensuring synchronization between the two. Model inputs automatically create a corresponding output, typically named by appending “Change” to the input’s name, to facilitate this two-way communication.\n\nTo facilitate communication between unrelated components, it’s most effective to trigger events using `EventEmitter` and have the components listen for these events. This approach ensures a decoupled and flexible architecture, allowing components to interact seamlessly without direct dependencies.\n\nVisit the following resources to learn more:",
"links": [] "links": [
{
"title": "Angular Official Website - Inputs",
"url": "https://angular.dev/guide/components/inputs",
"type": "article"
},
{
"title": "Angular Official Website - Outputs",
"url": "https://angular.dev/guide/components/outputs",
"type": "article"
},
{
"title": "Angular Official Docs - Model Inputs",
"url": "https://angular.dev/guide/signals/model",
"type": "article"
},
{
"title": "Custom events with outputs",
"url": "https://angular.dev/guide/components/outputs",
"type": "article"
},
{
"title": "Non-Related Component Communication | Angular Component & Directives",
"url": "https://www.youtube.com/watch?v=aIkGXMJFTzM",
"type": "video"
}
]
}, },
"TDyFjKrIZJnCjEZsojPNQ": { "TDyFjKrIZJnCjEZsojPNQ": {
"title": "Parent-Child Interaction", "title": "Parent-Child Interaction",

@ -191,41 +191,21 @@
}, },
"8-lO-v6jCYYoklEJXULxN": { "8-lO-v6jCYYoklEJXULxN": {
"title": "JavaScript", "title": "JavaScript",
"description": "Apart from being used in the browser, JavaScript is also used in backend e.g. using [Node.js](https://nodejs.org/) or [Deno](https://deno.land/) for writing server-side code in JavaScript.\n\nIf you pick up JavaScript for the Backend, my personal recommendation would be to learn [JavaScript](/javascript) and then go with [Node.js](/nodejs) as it is the most popular and widely used option. Also, I would recommend learning TypeScript later on as you continue with your backend development Journey; it's a superset of JavaScript and is used in many projects.\n\nVisit the following resources to learn more:", "description": "JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.\n\nVisit the following resources to learn more:",
"links": [ "links": [
{
"title": "You Dont Know JS Yet (book series) ",
"url": "https://github.com/getify/You-Dont-Know-JS",
"type": "opensource"
},
{ {
"title": "Visit Dedicated JavaScript Roadmap", "title": "Visit Dedicated JavaScript Roadmap",
"url": "/javascript", "url": "/javascript",
"type": "article" "type": "article"
}, },
{
"title": "W3Schools – JavaScript Tutorial",
"url": "https://www.w3schools.com/js/",
"type": "article"
},
{ {
"title": "The Modern JavaScript Tutorial", "title": "The Modern JavaScript Tutorial",
"url": "https://javascript.info/", "url": "https://javascript.info/",
"type": "article" "type": "article"
}, },
{ {
"title": "Eloquent Javascript - Book", "title": "Build 30 Javascript projects in 30 days",
"url": "https://eloquentjavascript.net/", "url": "https://javascript30.com/",
"type": "article"
},
{
"title": "Visit Dedicated Node.js Roadmap",
"url": "/nodejs",
"type": "article"
},
{
"title": "JavaScript Beginner Resources",
"url": "https://www.javascript.com/",
"type": "article" "type": "article"
}, },
{ {
@ -235,17 +215,7 @@
}, },
{ {
"title": "JavaScript Crash Course for Beginners", "title": "JavaScript Crash Course for Beginners",
"url": "https://youtu.be/hdI2bqOjy3c", "url": "https://youtu.be/hdI2bqOjy3c?t=2",
"type": "video"
},
{
"title": "Node.js Crash Course",
"url": "https://www.youtube.com/watch?v=fBNz5xF-Kx4",
"type": "video"
},
{
"title": "Node.js Tutorial for Beginners",
"url": "https://www.youtube.com/watch?v=TlB_eWDSMt4",
"type": "video" "type": "video"
} }
] ]

@ -1861,8 +1861,14 @@
}, },
"lMiW2q-b72KUl-2S7M6Vb": { "lMiW2q-b72KUl-2S7M6Vb": {
"title": "urlscan", "title": "urlscan",
"description": "", "description": "**[urlscan.io](http://urlscan.io)** is a free service to scan and analyze websites. When a URL is submitted to [urlscan.io](http://urlscan.io), an automated process will browse to the URL like a regular user and record the activity that this page navigation creates. This includes the domains and IPs contacted, the resources (JavaScript, CSS, etc) requested from those domains, as well as additional information about the page itself. [urlscan.io](http://urlscan.io) will take a screenshot of the page, record the DOM content, JavaScript global variables, cookies created by the page, and a myriad of other observations. If the site is targeting the users one of the more than 900 brands tracked by [urlscan.io](http://urlscan.io), it will be highlighted as potentially malicious in the scan results.\n\nVisit the following resources to learn more:",
"links": [] "links": [
{
"title": "urlscan.io",
"url": "https://urlscan.io/",
"type": "article"
}
]
}, },
"-RnlvUltJ9IDtH0HEnMbN": { "-RnlvUltJ9IDtH0HEnMbN": {
"title": "WHOIS", "title": "WHOIS",

@ -136,12 +136,12 @@
"description": "The visualization of data is an essential skill in the toolkit of every data analyst. This practice is about transforming complex raw data into a graphical format that allows for an easier understanding of large data sets, trends, outliers, and important patterns. Whether pie charts, line graphs, bar graphs, or heat maps, data visualization techniques not only streamline data analysis, but also facilitate a more effective communication of the findings to others. This key concept underscores the importance of presenting data in a digestible and visually appealing manner to drive data-informed decision making in an organization.\n\nLearn more from the following resources:", "description": "The visualization of data is an essential skill in the toolkit of every data analyst. This practice is about transforming complex raw data into a graphical format that allows for an easier understanding of large data sets, trends, outliers, and important patterns. Whether pie charts, line graphs, bar graphs, or heat maps, data visualization techniques not only streamline data analysis, but also facilitate a more effective communication of the findings to others. This key concept underscores the importance of presenting data in a digestible and visually appealing manner to drive data-informed decision making in an organization.\n\nLearn more from the following resources:",
"links": [ "links": [
{ {
"title": "Data visualisation beginner's guide", "title": "Data visualization beginner's guide",
"url": "https://www.tableau.com/en-gb/learn/articles/data-visualization", "url": "https://www.tableau.com/en-gb/learn/articles/data-visualization",
"type": "article" "type": "article"
}, },
{ {
"title": "Data Visualisation in 2024", "title": "Data Visualization in 2024",
"url": "https://www.youtube.com/watch?v=loYuxWSsLNc", "url": "https://www.youtube.com/watch?v=loYuxWSsLNc",
"type": "video" "type": "video"
} }

@ -235,36 +235,11 @@
"title": "HTML", "title": "HTML",
"description": "HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.\n\nVisit the following resources to learn more:", "description": "HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.\n\nVisit the following resources to learn more:",
"links": [ "links": [
{
"title": "Interactive HTML Course",
"url": "https://github.com/denysdovhan/learnyouhtml",
"type": "opensource"
},
{ {
"title": "W3Schools: Learn HTML", "title": "W3Schools: Learn HTML",
"url": "https://www.w3schools.com/html/html_intro.asp", "url": "https://www.w3schools.com/html/html_intro.asp",
"type": "article" "type": "article"
}, },
{
"title": "htmlreference.io: All HTML elements at a glance",
"url": "https://htmlreference.io/",
"type": "article"
},
{
"title": "HTML For Beginners The Easy Way",
"url": "https://html.com",
"type": "article"
},
{
"title": "Web Development Basics",
"url": "https://internetingishard.netlify.app/html-and-css/index.html",
"type": "article"
},
{
"title": "You don't need JavaScript for that",
"url": "https://www.htmhell.dev/adventcalendar/2023/2/",
"type": "article"
},
{ {
"title": "Explore top posts about HTML", "title": "Explore top posts about HTML",
"url": "https://app.daily.dev/tags/html?ref=roadmapsh", "url": "https://app.daily.dev/tags/html?ref=roadmapsh",
@ -279,11 +254,6 @@
"title": "HTML Full Course - Build a Website Tutorial", "title": "HTML Full Course - Build a Website Tutorial",
"url": "https://www.youtube.com/watch?v=pQN-pnXPaVg", "url": "https://www.youtube.com/watch?v=pQN-pnXPaVg",
"type": "video" "type": "video"
},
{
"title": "HTML Tutorial for Beginners: HTML Crash Course",
"url": "https://www.youtube.com/watch?v=qz0aGYrrlhU",
"type": "video"
} }
] ]
}, },
@ -296,30 +266,15 @@
"url": "https://www.w3schools.com/html/html_intro.asp", "url": "https://www.w3schools.com/html/html_intro.asp",
"type": "article" "type": "article"
}, },
{
"title": "MDN Docs: Getting Started with HTML ",
"url": "https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started",
"type": "article"
},
{ {
"title": "web.dev: Learn HTML", "title": "web.dev: Learn HTML",
"url": "https://web.dev/learn/html", "url": "https://web.dev/learn/html",
"type": "article" "type": "article"
}, },
{
"title": "HTML Cheatsheet",
"url": "https://htmlcheatsheet.com",
"type": "article"
},
{ {
"title": "HTML Full Course - Build a Website Tutorial", "title": "HTML Full Course - Build a Website Tutorial",
"url": "https://www.youtube.com/watch?v=pQN-pnXPaVg", "url": "https://www.youtube.com/watch?v=pQN-pnXPaVg",
"type": "video" "type": "video"
},
{
"title": "HTML Tutorial for Beginners: HTML Crash Course",
"url": "https://www.youtube.com/watch?v=qz0aGYrrlhU",
"type": "video"
} }
] ]
}, },
@ -337,16 +292,6 @@
"url": "https://www.w3schools.com/html/html5_semantic_elements.asp", "url": "https://www.w3schools.com/html/html5_semantic_elements.asp",
"type": "article" "type": "article"
}, },
{
"title": "How To Write Semantic HTML",
"url": "https://hackernoon.com/how-to-write-semantic-html-dkq3ulo",
"type": "article"
},
{
"title": "Semantic HTML: What It Is and How It Improves Your Site",
"url": "https://blog.hubspot.com/website/semantic-html",
"type": "article"
},
{ {
"title": "Semantic Markup", "title": "Semantic Markup",
"url": "https://html.com/semantic-markup", "url": "https://html.com/semantic-markup",
@ -356,11 +301,6 @@
"title": "Semantic HTML - web.dev", "title": "Semantic HTML - web.dev",
"url": "https://web.dev/learn/html/semantic-html/", "url": "https://web.dev/learn/html/semantic-html/",
"type": "article" "type": "article"
},
{
"title": "Explore top posts about HTML",
"url": "https://app.daily.dev/tags/html?ref=roadmapsh",
"type": "article"
} }
] ]
}, },
@ -399,31 +339,11 @@
"url": "https://www.w3schools.com/accessibility/index.php", "url": "https://www.w3schools.com/accessibility/index.php",
"type": "article" "type": "article"
}, },
{
"title": "A Complete Guide To Accessible Front-End Components",
"url": "https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/",
"type": "article"
},
{
"title": "MDN Accessibility",
"url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility",
"type": "article"
},
{ {
"title": "Accessibility for Developers by Google", "title": "Accessibility for Developers by Google",
"url": "https://web.dev/accessibility", "url": "https://web.dev/accessibility",
"type": "article" "type": "article"
}, },
{
"title": "Web Accessibility by Udacity",
"url": "https://www.udacity.com/course/web-accessibility--ud891",
"type": "article"
},
{
"title": "Accessibility as an Essential Part of the Inclusive Developer Experience",
"url": "https://thenewstack.io/accessibility-as-an-essential-part-of-the-inclusive-developer-experience/",
"type": "article"
},
{ {
"title": "Explore top posts about Accessibility", "title": "Explore top posts about Accessibility",
"url": "https://app.daily.dev/tags/accessibility?ref=roadmapsh", "url": "https://app.daily.dev/tags/accessibility?ref=roadmapsh",
@ -440,31 +360,11 @@
"title": "SEO Basics", "title": "SEO Basics",
"description": "SEO or Search Engine Optimization is the technique used to optimize your website for better rankings on search engines such as Google, Bing etc.\n\nVisit the following resources to learn more:", "description": "SEO or Search Engine Optimization is the technique used to optimize your website for better rankings on search engines such as Google, Bing etc.\n\nVisit the following resources to learn more:",
"links": [ "links": [
{
"title": "SEO Guide",
"url": "https://github.com/seo/guide",
"type": "opensource"
},
{ {
"title": "Google Search Central — SEO Docs", "title": "Google Search Central — SEO Docs",
"url": "https://developers.google.com/search/docs", "url": "https://developers.google.com/search/docs",
"type": "article" "type": "article"
}, },
{
"title": "8 Must-Know SEO Best Practices For Developers",
"url": "https://neilpatel.com/blog/seo-developers/",
"type": "article"
},
{
"title": "SEO for Developers",
"url": "https://medium.com/welldone-software/seo-for-developers-a-quick-overview-5b5b7ce34679",
"type": "article"
},
{
"title": "Learning SEO",
"url": "https://learningseo.io/",
"type": "article"
},
{ {
"title": "Explore top posts about SEO", "title": "Explore top posts about SEO",
"url": "https://app.daily.dev/tags/seo?ref=roadmapsh", "url": "https://app.daily.dev/tags/seo?ref=roadmapsh",
@ -486,46 +386,16 @@
"title": "CSS", "title": "CSS",
"description": "CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\n\nVisit the following resources to learn more:", "description": "CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\n\nVisit the following resources to learn more:",
"links": [ "links": [
{
"title": "The Odin Project",
"url": "https://www.theodinproject.com//",
"type": "article"
},
{
"title": "What The Flexbox!",
"url": "https://flexbox.io/",
"type": "article"
},
{ {
"title": "W3Schools — Learn CSS", "title": "W3Schools — Learn CSS",
"url": "https://www.w3schools.com/css/", "url": "https://www.w3schools.com/css/",
"type": "article" "type": "article"
}, },
{
"title": "cssreference.io: All CSS properties at a glance",
"url": "https://cssreference.io/",
"type": "article"
},
{ {
"title": "Web.dev by Google — Learn CSS", "title": "Web.dev by Google — Learn CSS",
"url": "https://web.dev/learn/css/", "url": "https://web.dev/learn/css/",
"type": "article" "type": "article"
}, },
{
"title": "Learn to Code HTML & CSS",
"url": "https://learn.shayhowe.com/html-css/building-your-first-web-page/",
"type": "article"
},
{
"title": "Joshw Comeaus CSS Hack Blog Posts",
"url": "https://www.joshwcomeau.com/",
"type": "article"
},
{
"title": "100 Days CSS Challenge",
"url": "https://100dayscss.com",
"type": "article"
},
{ {
"title": "Explore top posts about CSS", "title": "Explore top posts about CSS",
"url": "https://app.daily.dev/tags/css?ref=roadmapsh", "url": "https://app.daily.dev/tags/css?ref=roadmapsh",
@ -536,20 +406,10 @@
"url": "https://youtu.be/n4R2E7O-Ngo", "url": "https://youtu.be/n4R2E7O-Ngo",
"type": "video" "type": "video"
}, },
{
"title": "CSS Crash Course For Absolute Beginners",
"url": "https://www.youtube.com/watch?v=yfoY53QXEnI",
"type": "video"
},
{ {
"title": "HTML and CSS Tutorial", "title": "HTML and CSS Tutorial",
"url": "https://www.youtube.com/watch?v=D-h8L5hgW-w", "url": "https://www.youtube.com/watch?v=D-h8L5hgW-w",
"type": "video" "type": "video"
},
{
"title": "CSS Masterclass - Tutorial & Course for Beginners",
"url": "https://www.youtube.com/watch?v=FqmB-Zj2-PA",
"type": "video"
} }
] ]
}, },
@ -680,41 +540,16 @@
"title": "JavaScript", "title": "JavaScript",
"description": "JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.\n\nVisit the following resources to learn more:", "description": "JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.\n\nVisit the following resources to learn more:",
"links": [ "links": [
{
"title": "You Dont Know JS Yet (book series) ",
"url": "https://github.com/getify/You-Dont-Know-JS",
"type": "opensource"
},
{
"title": "Learn the basics of JavaScript",
"url": "https://github.com/workshopper/javascripting",
"type": "opensource"
},
{ {
"title": "Visit Dedicated JavaScript Roadmap", "title": "Visit Dedicated JavaScript Roadmap",
"url": "/javascript", "url": "/javascript",
"type": "article" "type": "article"
}, },
{
"title": "W3Schools – JavaScript Tutorial",
"url": "https://www.w3schools.com/js/",
"type": "article"
},
{ {
"title": "The Modern JavaScript Tutorial", "title": "The Modern JavaScript Tutorial",
"url": "https://javascript.info/", "url": "https://javascript.info/",
"type": "article" "type": "article"
}, },
{
"title": "Learn JavaScript: Covered many topics",
"url": "https://www.javascripttutorial.net/",
"type": "article"
},
{
"title": "Eloquent JavaScript textbook",
"url": "https://eloquentjavascript.net/",
"type": "article"
},
{ {
"title": "Build 30 Javascript projects in 30 days", "title": "Build 30 Javascript projects in 30 days",
"url": "https://javascript30.com/", "url": "https://javascript30.com/",
@ -729,11 +564,6 @@
"title": "JavaScript Crash Course for Beginners", "title": "JavaScript Crash Course for Beginners",
"url": "https://youtu.be/hdI2bqOjy3c?t=2", "url": "https://youtu.be/hdI2bqOjy3c?t=2",
"type": "video" "type": "video"
},
{
"title": "Build a Netflix Landing Page Clone with HTML, CSS & JS",
"url": "https://youtu.be/P7t13SGytRk?t=22",
"type": "video"
} }
] ]
}, },
@ -2086,36 +1916,11 @@
"url": "https://www.typescriptlang.org/", "url": "https://www.typescriptlang.org/",
"type": "article" "type": "article"
}, },
{
"title": "Official Docs for Deep Dives",
"url": "https://www.typescriptlang.org/docs/",
"type": "article"
},
{ {
"title": "The TypeScript Handbook", "title": "The TypeScript Handbook",
"url": "https://www.typescriptlang.org/docs/handbook/intro.html", "url": "https://www.typescriptlang.org/docs/handbook/intro.html",
"type": "article" "type": "article"
}, },
{
"title": "TypeScript Tutorial",
"url": "https://www.tutorialspoint.com/typescript/index.htm",
"type": "article"
},
{
"title": "What Is TypeScript?",
"url": "https://thenewstack.io/what-is-typescript/",
"type": "article"
},
{
"title": "TypeScript Tutorial: Go beyond ‘Hello, World!’",
"url": "https://thenewstack.io/typescript-tutorial-go-beyond-hello-world/",
"type": "article"
},
{
"title": "A Guide to Using the Programming Language",
"url": "https://thenewstack.io/typescript-tutorial-a-guide-to-using-the-programming-language/",
"type": "article"
},
{ {
"title": "Explore top posts about TypeScript", "title": "Explore top posts about TypeScript",
"url": "https://app.daily.dev/tags/typescript?ref=roadmapsh", "url": "https://app.daily.dev/tags/typescript?ref=roadmapsh",

@ -3,11 +3,6 @@
"title": "HTML", "title": "HTML",
"description": "HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.\n\nVisit the following resources to learn more:", "description": "HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.\n\nVisit the following resources to learn more:",
"links": [ "links": [
{
"title": "Interactive HTML Course",
"url": "https://github.com/denysdovhan/learnyouhtml",
"type": "opensource"
},
{ {
"title": "W3Schools: Learn HTML", "title": "W3Schools: Learn HTML",
"url": "https://www.w3schools.com/html/html_intro.asp", "url": "https://www.w3schools.com/html/html_intro.asp",
@ -19,18 +14,13 @@
"type": "article" "type": "article"
}, },
{ {
"title": "HTML Full Course - Build a Website Tutorial", "title": "HTML Full Course for Beginners",
"url": "https://www.youtube.com/watch?v=pQN-pnXPaVg", "url": "https://youtu.be/mJgBOIoGihA",
"type": "video"
},
{
"title": "HTML Tutorial for Beginners: HTML Crash Course",
"url": "https://www.youtube.com/watch?v=qz0aGYrrlhU",
"type": "video" "type": "video"
}, },
{ {
"title": "HTML and CSS Full Course - Beginner To Pro", "title": "HTML Full Course - Build a Website Tutorial",
"url": "https://youtu.be/a_iQb1lnAEQ", "url": "https://www.youtube.com/watch?v=pQN-pnXPaVg",
"type": "video" "type": "video"
} }
] ]
@ -45,13 +35,8 @@
"type": "article" "type": "article"
}, },
{ {
"title": "Learn to Code HTML & CSS", "title": "Web.dev by Google — Learn CSS",
"url": "https://learn.shayhowe.com/html-css/building-your-first-web-page/", "url": "https://web.dev/learn/css/",
"type": "article"
},
{
"title": "What The Flexbox!",
"url": "https://flexbox.io/",
"type": "article" "type": "article"
}, },
{ {
@ -60,29 +45,24 @@
"type": "article" "type": "article"
}, },
{ {
"title": "CSS Crash Course For Absolute Beginners", "title": "CSS Complete Course",
"url": "https://www.youtube.com/watch?v=yfoY53QXEnI", "url": "https://youtu.be/n4R2E7O-Ngo",
"type": "video" "type": "video"
}, },
{ {
"title": "HTML and CSS Tutorial", "title": "HTML and CSS Tutorial",
"url": "https://www.youtube.com/watch?v=D-h8L5hgW-w", "url": "https://www.youtube.com/watch?v=D-h8L5hgW-w",
"type": "video" "type": "video"
},
{
"title": "CSS Masterclass - Tutorial & Course for Beginners",
"url": "https://www.youtube.com/watch?v=FqmB-Zj2-PA",
"type": "video"
} }
] ]
}, },
"T9PB6WQf-Fa9NXKKvVOy_": { "T9PB6WQf-Fa9NXKKvVOy_": {
"title": "JavaScript", "title": "JavaScript",
"description": "JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.\n\nVisit the following resources to learn more:\n\nWe also have this [JavaScript roadmap](/javascript). You don't need to follow it right now, just learn from some courses and revisit the roadmap later in your journey.", "description": "JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.\n\nVisit the following resources to learn more:",
"links": [ "links": [
{ {
"title": "W3Schools – JavaScript Tutorial", "title": "Visit Dedicated JavaScript Roadmap",
"url": "https://www.w3schools.com/js/", "url": "/javascript",
"type": "article" "type": "article"
}, },
{ {
@ -91,8 +71,8 @@
"type": "article" "type": "article"
}, },
{ {
"title": "Exploring JS: JavaScript books for programmers", "title": "Build 30 Javascript projects in 30 days",
"url": "https://exploringjs.com/", "url": "https://javascript30.com/",
"type": "article" "type": "article"
}, },
{ {
@ -104,11 +84,6 @@
"title": "JavaScript Crash Course for Beginners", "title": "JavaScript Crash Course for Beginners",
"url": "https://youtu.be/hdI2bqOjy3c?t=2", "url": "https://youtu.be/hdI2bqOjy3c?t=2",
"type": "video" "type": "video"
},
{
"title": "Build a Netflix Landing Page Clone with HTML, CSS & JS",
"url": "https://youtu.be/P7t13SGytRk",
"type": "video"
} }
] ]
}, },

@ -1618,21 +1618,26 @@
}, },
"ElgRwv5LSVg5FXGx-2K2s": { "ElgRwv5LSVg5FXGx-2K2s": {
"title": "TypeScript", "title": "TypeScript",
"description": "TypeScript is a free and open-source high-level programming language developed by Microsoft that adds static typing with optional type annotations to JavaScript. It is designed for the development of large applications and transpiles to JavaScript. Because TypeScript is a superset of JavaScript, all JavaScript programs are syntactically valid TypeScript, but they can fail to type-check for safety reasons.\n\nTypeScript supports definition files that can contain type information of existing JavaScript libraries, much like C++ header files can describe the structure of existing object files. This enables other programs to use the values defined in the files as if they were statically typed TypeScript entities. There are third-party header files for popular libraries such as jQuery, MongoDB, and D3.js. TypeScript headers for the Node.js library modules are also available, allowing development of Node.js programs within TypeScript.\n\nVisit the following resources to learn more:", "description": "TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.\n\nVisit the following resources to learn more:",
"links": [ "links": [
{ {
"title": "TypeScript Website", "title": "Official Website",
"url": "https://typescriptlang.org/", "url": "https://www.typescriptlang.org/",
"type": "article"
},
{
"title": "The TypeScript Handbook",
"url": "https://www.typescriptlang.org/docs/handbook/intro.html",
"type": "article" "type": "article"
}, },
{ {
"title": "TypeScript Docs", "title": "Explore top posts about TypeScript",
"url": "https://typescriptlang.org/docs", "url": "https://app.daily.dev/tags/typescript?ref=roadmapsh",
"type": "article" "type": "article"
}, },
{ {
"title": "Learn Typescript Basics in 12 Minutes", "title": "TypeScript for Beginners",
"url": "https://www.youtube.com/watch?v=ahCwqrYpIuM&pp=ygULdHlwZXNjcnJpcHQ%3D", "url": "https://www.youtube.com/watch?v=BwuLxPH8IDs",
"type": "video" "type": "video"
} }
] ]

File diff suppressed because it is too large Load Diff

@ -9,7 +9,7 @@
"type": "article" "type": "article"
}, },
{ {
"title": "TypeScript Handbook", "title": "TypeScript Official Handbook",
"url": "https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html", "url": "https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html",
"type": "article" "type": "article"
}, },
@ -163,7 +163,7 @@
"description": "The TypeScript Playground is a great tool to learn TypeScript. It allows you to write TypeScript code and see the JavaScript output. It also allows you to share your code with others.\n\nLearn more from the following links:", "description": "The TypeScript Playground is a great tool to learn TypeScript. It allows you to write TypeScript code and see the JavaScript output. It also allows you to share your code with others.\n\nLearn more from the following links:",
"links": [ "links": [
{ {
"title": "TypeScript - Playground", "title": "TypeScript Official - Playground",
"url": "https://www.typescriptlang.org/play", "url": "https://www.typescriptlang.org/play",
"type": "article" "type": "article"
}, },
@ -349,7 +349,7 @@
"description": "The `never` type represents the type of values that never occur. For instance, `never` is the return type for a function expression or an arrow function expression that always throws an exception or one that never returns. Variables also acquire the type never when narrowed by any type guards that can never be `true`.\n\nThe never type is a subtype of, and assignable to, every type; however, no type is a subtype of, or assignable to, `never` (except `never` itself). Even any isn’t assignable to `never`.\n\nExamples of functions returning never:\n\n // Function returning never must not have a reachable end point\n function error(message: string): never {\n throw new Error(message);\n }\n \n // Inferred return type is never\n function fail() {\n return error('Something failed');\n }\n \n // Function returning never must not have a reachable end point\n function infiniteLoop(): never {\n while (true) {}\n }\n \n\nLearn more from the following links:", "description": "The `never` type represents the type of values that never occur. For instance, `never` is the return type for a function expression or an arrow function expression that always throws an exception or one that never returns. Variables also acquire the type never when narrowed by any type guards that can never be `true`.\n\nThe never type is a subtype of, and assignable to, every type; however, no type is a subtype of, or assignable to, `never` (except `never` itself). Even any isn’t assignable to `never`.\n\nExamples of functions returning never:\n\n // Function returning never must not have a reachable end point\n function error(message: string): never {\n throw new Error(message);\n }\n \n // Inferred return type is never\n function fail() {\n return error('Something failed');\n }\n \n // Function returning never must not have a reachable end point\n function infiniteLoop(): never {\n while (true) {}\n }\n \n\nLearn more from the following links:",
"links": [ "links": [
{ {
"title": "Never", "title": "Never Type",
"url": "https://www.typescriptlang.org/docs/handbook/2/narrowing.html#the-never-type", "url": "https://www.typescriptlang.org/docs/handbook/2/narrowing.html#the-never-type",
"type": "article" "type": "article"
} }
@ -379,8 +379,14 @@
}, },
"afTNr36VqeXoJpHxm2IoS": { "afTNr36VqeXoJpHxm2IoS": {
"title": "as any", "title": "as any",
"description": "`any` is a special type in TypeScript that represents a value of any type. When a value is declared with the any type, the compiler will not perform any type checks or type inference on that value.\n\nFor example:\n\n let anyValue: any = 42;\n \n // we can assign any value to anyValue, regardless of its type\n anyValue = 'Hello, world!';\n anyValue = true;", "description": "`any` is a special type in TypeScript that represents a value of any type. When a value is declared with the any type, the compiler will not perform any type checks or type inference on that value.\n\nFor example:\n\n let anyValue: any = 42;\n \n // we can assign any value to anyValue, regardless of its type\n anyValue = 'Hello, world!';\n anyValue = true;\n \n\nLearn more from the following links:",
"links": [] "links": [
{
"title": "Arrays",
"url": "https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any",
"type": "article"
}
]
}, },
"mjaL5ocLnM8VQlhUxW6KU": { "mjaL5ocLnM8VQlhUxW6KU": {
"title": "Non-null Assertion", "title": "Non-null Assertion",
@ -398,7 +404,7 @@
"description": "TypeScript developers are often faced with a dilemma: we want to ensure that some expression matches some type, but also want to keep the most specific type of that expression for inference purposes.\n\nFor example:\n\n // Each property can be a string or an RGB tuple.\n const palette = {\n red: [255, 0, 0],\n green: '#00ff00',\n bleu: [0, 0, 255],\n // ^^^^ sacrebleu - we've made a typo!\n };\n \n // We want to be able to use array methods on 'red'...\n const redComponent = palette.red.at(0);\n \n // or string methods on 'green'...\n const greenNormalized = palette.green.toUpperCase();\n \n\nNotice that we’ve written `bleu`, whereas we probably should have written `blue`. We could try to catch that `bleu` typo by using a type annotation on palette, but we’d lose the information about each property.\n\n type Colors = 'red' | 'green' | 'blue';\n type RGB = [red: number, green: number, blue: number];\n \n const palette: Record<Colors, string | RGB> = {\n red: [255, 0, 0],\n green: '#00ff00',\n bleu: [0, 0, 255],\n // ~~~~ The typo is now correctly detected\n };\n // But we now have an undesirable error here - 'palette.red' \"could\" be a string.\n const redComponent = palette.red.at(0);\n \n\nThe `satisfies` operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression. As an example, we could use `satisfies` to validate that all the properties of palette are compatible with `string | number[]`:\n\n type Colors = 'red' | 'green' | 'blue';\n type RGB = [red: number, green: number, blue: number];\n \n const palette = {\n red: [255, 0, 0],\n green: '#00ff00',\n bleu: [0, 0, 255],\n // ~~~~ The typo is now caught!\n } satisfies Record<Colors, string | RGB>;\n \n // Both of these methods are still accessible!\n const redComponent = palette.red.at(0);\n const greenNormalized = palette.green.toUpperCase();\n \n\nLearn more from the following resources:", "description": "TypeScript developers are often faced with a dilemma: we want to ensure that some expression matches some type, but also want to keep the most specific type of that expression for inference purposes.\n\nFor example:\n\n // Each property can be a string or an RGB tuple.\n const palette = {\n red: [255, 0, 0],\n green: '#00ff00',\n bleu: [0, 0, 255],\n // ^^^^ sacrebleu - we've made a typo!\n };\n \n // We want to be able to use array methods on 'red'...\n const redComponent = palette.red.at(0);\n \n // or string methods on 'green'...\n const greenNormalized = palette.green.toUpperCase();\n \n\nNotice that we’ve written `bleu`, whereas we probably should have written `blue`. We could try to catch that `bleu` typo by using a type annotation on palette, but we’d lose the information about each property.\n\n type Colors = 'red' | 'green' | 'blue';\n type RGB = [red: number, green: number, blue: number];\n \n const palette: Record<Colors, string | RGB> = {\n red: [255, 0, 0],\n green: '#00ff00',\n bleu: [0, 0, 255],\n // ~~~~ The typo is now correctly detected\n };\n // But we now have an undesirable error here - 'palette.red' \"could\" be a string.\n const redComponent = palette.red.at(0);\n \n\nThe `satisfies` operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression. As an example, we could use `satisfies` to validate that all the properties of palette are compatible with `string | number[]`:\n\n type Colors = 'red' | 'green' | 'blue';\n type RGB = [red: number, green: number, blue: number];\n \n const palette = {\n red: [255, 0, 0],\n green: '#00ff00',\n bleu: [0, 0, 255],\n // ~~~~ The typo is now caught!\n } satisfies Record<Colors, string | RGB>;\n \n // Both of these methods are still accessible!\n const redComponent = palette.red.at(0);\n const greenNormalized = palette.green.toUpperCase();\n \n\nLearn more from the following resources:",
"links": [ "links": [
{ {
"title": "Satisfies Keyword", "title": "satisfies Keyword",
"url": "https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator", "url": "https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator",
"type": "article" "type": "article"
} }
@ -428,7 +434,7 @@
}, },
"qefnsugcveizVq2TORRgn": { "qefnsugcveizVq2TORRgn": {
"title": "Combining Types", "title": "Combining Types",
"description": "In TypeScript, you can combine types using type union and type intersection.\n\n### Type Union:\n\nThe union operator `|` is used to combine two or more types into a single type that represents all the possible types. For example:\n\n type stringOrNumber = string | number;\n let value: stringOrNumber = 'hello';\n \n value = 42;\n \n\n### Type Intersection:\n\nThe intersection operator `&` is used to intersect two or more types into a single type that represents the properties of all the types. For example:\n\n interface A {\n a: string;\n }\n \n interface B {\n b: number;\n }\n \n type AB = A & B;\n let value: AB = { a: 'hello', b: 42 };\n \n\nLearn more from the following links:", "description": "In TypeScript, you can combine types using type union and type intersection.\n\nType Union\n----------\n\nThe union operator `|` is used to combine two or more types into a single type that represents all the possible types. For example:\n\n type stringOrNumber = string | number;\n let value: stringOrNumber = 'hello';\n \n value = 42;\n \n\nType Intersection\n-----------------\n\nThe intersection operator `&` is used to intersect two or more types into a single type that represents the properties of all the types. For example:\n\n interface A {\n a: string;\n }\n \n interface B {\n b: number;\n }\n \n type AB = A & B;\n let value: AB = { a: 'hello', b: 42 };\n \n\nLearn more from the following links:",
"links": [ "links": [
{ {
"title": "Union Types in TypeScript", "title": "Union Types in TypeScript",
@ -490,7 +496,7 @@
"description": "The `keyof` operator in TypeScript is used to get the union of keys from an object type. Here's an example of how it can be used:\n\n interface User {\n name: string;\n age: number;\n location: string;\n }\n \n type UserKeys = keyof User; // \"name\" | \"age\" | \"location\"\n const key: UserKeys = 'name';\n \n\nIn this example, `UserKeys` is a type that represents the union of keys from the `User` interface, which is `\"name\"` | `\"age\"` | `\"location\"`. And a constant named `key` with the type `UserKeys` is declared with the value `\"name\"`.\n\nLearn more from the following links:", "description": "The `keyof` operator in TypeScript is used to get the union of keys from an object type. Here's an example of how it can be used:\n\n interface User {\n name: string;\n age: number;\n location: string;\n }\n \n type UserKeys = keyof User; // \"name\" | \"age\" | \"location\"\n const key: UserKeys = 'name';\n \n\nIn this example, `UserKeys` is a type that represents the union of keys from the `User` interface, which is `\"name\"` | `\"age\"` | `\"location\"`. And a constant named `key` with the type `UserKeys` is declared with the value `\"name\"`.\n\nLearn more from the following links:",
"links": [ "links": [
{ {
"title": "Keyof Type Operator", "title": "keyof Type Operator",
"url": "https://www.typescriptlang.org/docs/handbook/2/keyof-types.html#handbook-content", "url": "https://www.typescriptlang.org/docs/handbook/2/keyof-types.html#handbook-content",
"type": "article" "type": "article"
} }
@ -646,8 +652,14 @@
}, },
"lvtTSHH9yBTCiLng8btnI": { "lvtTSHH9yBTCiLng8btnI": {
"title": "Hybrid Types", "title": "Hybrid Types",
"description": "In TypeScript, a hybrid type is a type that combines multiple types into a single type. The resulting type is considered a union of those types. This allows you to specify that a value can have multiple types, rather than just one.\n\nFor example, you can create a hybrid type that can accept either a string or a number:\n\n type StringOrNumber = string | number;\n \n\nYou can also use hybrid types to create more complex types that can represent a combination of several different types of values. For example:\n\n type Education = {\n degree: string;\n school: string;\n year: number;\n };\n \n type User = {\n name: string;\n age: number;\n email: string;\n education: Education;\n };", "description": "In TypeScript, a hybrid type is a type that combines multiple types into a single type. The resulting type is considered a union of those types. This allows you to specify that a value can have multiple types, rather than just one.\n\nFor example, you can create a hybrid type that can accept either a string or a number:\n\n type StringOrNumber = string | number;\n \n\nYou can also use hybrid types to create more complex types that can represent a combination of several different types of values. For example:\n\n type Education = {\n degree: string;\n school: string;\n year: number;\n };\n \n type User = {\n name: string;\n age: number;\n email: string;\n education: Education;\n };\n \n\nLearn more from the following links:",
"links": [] "links": [
{
"title": "Geeksforgeeks.org - Hybrid Types",
"url": "https://www.geeksforgeeks.org/what-are-hybrid-types-in-typescript/#:~:text=Hybrid%20types%20are%20a%20combination,properties%20like%20a%20regular%20object.",
"type": "article"
}
]
}, },
"ib0jfZzukYOZ42AdJqt_W": { "ib0jfZzukYOZ42AdJqt_W": {
"title": "Classes", "title": "Classes",
@ -708,6 +720,11 @@
"title": "Inheritance vs Polymorphism", "title": "Inheritance vs Polymorphism",
"description": "Inheritance and polymorphism are two fundamental concepts in object-oriented programming, and they are supported in TypeScript as well.\n\nInheritance refers to a mechanism where a subclass inherits properties and methods from its parent class. This allows a subclass to reuse the code and behavior of its parent class while also adding or modifying its own behavior. In TypeScript, inheritance is achieved using the extends keyword.\n\nPolymorphism refers to the ability of an object to take on many forms. This allows objects of different classes to be treated as objects of a common class, as long as they share a common interface or inheritance hierarchy. In TypeScript, polymorphism is achieved through method overriding and method overloading.\n\n class Animal {\n makeSound(): void {\n console.log('Making animal sound');\n }\n }\n \n class Dog extends Animal {\n makeSound(): void {\n console.log('Bark');\n }\n }\n \n class Cat extends Animal {\n makeSound(): void {\n console.log('Meow');\n }\n }\n \n let animal: Animal;\n \n animal = new Dog();\n animal.makeSound(); // Output: Bark\n \n animal = new Cat();\n animal.makeSound(); // Output: Meow\n \n\nLearn more from the following resources:", "description": "Inheritance and polymorphism are two fundamental concepts in object-oriented programming, and they are supported in TypeScript as well.\n\nInheritance refers to a mechanism where a subclass inherits properties and methods from its parent class. This allows a subclass to reuse the code and behavior of its parent class while also adding or modifying its own behavior. In TypeScript, inheritance is achieved using the extends keyword.\n\nPolymorphism refers to the ability of an object to take on many forms. This allows objects of different classes to be treated as objects of a common class, as long as they share a common interface or inheritance hierarchy. In TypeScript, polymorphism is achieved through method overriding and method overloading.\n\n class Animal {\n makeSound(): void {\n console.log('Making animal sound');\n }\n }\n \n class Dog extends Animal {\n makeSound(): void {\n console.log('Bark');\n }\n }\n \n class Cat extends Animal {\n makeSound(): void {\n console.log('Meow');\n }\n }\n \n let animal: Animal;\n \n animal = new Dog();\n animal.makeSound(); // Output: Bark\n \n animal = new Cat();\n animal.makeSound(); // Output: Meow\n \n\nLearn more from the following resources:",
"links": [ "links": [
{
"title": "Dev.to - Mastering OOP in TypeScript",
"url": "https://dev.to/rajrathod/mastering-object-oriented-programming-with-typescript-encapsulation-abstraction-inheritance-and-polymorphism-explained-c6p",
"type": "article"
},
{ {
"title": "Inheritance and Polymorphism In TypeScript", "title": "Inheritance and Polymorphism In TypeScript",
"url": "https://www.youtube.com/watch?v=Sn6K57YSuwU", "url": "https://www.youtube.com/watch?v=Sn6K57YSuwU",
@ -793,7 +810,7 @@
}, },
"gBTem9Dp3IQLAkqGX4fOF": { "gBTem9Dp3IQLAkqGX4fOF": {
"title": "Partial", "title": "Partial",
"description": "The Partial type in TypeScript allows you to make all properties of a type optional. This is useful when you need to create an object with only a subset of the properties of an existing type.\n\nHere's an example of using the Partial type in TypeScript:\n\n interface User {\n name: string;\n age: number;\n email: string;\n }\n \n function createUser(user: Partial<User>): User {\n return {\n name: 'John Doe',\n age: 30,\n email: 'john.doe@example.com',\n ...user,\n };\n }\n \n const newUser = createUser({ name: 'Jane Doe' });\n \n console.log(newUser);\n // Output: { name: 'Jane Doe', age: 30, email: 'john.doe@example.com' }\n \n\nLearn more from the following links:\n\n@article@Partial", "description": "The Partial type in TypeScript allows you to make all properties of a type optional. This is useful when you need to create an object with only a subset of the properties of an existing type.\n\nHere's an example of using the Partial type in TypeScript:\n\n interface User {\n name: string;\n age: number;\n email: string;\n }\n \n function createUser(user: Partial<User>): User {\n return {\n name: 'John Doe',\n age: 30,\n email: 'john.doe@example.com',\n ...user,\n };\n }\n \n const newUser = createUser({ name: 'Jane Doe' });\n \n console.log(newUser);\n // Output: { name: 'Jane Doe', age: 30, email: 'john.doe@example.com' }\n \n\nLearn more from the following links:\n\n@official@Partial",
"links": [] "links": []
}, },
"E88tHQvARkHURZwGaO02l": { "E88tHQvARkHURZwGaO02l": {
@ -820,7 +837,7 @@
}, },
"IuO9-O_DQdDYuAbdGWdgb": { "IuO9-O_DQdDYuAbdGWdgb": {
"title": "Readonly", "title": "Readonly",
"description": "Readonly constructs a type with all properties of Type set to readonly, meaning the properties of the constructed type cannot be reassigned.\n\n interface Todo {\n title: string;\n }\n \n const todo: Readonly<Todo> = {\n title: 'Delete inactive users',\n };\n \n // Cannot assign to 'title' because it is a read-only property.\n todo.title = 'Hello';\n \n\nLearn more from the following links:\n\n@article@Readonly", "description": "Readonly constructs a type with all properties of Type set to readonly, meaning the properties of the constructed type cannot be reassigned.\n\n interface Todo {\n title: string;\n }\n \n const todo: Readonly<Todo> = {\n title: 'Delete inactive users',\n };\n \n // Cannot assign to 'title' because it is a read-only property.\n todo.title = 'Hello';\n \n\nLearn more from the following links:\n\n@official@Readonly",
"links": [] "links": []
}, },
"DRdBmF5Dt_r09LoPOxOuq": { "DRdBmF5Dt_r09LoPOxOuq": {
@ -858,28 +875,40 @@
}, },
"_BAZlBEzE7ddr315OeHvl": { "_BAZlBEzE7ddr315OeHvl": {
"title": "NonNullable", "title": "NonNullable",
"description": "Non-Nullable constructs a type by excluding `null` and `undefined` from Type.\n\n type T0 = NonNullable<string | number | undefined>;\n // type T0 = string | number\n \n type T1 = NonNullable<string[] | null | undefined>;\n // type T1 = string[]\n \n\nLearn more from the following links:\n\n@article@NonNullable", "description": "Non-Nullable constructs a type by excluding `null` and `undefined` from Type.\n\n type T0 = NonNullable<string | number | undefined>;\n // type T0 = string | number\n \n type T1 = NonNullable<string[] | null | undefined>;\n // type T1 = string[]\n \n\nLearn more from the following links:\n\n@official@NonNullable",
"links": [] "links": []
}, },
"a7hl0iMZ-jcUACxqIYVqv": { "a7hl0iMZ-jcUACxqIYVqv": {
"title": "Parameters", "title": "Parameters",
"description": "Parameters constructs a tuple type from the types used in the parameters of a function type Type.\n\n type T0 = Parameters<() => string>;\n // type T0 = []\n \n type T1 = Parameters<(s: string) => void>;\n // type T1 = [s: string]\n \n type T2 = Parameters<<T>(arg: T) => T>;\n // type T2 = [arg: unknown]\n \n declare function f1(arg: { a: number; b: string }): void;\n type T3 = Parameters<typeof f1>;\n // type T3 = [arg: {\n // a: number;\n // b: string;\n // }]\n \n type T4 = Parameters<any>;\n // type T4 = unknown[]\n \n type T5 = Parameters<never>;\n // type T5 = never\n \n type T6 = Parameters<string>;\n // ^ Type 'string' does not satisfy the constraint '(...args: any) => any'.\n \n type T7 = Parameters<Function>;\n // ^ Type 'Function' does not satisfy the constraint '(...args: any) => any'.\n \n\nLearn more from the following links:\n\n@article@Parameters", "description": "Parameters constructs a tuple type from the types used in the parameters of a function type Type.\n\n type T0 = Parameters<() => string>;\n // type T0 = []\n \n type T1 = Parameters<(s: string) => void>;\n // type T1 = [s: string]\n \n type T2 = Parameters<<T>(arg: T) => T>;\n // type T2 = [arg: unknown]\n \n declare function f1(arg: { a: number; b: string }): void;\n type T3 = Parameters<typeof f1>;\n // type T3 = [arg: {\n // a: number;\n // b: string;\n // }]\n \n type T4 = Parameters<any>;\n // type T4 = unknown[]\n \n type T5 = Parameters<never>;\n // type T5 = never\n \n type T6 = Parameters<string>;\n // ^ Type 'string' does not satisfy the constraint '(...args: any) => any'.\n \n type T7 = Parameters<Function>;\n // ^ Type 'Function' does not satisfy the constraint '(...args: any) => any'.\n \n\nLearn more from the following links:\n\n@official@Parameters",
"links": [] "links": []
}, },
"On75JR_UkiIlha0_qaSeu": { "On75JR_UkiIlha0_qaSeu": {
"title": "ReturnType", "title": "ReturnType",
"description": "Return type constructs a type consisting of the return type of function Type.\n\n type T0 = ReturnType<() => string>;\n // type T0 = string\n \n type T1 = ReturnType<(s: string) => void>;\n // type T1 = void\n \n type T2 = ReturnType<<T>() => T>;\n // type T2 = unknown\n \n type T3 = ReturnType<<T extends U, U extends number[]>() => T>;\n // type T3 = number[]\n \n declare function f1(): { a: number; b: string };\n type T4 = ReturnType<typeof f1>;\n // type T4 = {\n // a: number;\n // b: string;\n // }\n \n type T5 = ReturnType<any>;\n // type T5 = any\n \n type T6 = ReturnType<never>;\n // type T6 = never\n \n type T7 = ReturnType<string>;\n // ^ Type 'string' does not satisfy the constraint '(...args: any) => any'.\n \n type T8 = ReturnType<Function>;\n // ^ Type 'Function' does not satisfy the constraint '(...args: any) => any'.\n \n\nLearn more from the following links:\n\n@article@ReturnType", "description": "Return type constructs a type consisting of the return type of function Type.\n\n type T0 = ReturnType<() => string>;\n // type T0 = string\n \n type T1 = ReturnType<(s: string) => void>;\n // type T1 = void\n \n type T2 = ReturnType<<T>() => T>;\n // type T2 = unknown\n \n type T3 = ReturnType<<T extends U, U extends number[]>() => T>;\n // type T3 = number[]\n \n declare function f1(): { a: number; b: string };\n type T4 = ReturnType<typeof f1>;\n // type T4 = {\n // a: number;\n // b: string;\n // }\n \n type T5 = ReturnType<any>;\n // type T5 = any\n \n type T6 = ReturnType<never>;\n // type T6 = never\n \n type T7 = ReturnType<string>;\n // ^ Type 'string' does not satisfy the constraint '(...args: any) => any'.\n \n type T8 = ReturnType<Function>;\n // ^ Type 'Function' does not satisfy the constraint '(...args: any) => any'.\n \n\nLearn more from the following links:\n\n@official@ReturnType",
"links": [] "links": []
}, },
"izGAjNtrh3BzQt3KiZX0W": { "izGAjNtrh3BzQt3KiZX0W": {
"title": "InstanceType", "title": "InstanceType",
"description": "This type constructs a type consisting of the instance type of a constructor function in Type.\n\n class C {\n x = 0;\n y = 0;\n }\n \n type T0 = InstanceType<typeof C>;\n // type T0 = C\n \n type T1 = InstanceType<any>;\n // type T1 = any\n \n type T2 = InstanceType<never>;\n // type T2 = never\n \n type T3 = InstanceType<string>;\n // ^ Type 'string' does not satisfy the constraint 'abstract new (...args: any) => any'.\n \n type T4 = InstanceType<Function>;\n // ^ Type 'Function' does not satisfy the constraint 'abstract new (...args: any) => any'.\n \n\nLearn more from the following links:\n\n@article@InstanceType", "description": "This type constructs a type consisting of the instance type of a constructor function in Type.\n\n class C {\n x = 0;\n y = 0;\n }\n \n type T0 = InstanceType<typeof C>;\n // type T0 = C\n \n type T1 = InstanceType<any>;\n // type T1 = any\n \n type T2 = InstanceType<never>;\n // type T2 = never\n \n type T3 = InstanceType<string>;\n // ^ Type 'string' does not satisfy the constraint 'abstract new (...args: any) => any'.\n \n type T4 = InstanceType<Function>;\n // ^ Type 'Function' does not satisfy the constraint 'abstract new (...args: any) => any'.\n \n\nLearn more from the following links:",
"links": [] "links": [
{
"title": "InstanceType<Type>",
"url": "https://www.typescriptlang.org/docs/handbook/utility-types.html#instancetypetype",
"type": "article"
}
]
}, },
"aEhI_9mFWXRIZh1ZxTuzu": { "aEhI_9mFWXRIZh1ZxTuzu": {
"title": "Awaited", "title": "Awaited",
"description": "This type is meant to model operations like await in async functions, or the `.then()` method on Promises - specifically, the way that they recursively unwrap Promises.\n\n type A = Awaited<Promise<string>>;\n // type A = string\n \n type B = Awaited<Promise<Promise<number>>>;\n // type B = number\n \n type C = Awaited<boolean | Promise<number>>;\n // type C = number | boolean\n \n\nLearn more from the following links:\n\n@article@Awaited", "description": "This type is meant to model operations like await in async functions, or the `.then()` method on Promises - specifically, the way that they recursively unwrap Promises.\n\n type A = Awaited<Promise<string>>;\n // type A = string\n \n type B = Awaited<Promise<Promise<number>>>;\n // type B = number\n \n type C = Awaited<boolean | Promise<number>>;\n // type C = number | boolean\n \n\nLearn more from the following links:",
"links": [] "links": [
{
"title": "Awaited<Type>",
"url": "https://www.typescriptlang.org/docs/handbook/utility-types.html#awaitedtype",
"type": "article"
}
]
}, },
"2F7vOL__v9dLBohA263aj": { "2F7vOL__v9dLBohA263aj": {
"title": "Advanced Types", "title": "Advanced Types",
@ -948,8 +977,14 @@
}, },
"N8xBTJ74xv1E5hSLYZtze": { "N8xBTJ74xv1E5hSLYZtze": {
"title": "Recursive Types", "title": "Recursive Types",
"description": "Recursive types in TypeScript are a way to define a type that references itself. Recursive types are used to define complex data structures, such as trees or linked lists, where a value can contain one or more values of the same type.\n\nFor example, the following is a recursive type that represents a linked list:\n\n type LinkedList<T> = {\n value: T;\n next: LinkedList<T> | null;\n };\n \n let list: LinkedList<number> = {\n value: 1,\n next: { value: 2, next: { value: 3, next: null } },\n };\n \n\nIn this example, the `LinkedList` type is defined as a type that extends `T` and contains a property `next` of the same type `LinkedList<T>`. This allows us to create a linked list where each node contains a value of type `T` and a reference to the next node in the list.", "description": "Recursive types in TypeScript are a way to define a type that references itself. Recursive types are used to define complex data structures, such as trees or linked lists, where a value can contain one or more values of the same type.\n\nFor example, the following is a recursive type that represents a linked list:\n\n type LinkedList<T> = {\n value: T;\n next: LinkedList<T> | null;\n };\n \n let list: LinkedList<number> = {\n value: 1,\n next: { value: 2, next: { value: 3, next: null } },\n };\n \n\nIn this example, the `LinkedList` type is defined as a type that extends `T` and contains a property `next` of the same type `LinkedList<T>`. This allows us to create a linked list where each node contains a value of type `T` and a reference to the next node in the list.\n\nLearn more from the following links:",
"links": [] "links": [
{
"title": "Recursive Types in TypeScript",
"url": "https://www.typescriptlang.org/play/3-7/types-and-code-flow/recursive-type-references.ts.html",
"type": "article"
}
]
}, },
"sE9lqkkqwnsVJxTJv37YZ": { "sE9lqkkqwnsVJxTJv37YZ": {
"title": "TypeScript Modules", "title": "TypeScript Modules",

Loading…
Cancel
Save