SlideShare a Scribd company logo
Module Resolution
JAGADEESH PATTA
Introduction
 Module Resolution is the process uses by compiler to figure out imports.
Eg:-
import { a } from “moduleA”
 The compiler check any usage of “a” in the entire application. If required
then the compiler will check the definition of “moduleA”.
Type of imports
 Relative imports.
 Non – Relative Imports.
Relative imports
 A relative import is one of the importing mechanism. That starts with /, ./,
../.
Eg:-
import { DefaultHeaders } from “../constants/http”;
Note:
 Relative imports depends on reference path.
 It is not supported for ambient modules.
Non-Relative imports
 A non-relative import is one of the importing mechanism.
Eg:-
import { Component } from “@angular/core”;
Note:
 Non-Relative imports depends on baseUrl.
 It is supported for ambient modules too.
Resolution strategies
 Classic.
 Node.
Resolution strategies - Classic
 This is the default resolution strategy in typescript.
Classic – Relative:
import { b } from “./moduleB”
Lookups:
/ root / src / folder / moduleB.ts
/ root / src / folder / moduleB.d.ts
/ root / src / folder / moduleB.tsx
Resolution strategies - Classic
Classic – Non-Relative:
import { b } from “moduleB”
Lookups:
/ root / src / folder / moduleB.ts
/ root / src / folder / moduleB.d.ts
/ root / src / moduleB.ts
/ root / src / moduleB.d.ts
/ root / moduleB.ts
/ root / moduleB.d.ts
/ moduleB.ts
/ moduleB.d.ts
Resolution strategies - Node
 This is resolution strategy attempts Node.js module resolution mechanism
at runtime.
 Imports in node.js are performed by calling a function require.
 The require behavior is differ from relative and no-relative imports in
different manner.
Resolution strategies - Node
Node – Relative:
import statement:
var x = require(“./moduleB”);
file location:
/ root / src / moduleA.js
Resolution strategies - Node
Node – Relative > resolution steps:
 As a file
/ root / src / moduleB.js
 As a folder
/ root / src / moduleB if it contains package.json and that specifies as main module.
Than node.js refers
/ root / src / moduleB / lib / mainModule.js.
 As a folder
/ root / src / moduleB if it contains a file index.js. That file is implicitly considered that
folders main module.
Resolution strategies - Node
Node – Non-Relative:
 Node.js will look for your module in special folder node_modules.
 A node_modules folder must be in the same level of hierarchy or higher up the director
chain.
 Node will lookup directory chain, looking through each node_module until the module
tried to load.
Resolution strategies - Node
Node – Non-Relative:
import statement:
var x = require ( “moduleB” );
lookups:
/ root / src / node_modules / moduleB.js
/ root / src / node_modules / moduleB / package.json
/ root / src / node_modules / moduleB / index.js
Resolution strategies - Node
Node – Non-Relative:
lookups ( cont … ):
/ root / node_modules / moduleB.js
/ root / node_modules / moduleB / package.json
/ root / node_modules / moduleB / index.js
/ node_modules / moduleB.js
/ node_modules / moduleB / package.json
/ node_modules / moduleB / index.js
How Typescript resolve modules
 Typescript will use the node.js run-time resolution strategy for locate
definition files at compile time.
 To accomplish this, Typescript overlays Typescript source file
extensions(.ts, .tsx and .d.ts).
 Typescript will also use a field in package.json named typings.
 Using typings the compiler will find main definition file.
Typescript Resolution strategies
Relative:
import statement:
import { b } from “./moduleB”;
lookups:
/ root / src / moduleB.js
/ root / src / moduleB.tsx
/ root / src / moduleB.d.ts
Typescript Resolution strategies
Relative:
lookups ( cont … ):
/ root / src / moduleB / package.json ( if moduleB specifies in “typings” property )
/ root / src / moduleB / index.ts
/ root / src / moduleB / index.tsx
/ root / src / moduleB / index.d.ts
Typescript Resolution strategies
Non - Relative:
import statement:
import { b } from “moduleB”;
lookups:
/ root / src / node_modules / moduleB.js
/ root / src / node_modules / moduleB.tsx
/ root / src / node_modules / moduleB.d.ts
Typescript Resolution strategies
Non-Relative:
lookups ( cont … ):
/ root / src / node_modules / moduleB / package.json
/ root / src / node_modules / moduleB / index.ts
/ root / src / node_modules / moduleB / index.tsx
/ root / src / node_modules / moduleB / index.d.ts
Typescript Resolution strategies
Non-Relative:
lookups ( cont … ):
/ root / node_modules / moduleB.js
/ root / node_modules / moduleB.tsx
/ root / node_modules / moduleB.d.ts
/ root / node_modules / moduleB / package.json
/ root / node_modules / moduleB / index.ts
/ root / node_modules / moduleB / index.tsx
/ root / node_modules / moduleB / index.d.ts
Typescript Resolution strategies
Non-Relative:
lookups ( cont … ):
/ node_modules / moduleB.js
/ node_modules / moduleB.tsx
/ node_modules / moduleB.d.ts
/ node_modules / moduleB / package.json
/ node_modules / moduleB / index.ts
/ node_modules / moduleB / index.tsx
/ node_modules / moduleB / index.d.ts
Resolution Flags
 Base Url
 Path Mapping
 Virtual Directories
Resolution Flags – Base Url
 Setting baseUrl informs the compiler where to find modules.
 All non – relative modules relative to baseUrl
Eg:-
{
“compilerOptions” : {
“baseUrl” : “.”
}
}
Resolution Flags – Path Mapping
 Some module are not located under baseUrl.
Eg:-
{
“compilerOptions” : {
“baseUrl” : “.”,
“paths” : {
“jquery” : [ “node_modules / jquery / dist / jquery” ]
}
}
}
Resolution Flags – Virtual Directories
 Some module are not located under baseUrl.
Eg:-
{
“compilerOptions” : {
“rootDirs” : [
“src / views”,
“generated / templates / views”
]
}
}
Any Q ?
Thank You

More Related Content

PPTX
Storage class
MANJULA_AP
 
PDF
Hibernate 1x2
Meenakshi Chandrasekaran
 
PDF
Advanced PHP Simplified
Mark Niebergall
 
ODP
(7) c sharp introduction_advanvced_features_part_ii
Nico Ludwig
 
PDF
Developing android apps with java 8
Jorge Castillo Pérez
 
PDF
Power Leveling your TypeScript
Offirmo
 
PDF
Unbundling the JavaScript module bundler - Luciano Mammino - Codemotion Rome ...
Codemotion
 
PDF
Unbundling the JavaScript module bundler - Codemotion Rome 2018
Luciano Mammino
 
Storage class
MANJULA_AP
 
Advanced PHP Simplified
Mark Niebergall
 
(7) c sharp introduction_advanvced_features_part_ii
Nico Ludwig
 
Developing android apps with java 8
Jorge Castillo Pérez
 
Power Leveling your TypeScript
Offirmo
 
Unbundling the JavaScript module bundler - Luciano Mammino - Codemotion Rome ...
Codemotion
 
Unbundling the JavaScript module bundler - Codemotion Rome 2018
Luciano Mammino
 

Similar to Module resolution | Typescript (7)

PDF
TypeScript: coding JavaScript without the pain
Sander Mak (@Sander_Mak)
 
PDF
Angular JS2 Training Session #1
Paras Mendiratta
 
PPTX
Type script - advanced usage and practices
Iwan van der Kleijn
 
PDF
Typescript for the programmers who like javascript
Andrei Sebastian Cîmpean
 
PPTX
TypeScript . the JavaScript developer best friend!
Alessandro Giorgetti
 
PPTX
Getting started with typescript
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
PPTX
Angular 1.6 typescript application
Yitzchak Meirovich
 
TypeScript: coding JavaScript without the pain
Sander Mak (@Sander_Mak)
 
Angular JS2 Training Session #1
Paras Mendiratta
 
Type script - advanced usage and practices
Iwan van der Kleijn
 
Typescript for the programmers who like javascript
Andrei Sebastian Cîmpean
 
TypeScript . the JavaScript developer best friend!
Alessandro Giorgetti
 
Getting started with typescript
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
Angular 1.6 typescript application
Yitzchak Meirovich
 
Ad

More from pcnmtutorials (18)

PPTX
12. Map | WeakMap | ES6 | JavaScript | Typescript
pcnmtutorials
 
PPTX
11. Iterators | ES6 | JavaScript | TypeScript
pcnmtutorials
 
PDF
10. symbols | ES6 | JavaScript | TypeScript
pcnmtutorials
 
PPTX
9. ES6 | Let And Const | TypeScript | JavaScript
pcnmtutorials
 
PPTX
8. Spread Syntax | ES6 | JavaScript
pcnmtutorials
 
PPTX
7. Rest parameters | ES6 | JavaScript
pcnmtutorials
 
PPTX
6. Default parameters | ES6 | JavaScript
pcnmtutorials
 
PPTX
5. Destructuring | ES6 | Assignment
pcnmtutorials
 
PPTX
4. Template strings | ES6
pcnmtutorials
 
PPTX
3. Object literals | ES6 | JSON
pcnmtutorials
 
PPTX
2. Classes | Object Oriented Programming in JavaScript | ES6 | JavaScript
pcnmtutorials
 
PPTX
1. Arrow Functions | JavaScript | ES6
pcnmtutorials
 
PPTX
Decorators | TypeScript | Angular2 Decorators
pcnmtutorials
 
PPTX
Web workers | JavaScript | HTML API
pcnmtutorials
 
PPTX
Declaration merging | Typescript
pcnmtutorials
 
PPTX
Material design in android L developer Preview
pcnmtutorials
 
PPT
data structure, stack, stack data structure
pcnmtutorials
 
PPTX
1.introduction to data_structures
pcnmtutorials
 
12. Map | WeakMap | ES6 | JavaScript | Typescript
pcnmtutorials
 
11. Iterators | ES6 | JavaScript | TypeScript
pcnmtutorials
 
10. symbols | ES6 | JavaScript | TypeScript
pcnmtutorials
 
9. ES6 | Let And Const | TypeScript | JavaScript
pcnmtutorials
 
8. Spread Syntax | ES6 | JavaScript
pcnmtutorials
 
7. Rest parameters | ES6 | JavaScript
pcnmtutorials
 
6. Default parameters | ES6 | JavaScript
pcnmtutorials
 
5. Destructuring | ES6 | Assignment
pcnmtutorials
 
4. Template strings | ES6
pcnmtutorials
 
3. Object literals | ES6 | JSON
pcnmtutorials
 
2. Classes | Object Oriented Programming in JavaScript | ES6 | JavaScript
pcnmtutorials
 
1. Arrow Functions | JavaScript | ES6
pcnmtutorials
 
Decorators | TypeScript | Angular2 Decorators
pcnmtutorials
 
Web workers | JavaScript | HTML API
pcnmtutorials
 
Declaration merging | Typescript
pcnmtutorials
 
Material design in android L developer Preview
pcnmtutorials
 
data structure, stack, stack data structure
pcnmtutorials
 
1.introduction to data_structures
pcnmtutorials
 
Ad

Recently uploaded (20)

PPTX
Contractor Management Platform and Software Solution for Compliance
SHEQ Network Limited
 
PDF
On Software Engineers' Productivity - Beyond Misleading Metrics
Romén Rodríguez-Gil
 
PPTX
GALILEO CRS SYSTEM | GALILEO TRAVEL SOFTWARE
philipnathen82
 
PPTX
Maximizing Revenue with Marketo Measure: A Deep Dive into Multi-Touch Attribu...
bbedford2
 
PPTX
Presentation about variables and constant.pptx
safalsingh810
 
PDF
The Role of Automation and AI in EHS Management for Data Centers.pdf
TECH EHS Solution
 
PPTX
Explanation about Structures in C language.pptx
Veeral Rathod
 
PPT
Activate_Methodology_Summary presentatio
annapureddyn
 
PPTX
Smart Panchayat Raj e-Governance App.pptx
Rohitnikam33
 
PDF
Jenkins: An open-source automation server powering CI/CD Automation
SaikatBasu37
 
PDF
Micromaid: A simple Mermaid-like chart generator for Pharo
ESUG
 
PDF
Why Use Open Source Reporting Tools for Business Intelligence.pdf
Varsha Nayak
 
PPTX
Odoo Integration Services by Candidroot Solutions
CandidRoot Solutions Private Limited
 
PDF
Bandai Playdia The Book - David Glotz
BluePanther6
 
PDF
Wondershare Filmora 14.5.20.12999 Crack Full New Version 2025
gsgssg2211
 
PDF
What to consider before purchasing Microsoft 365 Business Premium_PDF.pdf
Q-Advise
 
PPTX
Can You Build Dashboards Using Open Source Visualization Tool.pptx
Varsha Nayak
 
PDF
Appium Automation Testing Tutorial PDF: Learn Mobile Testing in 7 Days
jamescantor38
 
PDF
Key Features to Look for in Arizona App Development Services
Net-Craft.com
 
PPTX
AI-Ready Handoff: Auto-Summaries & Draft Emails from MQL to Slack in One Flow
bbedford2
 
Contractor Management Platform and Software Solution for Compliance
SHEQ Network Limited
 
On Software Engineers' Productivity - Beyond Misleading Metrics
Romén Rodríguez-Gil
 
GALILEO CRS SYSTEM | GALILEO TRAVEL SOFTWARE
philipnathen82
 
Maximizing Revenue with Marketo Measure: A Deep Dive into Multi-Touch Attribu...
bbedford2
 
Presentation about variables and constant.pptx
safalsingh810
 
The Role of Automation and AI in EHS Management for Data Centers.pdf
TECH EHS Solution
 
Explanation about Structures in C language.pptx
Veeral Rathod
 
Activate_Methodology_Summary presentatio
annapureddyn
 
Smart Panchayat Raj e-Governance App.pptx
Rohitnikam33
 
Jenkins: An open-source automation server powering CI/CD Automation
SaikatBasu37
 
Micromaid: A simple Mermaid-like chart generator for Pharo
ESUG
 
Why Use Open Source Reporting Tools for Business Intelligence.pdf
Varsha Nayak
 
Odoo Integration Services by Candidroot Solutions
CandidRoot Solutions Private Limited
 
Bandai Playdia The Book - David Glotz
BluePanther6
 
Wondershare Filmora 14.5.20.12999 Crack Full New Version 2025
gsgssg2211
 
What to consider before purchasing Microsoft 365 Business Premium_PDF.pdf
Q-Advise
 
Can You Build Dashboards Using Open Source Visualization Tool.pptx
Varsha Nayak
 
Appium Automation Testing Tutorial PDF: Learn Mobile Testing in 7 Days
jamescantor38
 
Key Features to Look for in Arizona App Development Services
Net-Craft.com
 
AI-Ready Handoff: Auto-Summaries & Draft Emails from MQL to Slack in One Flow
bbedford2
 

Module resolution | Typescript

  • 2. Introduction  Module Resolution is the process uses by compiler to figure out imports. Eg:- import { a } from “moduleA”  The compiler check any usage of “a” in the entire application. If required then the compiler will check the definition of “moduleA”.
  • 3. Type of imports  Relative imports.  Non – Relative Imports.
  • 4. Relative imports  A relative import is one of the importing mechanism. That starts with /, ./, ../. Eg:- import { DefaultHeaders } from “../constants/http”; Note:  Relative imports depends on reference path.  It is not supported for ambient modules.
  • 5. Non-Relative imports  A non-relative import is one of the importing mechanism. Eg:- import { Component } from “@angular/core”; Note:  Non-Relative imports depends on baseUrl.  It is supported for ambient modules too.
  • 7. Resolution strategies - Classic  This is the default resolution strategy in typescript. Classic – Relative: import { b } from “./moduleB” Lookups: / root / src / folder / moduleB.ts / root / src / folder / moduleB.d.ts / root / src / folder / moduleB.tsx
  • 8. Resolution strategies - Classic Classic – Non-Relative: import { b } from “moduleB” Lookups: / root / src / folder / moduleB.ts / root / src / folder / moduleB.d.ts / root / src / moduleB.ts / root / src / moduleB.d.ts / root / moduleB.ts / root / moduleB.d.ts / moduleB.ts / moduleB.d.ts
  • 9. Resolution strategies - Node  This is resolution strategy attempts Node.js module resolution mechanism at runtime.  Imports in node.js are performed by calling a function require.  The require behavior is differ from relative and no-relative imports in different manner.
  • 10. Resolution strategies - Node Node – Relative: import statement: var x = require(“./moduleB”); file location: / root / src / moduleA.js
  • 11. Resolution strategies - Node Node – Relative > resolution steps:  As a file / root / src / moduleB.js  As a folder / root / src / moduleB if it contains package.json and that specifies as main module. Than node.js refers / root / src / moduleB / lib / mainModule.js.  As a folder / root / src / moduleB if it contains a file index.js. That file is implicitly considered that folders main module.
  • 12. Resolution strategies - Node Node – Non-Relative:  Node.js will look for your module in special folder node_modules.  A node_modules folder must be in the same level of hierarchy or higher up the director chain.  Node will lookup directory chain, looking through each node_module until the module tried to load.
  • 13. Resolution strategies - Node Node – Non-Relative: import statement: var x = require ( “moduleB” ); lookups: / root / src / node_modules / moduleB.js / root / src / node_modules / moduleB / package.json / root / src / node_modules / moduleB / index.js
  • 14. Resolution strategies - Node Node – Non-Relative: lookups ( cont … ): / root / node_modules / moduleB.js / root / node_modules / moduleB / package.json / root / node_modules / moduleB / index.js / node_modules / moduleB.js / node_modules / moduleB / package.json / node_modules / moduleB / index.js
  • 15. How Typescript resolve modules  Typescript will use the node.js run-time resolution strategy for locate definition files at compile time.  To accomplish this, Typescript overlays Typescript source file extensions(.ts, .tsx and .d.ts).  Typescript will also use a field in package.json named typings.  Using typings the compiler will find main definition file.
  • 16. Typescript Resolution strategies Relative: import statement: import { b } from “./moduleB”; lookups: / root / src / moduleB.js / root / src / moduleB.tsx / root / src / moduleB.d.ts
  • 17. Typescript Resolution strategies Relative: lookups ( cont … ): / root / src / moduleB / package.json ( if moduleB specifies in “typings” property ) / root / src / moduleB / index.ts / root / src / moduleB / index.tsx / root / src / moduleB / index.d.ts
  • 18. Typescript Resolution strategies Non - Relative: import statement: import { b } from “moduleB”; lookups: / root / src / node_modules / moduleB.js / root / src / node_modules / moduleB.tsx / root / src / node_modules / moduleB.d.ts
  • 19. Typescript Resolution strategies Non-Relative: lookups ( cont … ): / root / src / node_modules / moduleB / package.json / root / src / node_modules / moduleB / index.ts / root / src / node_modules / moduleB / index.tsx / root / src / node_modules / moduleB / index.d.ts
  • 20. Typescript Resolution strategies Non-Relative: lookups ( cont … ): / root / node_modules / moduleB.js / root / node_modules / moduleB.tsx / root / node_modules / moduleB.d.ts / root / node_modules / moduleB / package.json / root / node_modules / moduleB / index.ts / root / node_modules / moduleB / index.tsx / root / node_modules / moduleB / index.d.ts
  • 21. Typescript Resolution strategies Non-Relative: lookups ( cont … ): / node_modules / moduleB.js / node_modules / moduleB.tsx / node_modules / moduleB.d.ts / node_modules / moduleB / package.json / node_modules / moduleB / index.ts / node_modules / moduleB / index.tsx / node_modules / moduleB / index.d.ts
  • 22. Resolution Flags  Base Url  Path Mapping  Virtual Directories
  • 23. Resolution Flags – Base Url  Setting baseUrl informs the compiler where to find modules.  All non – relative modules relative to baseUrl Eg:- { “compilerOptions” : { “baseUrl” : “.” } }
  • 24. Resolution Flags – Path Mapping  Some module are not located under baseUrl. Eg:- { “compilerOptions” : { “baseUrl” : “.”, “paths” : { “jquery” : [ “node_modules / jquery / dist / jquery” ] } } }
  • 25. Resolution Flags – Virtual Directories  Some module are not located under baseUrl. Eg:- { “compilerOptions” : { “rootDirs” : [ “src / views”, “generated / templates / views” ] } }