From 3e49e7f91d9c3f6a52c303ce8878b589798ecbfd Mon Sep 17 00:00:00 2001 From: syedmouaazfarrukh Date: Wed, 1 Feb 2023 07:34:26 -0800 Subject: [PATCH] 113-modules --- .../content/113-modules/100-namespaces.md | 27 ++++++++++++++- .../113-modules/101-ambient-modules.md | 24 ++++++++++++- .../113-modules/102-external-modules.md | 24 ++++++++++++- .../113-modules/103-namespace-augmentation.md | 34 ++++++++++++++++++- .../113-modules/104-global-augmentation.md | 28 ++++++++++++++- .../typescript/content/113-modules/index.md | 31 ++++++++++++++++- 6 files changed, 162 insertions(+), 6 deletions(-) diff --git a/src/roadmaps/typescript/content/113-modules/100-namespaces.md b/src/roadmaps/typescript/content/113-modules/100-namespaces.md index 7146645ae..3e5235ebf 100644 --- a/src/roadmaps/typescript/content/113-modules/100-namespaces.md +++ b/src/roadmaps/typescript/content/113-modules/100-namespaces.md @@ -1 +1,26 @@ -# Namespaces \ No newline at end of file +# Namespaces + +In TypeScript, namespaces are used to organize and share code across multiple files. Namespaces allow you to group related functionality into a single unit and prevent naming conflicts. + +Here's an example of how you can use namespaces in TypeScript: + + ``` + // myNamespace.ts + namespace MyNamespace { + export function doSomething() { + console.log("Doing something..."); + } + } + + // main.ts + /// + MyNamespace.doSomething(); // Output: "Doing something..." + ``` + +In this example, we use the `namespace` keyword in the "myNamespace.ts" file to define a namespace "MyNamespace". Within the namespace, we export a function "doSomething". + +Learn more from the following resources: + +- [Overview of Namespaces](https://www.typescriptlang.org/docs/handbook/namespaces.html) +- [Namespaces and Modules](https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html) +- [TypeScript - Using Namespaces](typescriptlang.org/docs/handbook/namespaces-and-modules.html#using-namespaces) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/113-modules/101-ambient-modules.md b/src/roadmaps/typescript/content/113-modules/101-ambient-modules.md index 78b8dde3b..01a97b31f 100644 --- a/src/roadmaps/typescript/content/113-modules/101-ambient-modules.md +++ b/src/roadmaps/typescript/content/113-modules/101-ambient-modules.md @@ -1 +1,23 @@ -# Ambient modules \ No newline at end of file +# Ambient Modules + +Ambient modules in TypeScript are used to declare external modules or third-party libraries in a TypeScript program. Ambient modules provide type information for modules that have no TypeScript declarations, but are available in the global scope. + +Here's an example of how you can use ambient modules in TypeScript: + + ``` + // myModule.d.ts + declare module "my-module" { + export function doSomething(): void; + } + + // main.ts + import * as myModule from "my-module"; + myModule.doSomething(); + ``` + +In this example, we declare an ambient module "my-module" in the `myModule.d.ts` file. This declaration provides type information for the "my-module" module, including the "doSomething" function that is exported from the module. + +Learn more from the following links: + +- [Ambient Modules](https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules) +- [TypeScript Ambient Module](https://www.w3schools.blog/ambient-module-typescript) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/113-modules/102-external-modules.md b/src/roadmaps/typescript/content/113-modules/102-external-modules.md index a13498b2d..9686782ac 100644 --- a/src/roadmaps/typescript/content/113-modules/102-external-modules.md +++ b/src/roadmaps/typescript/content/113-modules/102-external-modules.md @@ -1 +1,23 @@ -# External modules \ No newline at end of file +# External Modules + +In TypeScript, external modules allow you to organize and share code across multiple files. External modules in TypeScript follow the CommonJS or ES modules standards. + +Here's an example of how you can use external modules in TypeScript: + + ``` + // myModule.ts + export function doSomething() { + console.log("Doing something..."); + } + + // main.ts + import { doSomething } from "./myModule"; + doSomething(); // Output: "Doing something..." + ``` + +In this example, we use the "export" keyword in the "myModule.ts" file to export the "doSomething" function, making it available for other files to use. + +Learn more from the following links: + +- [External Module](https://www.javatpoint.com/typescript-module) +- [TypeScript - External Module](https://learncodeweb.com/typescript/modules-in-typescript-explain-with-an-example/) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/113-modules/103-namespace-augmentation.md b/src/roadmaps/typescript/content/113-modules/103-namespace-augmentation.md index c00a6d229..06363a024 100644 --- a/src/roadmaps/typescript/content/113-modules/103-namespace-augmentation.md +++ b/src/roadmaps/typescript/content/113-modules/103-namespace-augmentation.md @@ -1 +1,33 @@ -# Namespace augmentation \ No newline at end of file +# Namespace Augmentation + +In TypeScript, namespace augmentation is a way to extend or modify existing namespaces. This is useful when you want to add new functionality to existing namespaces or to fix missing or incorrect declarations in third-party libraries. + +Here's an example of how you can use namespace augmentation in TypeScript: + + ``` + // myModule.d.ts + declare namespace MyModule { + export interface MyModule { + newFunction(): void; + } + } + + // main.ts + /// + namespace MyModule { + export class MyModule { + public newFunction() { + console.log("I am a new function in MyModule!"); + } + } + } + + const obj = new MyModule.MyModule(); + obj.newFunction(); // Output: "I am a new function in MyModule!" + ``` + +In this example, we use namespace augmentation to add a new function "newFunction" to the "MyModule" namespace. This is done in the declaration file `myModule.d.ts` by declaring a new interface "MyModule" within the "MyModule" namespace and adding the "newFunction" function to it. + +Learn more from the following links: + +- [Module Augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/113-modules/104-global-augmentation.md b/src/roadmaps/typescript/content/113-modules/104-global-augmentation.md index 69e605b9c..e0b0af3c1 100644 --- a/src/roadmaps/typescript/content/113-modules/104-global-augmentation.md +++ b/src/roadmaps/typescript/content/113-modules/104-global-augmentation.md @@ -1 +1,27 @@ -# Global augmentation \ No newline at end of file +# Global Augmentation + +In TypeScript, global augmentation is a way to add declarations to the global scope. This is useful when you want to add new functionality to existing libraries or to augment the built-in types in TypeScript. + +Here's an example of how you can use global augmentation in TypeScript: + + ``` + // myModule.d.ts + declare namespace NodeJS { + interface Global { + myGlobalFunction(): void; + } + } + + // main.ts + global.myGlobalFunction = function () { + console.log("I am a global function!"); + }; + + myGlobalFunction(); // Output: "I am a global function!" + ``` + +In this example, we declare a new namespace "NodeJS" and add an interface "Global" to it. Within the "Global" interface, we declare a new function "myGlobalFunction". + +Learn more from the following links: + +- [Global augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/113-modules/index.md b/src/roadmaps/typescript/content/113-modules/index.md index 016d43441..2417e78dd 100644 --- a/src/roadmaps/typescript/content/113-modules/index.md +++ b/src/roadmaps/typescript/content/113-modules/index.md @@ -1 +1,30 @@ -# Modules \ No newline at end of file +# Modules + +In TypeScript, modules are used to organize and reuse code. There are two types of modules in TypeScript: + +- Internal +- External + +Internal modules are used to organize code within a file and are also referred to as namespaces. They are defined using the "namespace" keyword. + +External modules are used to organize code across multiple files. They are defined using the "export" keyword in one file and the "import" keyword in another file. External modules in TypeScript follow the CommonJS or ES modules standards. + +Here is an example of how you can use internal modules in TypeScript: + + ``` + // myModule.ts + namespace MyModule { + export function doSomething() { + console.log("Doing something..."); + } + } + + // main.ts + /// + MyModule.doSomething(); // Output: "Doing something..." + ``` + +Learn more from the following links: + +- [Modules](https://www.typescriptlang.org/docs/handbook/modules.html#handbook-content) +- [TypeScript - Modules](https://www.youtube.com/watch?v=EpOPR03z4Vw) \ No newline at end of file