parent
34423f4e83
commit
714263c184
192 changed files with 7368 additions and 6076 deletions
File diff suppressed because it is too large
Load Diff
@ -1,11 +0,0 @@ |
||||
# What is Typescript |
||||
|
||||
TypeScript is a strongly typed, object-oriented, compiled programming language that builds on JavaScript. It is a superset of the JavaScript language, designed to give you better tooling at any scale. TypeScript calls itself “JavaScript with syntax for types.” In short, it is JavaScript with some additional features. The secret to the success of TypeScript is in the type checking, ensuring that the data flowing through the program is of the correct kind of data. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@What is TypeScript](https://thenewstack.io/what-is-typescript/) |
||||
- [@article@W3Schools – TypeScript Tutorial](https://www.w3schools.com/typescript/) |
||||
- [@article@Tutorials point – TypeScript Tutorial](https://www.tutorialspoint.com/typescript/index.htm) |
||||
- [@video@TypeScript Crash Course for Beginners](https://www.youtube.com/watch?v=d56mG7DezGs) |
||||
- [@feed@Explore top posts about TypeScript](https://app.daily.dev/tags/typescript?ref=roadmapsh) |
@ -1,15 +0,0 @@ |
||||
# Why use TypeScript |
||||
|
||||
TypeScript extends JavaScript, providing a better developer experience. The benefits of using TypeScript over JavaScript include: |
||||
|
||||
- **Static typing** – TypeScript comes with optional static typing and a type inference system, which means that a variable declared with no type may be inferred by TypeScript based on its value. |
||||
- **Object-oriented programming** – TypeScript supports object-oriented programming concepts like classes, inheritance, etc. |
||||
- **Compile time checks** – JavaScript is an interpreted programming language. There is no compilation involved. Hence, the errors get caught during the runtime. Since TypeScript compiles into JavaScript, errors get reported during the compile time rather than the runtime. |
||||
- **Code editor support** – IDEs or code editors like VS Code support autocomplete for a TypeScript codebase. They also provide inline documentation and highlight the errors. |
||||
- **Integration with existing JavaScript Packages** – You might want to use an npm package written in JavaScript. Since TypeScript is a superset of JavaScript, you can import and use that package. Moreover, the TypeScript community creates and maintains type definitions for popular packages that can be utilized in your project. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@linguinecode - Reasons to use TypeScript](https://linguinecode.com/post/5-reasons-why-to-use-typescript) |
||||
- [@article@Codemotion - Reasons to use TypeScript](https://www.codemotion.com/magazine/backend/why-you-should-use-typescript-for-your-next-project/) |
||||
- [@feed@Explore top posts about TypeScript](https://app.daily.dev/tags/typescript?ref=roadmapsh) |
@ -1,11 +0,0 @@ |
||||
# Structural Typing |
||||
|
||||
Type compatibility in TypeScript is based on structural subtyping. `Structural typing` is a way of relating types based solely on their members. This is in contrast with nominal typing. |
||||
|
||||
TypeScript’s structural type system was designed based on how JavaScript code is typically written. Because JavaScript widely uses anonymous objects like function expressions and object literals, it’s much more natural to represent the relationships found in JavaScript libraries with a structural type system instead of a nominal one. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Structural typings — Medium](https://medium.com/redox-techblog/structural-typing-in-typescript-4b89f21d6004) |
||||
- [@article@Structural typings — Typescriptlang](https://www.typescriptlang.org/docs/handbook/type-compatibility.html) |
||||
- [@video@Structural typing video for Beginners](https://www.youtube.com/watch?v=kWtwsX_rT3k) |
@ -1,8 +0,0 @@ |
||||
# Type Inference |
||||
|
||||
In TypeScript, several places where `type inference` is used to provide type information when there is no explicit type annotation. The type of the x variable is inferred to be a number. This inference occurs when variables and members are initialized, set parameter default values are, and determine function return types. For example, `let x: number`. In most cases, type inference is straightforward. In the following sections, we’ll explore some nuances in how types are inferred. For example, `let x: (number | null)[]` |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Type Inference - typescriptlang](https://www.typescriptlang.org/docs/handbook/type-inference.html) |
||||
- [@video@Type Inference video for Beginners](https://www.youtube.com/watch?v=3ui_st7rtfA) |
@ -1,9 +0,0 @@ |
||||
# Union Types |
||||
|
||||
In TypeScript, we can define a variable that can have multiple types of values. In other words, TypeScript can combine one or two types of data (i.e., number, string, etc.) in a single type, a union type. Union types are a powerful way to express a variable with multiple types. Two or more data types can be combined using the pipe ('|') symbol between the types. For example, `(type1 | type2 | type3 | .. | typeN)`. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Union Types - typescriptlang](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html) |
||||
- [@video@Union Type video for Beginners](https://www.youtube.com/watch?v=uxjpm4W5pCo) |
||||
- [@article@Union Types - typescriptlang](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) |
@ -1,8 +0,0 @@ |
||||
# Builtin Types |
||||
|
||||
The Builtin types represent the different types of values supported by the language. The builtin types check the validity of the supplied values before they are stored or manipulated by the program. This ensures that the code behaves as expected. The Builtin types further allow for richer code hinting and automated documentation too. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@TypeScript Types - Tutorialspoint](https://www.tutorialspoint.com/typescript/typescript_types.htm) |
||||
- [@video@Builtin Type video for Beginners](https://www.youtube.com/watch?v=Nt9ajBrqV_M) |
@ -1,12 +0,0 @@ |
||||
# Type Guard |
||||
|
||||
A type guard is a TypeScript technique used to get information about the type of a variable, usually within a conditional block. Type guards are regular functions that return a boolean, taking a type and telling TypeScript if it can be narrowed down to something more specific. Type guards have the unique property of assuring that the value tested is of a set type depending on the returned boolean. |
||||
|
||||
TypeScript uses built-in JavaScript operators like `typeof`, `instanceof`, and the `in` operator, which is used to determine if an object contains a property. Type guards enable you to instruct the TypeScript compiler to infer a specific type for a variable in a particular context, ensuring that the type of an argument is what you say it is. |
||||
|
||||
Type guards are typically used for narrowing a type and are pretty similar to feature detection, allowing you to detect the correct methods, prototypes, and properties of a value. Therefore, you can quickly figure out how to handle that value. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Types Guards - Blog](https://blog.logrocket.com/how-to-use-type-guards-typescript/) |
||||
- [@video@TypeScript Type Guards Explained](https://www.youtube.com/watch?v=FEeEItMtDwg) |
@ -1,9 +0,0 @@ |
||||
# Typescript Basics |
||||
|
||||
In order to enter into the world of Angular application development, typescript is necessary and it is the primary language here. Typescript is a superset of JavaScript. It comes with design-time support which is useful for type safety and tooling. Since, browsers cannot execute the TypeScript directly, it will be 'Transpiled' into JavaScript using the tsc compiler. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Typescript a Beginners Guide](https://medium.com/jspoint/typescript-a-beginners-guide-6956fe8bcf9e) |
||||
- [@article@TypeScript Playground](https://www.typescriptlang.org/play) |
||||
- [@feed@Explore top posts about TypeScript](https://app.daily.dev/tags/typescript?ref=roadmapsh) |
@ -1,10 +0,0 @@ |
||||
# Marble Diagrams |
||||
|
||||
Marble testing allows you to test asynchronous RxJS code synchronously and step-by-step with the help of RxJS TestScheduler test utility and using virtual time steps. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Understanding Marble Diagrams for Reactive Streams](https://medium.com/@jshvarts/read-marble-diagrams-like-a-pro-3d72934d3ef5) |
||||
- [@article@Interactive Diagrams](https://rxmarbles.com/#from) |
||||
- [@video@How to Read RxJS Marble Diagrams](https://www.youtube.com/watch?v=m6jkzIHMEdg) |
||||
- [@video@Observables Part 4 - Marble Diagrams](https://www.youtube.com/watch?v=wXcPenSfdo0) |
@ -1,9 +0,0 @@ |
||||
# AngularJS vs. Angular |
||||
|
||||
AngularJS was the older version of Angular, whose support officially ended in January 2022. Angular is a component-based front-end development framework built on TypeScript, which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@AngularJS Website](https://angularjs.org/) |
||||
- [@official@Official - Welcome to the Angular tutorial](https://angular.dev/tutorials/learn-angular) |
||||
- [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh) |
@ -1,5 +0,0 @@ |
||||
# Angular Basics |
||||
|
||||
Angular is an strong front-end JavaScript framework which means that it enforces a certain style of application development and project structure that developers need to follow to develop apps with Angular. However, it also offers enough flexibility to allow you to structure your project in an understandable and manageable manner. |
||||
|
||||
In this module, we will have a look at some of the most basic concepts that you need to understand before diving into the framework with more advanced concepts. |
@ -1,8 +0,0 @@ |
||||
# Ng build |
||||
|
||||
The command can be used to build a project of type "application" or "library". When used to build a library, a different builder is invoked, and only the ts-config, configuration, and watch options are applied. All other options apply only to building applications. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular CLI - ng build](https://angular.dev/cli/build) |
||||
- [@video@Building an Angular project](https://www.youtube.com/watch?v=VB6WuCPDwz0) |
@ -1,8 +0,0 @@ |
||||
# Ng serve |
||||
|
||||
ng serve — This command builds, deploy, serves and every time watches your code changes. if find any change in code it builds and serves that code automatically. How do Angular builds? After coding our Angular apps using TypeScript, we use the Angular CLI command to build the app. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular CLI - ng serve](https://angular.dev/cli/serve) |
||||
- [@video@Running a project with ng serve](https://www.youtube.com/watch?v=-w-RfHcLt5U) |
@ -1,8 +0,0 @@ |
||||
# Ng generate |
||||
|
||||
ng generate is used to create the component in angular project. These are the two main ways to generate a new component in Angular: using ng g c <component_name>, and using ng generate component <component_name>. Using either of these two commands, the new component can be generated pretty easily and followed by the suitable component name of your choice. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular CLI - ng generate](https://angular.dev/cli/generate) |
||||
- [@video@Angular cli generate component](https://www.youtube.com/watch?v=NlHlu_zzmo4) |
@ -1,10 +0,0 @@ |
||||
# Ng test |
||||
|
||||
ng test is used to runs unit tests in angular project. |
||||
|
||||
`ng test <project> [options]` | `ng t <project> [options]` |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular CLI - ng test](https://angular.dev/cli/test) |
||||
- [@video@Angular Ng test commands](https://www.youtube.com/watch?v=n1O_eRwzRKA) |
@ -1,9 +0,0 @@ |
||||
# Ng e2e |
||||
|
||||
End-to-end testing (E2E) of Angular applications is performed using the Protractor testing framework, which is created by the Angular team themselves. Protractor can perform end to end tests on Angular applications that are running in a real browser by interacting with it, similar to that of an end-user. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular CLI - ng e2e](https://angular.dev/cli/e2e) |
||||
- [@video@Angular cli generate component](https://www.youtube.com/watch?v=3vFnhzEGfew) |
||||
- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh) |
@ -1,12 +0,0 @@ |
||||
# Ng new |
||||
|
||||
`$ ng new [name]` |
||||
|
||||
That’s the default usage of the command and creating a new project folder with name. The project which is created in that folder is containing: |
||||
|
||||
The default Angular project, All dependencies installed in node_modules folder , Testing files for each components |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular CLI - ng new](https://angular.dev/cli/new) |
||||
- [@video@ng New command](https://www.youtube.com/watch?v=NdEpZezptkQ) |
@ -1,7 +0,0 @@ |
||||
# Templates |
||||
|
||||
A template is a form of HTML that tells Angular how to render the component. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Anatomy of a component](https://angular.dev/guide/components) |
@ -1 +0,0 @@ |
||||
# Rendering topics |
@ -1,8 +0,0 @@ |
||||
# Routing |
||||
|
||||
Routing in Angular allows the users to create a single-page application with multiple views and navigation between them. Users can switch between these views without losing the application state and properties. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Routing](https://angular.dev/guide/routing) |
||||
- [@video@Angular Tutorial - Routing and Navigation](https://www.youtube.com/watch?v=Nehk4tBxD4o) |
@ -1,9 +0,0 @@ |
||||
# Dependency Injection |
||||
|
||||
Dependency Injection (DI) is a design pattern that creates the dependencies of a class and provides those objects to the class when required. Angular being a nice framework, provides a built-in dependency injection mechanism that creates and provides a runtime version of a dependency value using dependency injectors. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Understanding dependency injection](https://angular.dev/guide/di/dependency-injection) |
||||
- [@video@Introduction of Dependency injection](https://www.youtube.com/watch?v=OFPIGlxunL0) |
||||
- [@feed@Explore top posts about Dependency Injection](https://app.daily.dev/tags/dependency-injection?ref=roadmapsh) |
@ -1,8 +0,0 @@ |
||||
# Services |
||||
|
||||
Components shouldn't fetch or save data directly and shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service. Service is where all the remote API calls exist to retrieve and provide data to components. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Creating an injectable service](https://angular.dev/guide/di/creating-injectable-service) |
||||
- [@official@Understanding communicating with backend services using HTTP](https://angular.dev/guide/http) |
@ -1,7 +0,0 @@ |
||||
# Standalone Component |
||||
|
||||
Standalone components provide a simplified way to build Angular applications. Standalone components, directives, and pipes aim to streamline the authoring experience by reducing the need for NgModules. Existing applications can optionally and incrementally adopt the new standalone style without any breaking changes. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Website](https://angular.dev/guide/components/importing) |
@ -1,3 +0,0 @@ |
||||
# Creating a custom X |
||||
|
||||
Learn how to create custom pipes, libraries and directives in Angular. |
@ -1,9 +0,0 @@ |
||||
# Angular universal |
||||
|
||||
Angular Universal also known as server-side rendering is tool which allows server to pre-render Angular application while user hits your website for first time. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Website](https://angular.dev/guide/ssr) |
||||
- [@opensource@Github Repository](https://github.com/angular/universal) |
||||
- [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh) |
@ -1,8 +0,0 @@ |
||||
# Scully |
||||
|
||||
Scully is the best static site generator for Angular projects looking to embrace the Jamstack. It will use your application and will create a static index. html for each of your pages/routes. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Scully Website](https://scully.io/) |
||||
- [@opensource@Github Repository](https://github.com/scullyio/scully) |
@ -0,0 +1 @@ |
||||
# Accessibility |
@ -0,0 +1 @@ |
||||
# AnalogJS |
@ -0,0 +1 @@ |
||||
# Angular and History |
@ -0,0 +1 @@ |
||||
# Angular Architecture |
@ -0,0 +1 @@ |
||||
# Animation |
@ -0,0 +1 @@ |
||||
# AoT Compilation |
@ -0,0 +1 @@ |
||||
# Atributes |
@ -0,0 +1 @@ |
||||
# Attribute Directives |
@ -0,0 +1 @@ |
||||
# Attributes Binding |
@ -0,0 +1 @@ |
||||
# Build Environments |
@ -0,0 +1 @@ |
||||
# @case |
@ -0,0 +1 @@ |
||||
# changeDetection |
@ -0,0 +1 @@ |
||||
# CLI Builders |
@ -0,0 +1 @@ |
||||
# Code Coverage |
@ -0,0 +1 @@ |
||||
# Common Pipes |
@ -0,0 +1 @@ |
||||
# Communication |
@ -0,0 +1 @@ |
||||
# Complex Sequences |
@ -0,0 +1 @@ |
||||
# Component Anatomy |
@ -0,0 +1 @@ |
||||
# Containers |
@ -0,0 +1 @@ |
||||
# ContentChild |
@ -0,0 +1 @@ |
||||
# Control Flow |
@ -0,0 +1 @@ |
||||
# Control Value Accessor |
@ -0,0 +1 @@ |
||||
# Creating Components |
@ -0,0 +1 @@ |
||||
# Creating Libraries |
@ -0,0 +1 @@ |
||||
# Creating Modules |
@ -0,0 +1 @@ |
||||
# Cross-site Request Forgery |
@ -0,0 +1 @@ |
||||
# Cross-site Script Inclusion |
@ -0,0 +1 @@ |
||||
# Cross-site Scripting |
@ -0,0 +1 @@ |
||||
# Custom Validators |
@ -0,0 +1 @@ |
||||
# Data Binding |
@ -0,0 +1 @@ |
||||
# Debugging Tests |
@ -0,0 +1 @@ |
||||
# @default |
@ -0,0 +1 @@ |
||||
# @defer |
@ -0,0 +1 @@ |
||||
# Deferrable Views |
@ -0,0 +1 @@ |
||||
# Dependencies |
@ -0,0 +1 @@ |
||||
# Deployment |
@ -0,0 +1 @@ |
||||
# Developer Tools |
@ -0,0 +1 @@ |
||||
# DevTools |
@ -0,0 +1 @@ |
||||
# Dynamic Components |
@ -0,0 +1 @@ |
||||
# Dynamic Forms |
@ -0,0 +1 @@ |
||||
# Elf |
@ -0,0 +1 @@ |
||||
# @else if |
@ -0,0 +1 @@ |
||||
# @else if |
@ -0,0 +1 @@ |
||||
# @else |
@ -0,0 +1 @@ |
||||
# Encapsulation |
@ -0,0 +1 @@ |
||||
# End-to-End Testing |
@ -0,0 +1 @@ |
||||
# Enforce Trusted Types |
@ -0,0 +1 @@ |
||||
# Events |
@ -0,0 +1 @@ |
||||
# Feature Modules |
@ -0,0 +1 @@ |
||||
# @for |
@ -0,0 +1 @@ |
||||
# HTTP Client |
@ -0,0 +1 @@ |
||||
# HTTP Vulnerabilities |
@ -0,0 +1 @@ |
||||
# HttpClient CSRF |
@ -0,0 +1 @@ |
||||
# Hydration |
@ -0,0 +1 @@ |
||||
# @if |
@ -0,0 +1 @@ |
||||
# Image Optimization |
@ -0,0 +1 @@ |
||||
# Imports |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue