From cb9deeef92f57d879afe3a6803c98675367cc036 Mon Sep 17 00:00:00 2001 From: Ibteasm Ahmed <111435568+GetIbetsamAhmed@users.noreply.github.com> Date: Tue, 4 Oct 2022 01:27:58 +0500 Subject: [PATCH] Add content in angular roadmap (#2087) * add informtion about angular roadmap * Update content/roadmaps/104-angular/content/100-typescript-basics/100-what-is-typescript.md * Update content/roadmaps/104-angular/content/100-typescript-basics/101-why-use-typescript.md * Update content/roadmaps/104-angular/content/100-typescript-basics/102-structural-typing.md * Update content/roadmaps/104-angular/content/100-typescript-basics/103-type-inference.md * Update content/roadmaps/104-angular/content/100-typescript-basics/104-union-types.md * Update content/roadmaps/104-angular/content/100-typescript-basics/105-builtin-types.md * Update content/roadmaps/104-angular/content/100-typescript-basics/106-type-guard.md * Update content/roadmaps/104-angular/content/112-creating-a-custom-x/100-directive.md * Update content/roadmaps/104-angular/content/112-creating-a-custom-x/101-pipe.md Co-authored-by: Ibtesam Ahmed ( SK ) <51031949+SkyLineProgrammers@users.noreply.github.com> Co-authored-by: Kamran Ahmed --- .../100-typescript-basics/100-what-is-typescript.md | 10 +++++++++- .../100-typescript-basics/101-why-use-typescript.md | 8 +++++++- .../100-typescript-basics/102-structural-typing.md | 12 +++++++++++- .../100-typescript-basics/103-type-inference.md | 8 +++++++- .../content/100-typescript-basics/104-union-types.md | 8 +++++++- .../100-typescript-basics/105-builtin-types.md | 8 +++++++- .../content/100-typescript-basics/106-type-guard.md | 11 ++++++++++- .../content/112-creating-a-custom-x/100-directive.md | 10 +++++++++- .../content/112-creating-a-custom-x/101-pipe.md | 8 +++++++- 9 files changed, 74 insertions(+), 9 deletions(-) diff --git a/content/roadmaps/104-angular/content/100-typescript-basics/100-what-is-typescript.md b/content/roadmaps/104-angular/content/100-typescript-basics/100-what-is-typescript.md index fbb700b76..804145ccc 100644 --- a/content/roadmaps/104-angular/content/100-typescript-basics/100-what-is-typescript.md +++ b/content/roadmaps/104-angular/content/100-typescript-basics/100-what-is-typescript.md @@ -1 +1,9 @@ -# What is typescript \ No newline at end of file +# 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. + +Free Content +What is TypeScript +W3Schools – TypeScript Tutorial +Tutorials point – TypeScript Tutorial +TypeScript Crash Course for Beginners \ No newline at end of file diff --git a/content/roadmaps/104-angular/content/100-typescript-basics/101-why-use-typescript.md b/content/roadmaps/104-angular/content/100-typescript-basics/101-why-use-typescript.md index db8a72abc..7fc3f4253 100644 --- a/content/roadmaps/104-angular/content/100-typescript-basics/101-why-use-typescript.md +++ b/content/roadmaps/104-angular/content/100-typescript-basics/101-why-use-typescript.md @@ -1 +1,7 @@ -# Why use typescript \ No newline at end of file +# 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. Use existing 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. + +Free Content +linguinecode - Reasons to use TypeScript +Codemotion - Reasons to use TypeScript diff --git a/content/roadmaps/104-angular/content/100-typescript-basics/102-structural-typing.md b/content/roadmaps/104-angular/content/100-typescript-basics/102-structural-typing.md index d5f545dad..7c9c2cd38 100644 --- a/content/roadmaps/104-angular/content/100-typescript-basics/102-structural-typing.md +++ b/content/roadmaps/104-angular/content/100-typescript-basics/102-structural-typing.md @@ -1 +1,11 @@ -# Structural typing \ No newline at end of file +# 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. + +Free Content +Structural typings — Medium +Structural typings — Typescriptlang +Structural typing video for Beginners + diff --git a/content/roadmaps/104-angular/content/100-typescript-basics/103-type-inference.md b/content/roadmaps/104-angular/content/100-typescript-basics/103-type-inference.md index b38016d0d..57c0b6886 100644 --- a/content/roadmaps/104-angular/content/100-typescript-basics/103-type-inference.md +++ b/content/roadmaps/104-angular/content/100-typescript-basics/103-type-inference.md @@ -1 +1,7 @@ -# Type inference \ No newline at end of file +# 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)[]` + +Free Content +Type Interface - typescriptlang +Type Inference video for Beginners \ No newline at end of file diff --git a/content/roadmaps/104-angular/content/100-typescript-basics/104-union-types.md b/content/roadmaps/104-angular/content/100-typescript-basics/104-union-types.md index 68d004f8b..998cfd41c 100644 --- a/content/roadmaps/104-angular/content/100-typescript-basics/104-union-types.md +++ b/content/roadmaps/104-angular/content/100-typescript-basics/104-union-types.md @@ -1 +1,7 @@ -# Union types \ No newline at end of file +# 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)`. + +Free Content +Union Types - typescriptlang +Union Type video for Beginners diff --git a/content/roadmaps/104-angular/content/100-typescript-basics/105-builtin-types.md b/content/roadmaps/104-angular/content/100-typescript-basics/105-builtin-types.md index 241fe4570..4f90e8a04 100644 --- a/content/roadmaps/104-angular/content/100-typescript-basics/105-builtin-types.md +++ b/content/roadmaps/104-angular/content/100-typescript-basics/105-builtin-types.md @@ -1 +1,7 @@ -# Builtin types \ No newline at end of file +# 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. + +Free Content +TypeScript Types - Tutorialspoint +Builtin Type video for Beginners \ No newline at end of file diff --git a/content/roadmaps/104-angular/content/100-typescript-basics/106-type-guard.md b/content/roadmaps/104-angular/content/100-typescript-basics/106-type-guard.md index f1cebe6af..d482e65a6 100644 --- a/content/roadmaps/104-angular/content/100-typescript-basics/106-type-guard.md +++ b/content/roadmaps/104-angular/content/100-typescript-basics/106-type-guard.md @@ -1 +1,10 @@ -# Type guard \ No newline at end of file +# 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. + +Free Content +Types Guards - Blog diff --git a/content/roadmaps/104-angular/content/112-creating-a-custom-x/100-directive.md b/content/roadmaps/104-angular/content/112-creating-a-custom-x/100-directive.md index 677742e3b..e3891c2b8 100644 --- a/content/roadmaps/104-angular/content/112-creating-a-custom-x/100-directive.md +++ b/content/roadmaps/104-angular/content/112-creating-a-custom-x/100-directive.md @@ -1 +1,9 @@ -# Directive \ No newline at end of file +# Directive + +Directives are the functions that will execute whenever the Angular compiler finds them. Angular Directives enhance the capability of HTML elements by attaching custom behaviors to the DOM. + +From the core concept, Angular directives are categorized into three categories: Attribute Directives, Structural Directives, and Component Directives. + +Free Content +Create a custom directive - Freecodecamp +Create a custom directive video for Beginners \ No newline at end of file diff --git a/content/roadmaps/104-angular/content/112-creating-a-custom-x/101-pipe.md b/content/roadmaps/104-angular/content/112-creating-a-custom-x/101-pipe.md index 0f4544dfb..256134a02 100644 --- a/content/roadmaps/104-angular/content/112-creating-a-custom-x/101-pipe.md +++ b/content/roadmaps/104-angular/content/112-creating-a-custom-x/101-pipe.md @@ -1 +1,7 @@ -# Pipe \ No newline at end of file +# Custom Pipes + +Pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions in template expressions to accept an input value and return a transformed value. Pipes are helpful because you can use them throughout your application while only declaring each pipe once. For example, you would use a pipe to show the date as April 15, 1988, rather than the raw string format. + +Free Content +Create a custom pipe - angular.io +Create a custom pipe video for Beginners \ No newline at end of file