Modules

Question 1

How is a module defined in Typescript?

Answer 1

In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module.

“How JavaScript Modules are Defined” (typescriptlang.org). Retrieved May 22, 2023.

Question 2

What is the difference between a module and a script?

Answer 2

Modules are executed within their own scope, not in the global scope. This means that variables, functions, classes, etc. declared in a module are not visible outside the module unless they are explicitly exported using one of the export forms.

Scripts aka non-modules are executed in the global scope. File variables and types are declared to be in the shared global scope, and it’s assumed that you’ll either use the outFile compiler option to join multiple input files into one output file, or use multiple <script> tags in your HTML to load these files (in the correct order!).

“Non-modules” (typescriptlang.org). Retrieved May 22, 2023.

Question 3

How can you convert a script into a module?

Answer 3

If you have a file that doesn’t currently have any imports or exports, but you want to be treated as a module, add the line:

export {};

which will change the file to be a module exporting nothing. This syntax works regardless of your module target.

“Non-modules” (typescriptlang.org). Retrieved May 22, 2023.

Question 4

What are the 3 main things to consider when writting a module in TypeScript?

Answer 4

There are three main things to consider when writing module-based code in TypeScript:

• Syntax: What syntax do I want to use to import and export things?
• Module Resolution: What is the relationship between module names (or paths) and files on disk?
• Module Output Target: What should my emitted JavaScript module look like?

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 5

What is the purpose of export keyword in TypeScript?

Answer 5

The export keyword in TypeScript is used to make properties, methods, or module declarations available to be imported into other modules.

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 6

How do you import a module in TypeScript?

Answer 6

You can import a module in TypeScript using the import keyword followed by the path to the module.

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 7

Can you import a subset of a module in TypeScript?

Answer 7

Yes, you can. Use curly brackets { } to specify the parts you want to import.

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 8

How do you alias module components during import in TypeScript?

Answer 8

You can use the as keyword to give a new name to imported entities.

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 9

How to export everything from a module in TypeScript?

Answer 9

You can use export * from 'module' to export everything from a module.

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 10

What does the default keyword mean in TypeScript modules?

Answer 10

The default keyword can be used to specify the default export from a module. This can then be imported without using curly braces.

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 11

How do you import a default export from a TypeScript module?

Answer 11

Default exports can be imported without curly braces. For example, import myDefault from 'my-module'.

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 12

What’s the difference between import * as and import {} from in TypeScript?

Answer 12

• import * as imports the whole module and you can access its exports via dot notation.
• import {} from allows you to import specific named exports directly.

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 13

What is the syntax for importing a module in TypeScript?

Answer 13

import moduleDefault, { ModuleComponent } from 'path/to/module';

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 14

What is the syntax for importing everything as an alias from a module?

Answer 14

import * as ModuleAlias from 'path/to/module';

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 15

How do you export a component, function or value in TypeScript?

Answer 15

export const component = value;

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 16

How do you re-export something imported from another module?

Answer 16

export { importedComponent } from 'path/to/module';

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 17

How do you export default in TypeScript?

Answer 17

export default Component;

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 18

How do you import a default export in TypeScript?

Answer 18

import Component from 'path/to/module';

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 19

What is the syntax for importing a type in TypeScript?

Answer 19

import { TypeName } from 'path/to/module';

Or

import type { TypeName } from 'path/to/module';

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 20

How can you export and import an interface in TypeScript?

Answer 20

Export:

export interface InterfaceName {...} 

Import:

import { InterfaceName } from 'path/to/module';

“Modules in TypeScript” (typescriptlang.org). Retrieved May 22, 2023.

Question 21

How can you export and import a type in TypeScript?

Answer 21

TypeScript has extended the import syntax with two concepts for declaring an import of a type:

• import type - Which is an import statement which can only import types:

// @filename: animal.ts
export type Cat = { breed: string; yearOfBirth: number };
'createCatName' cannot be used as a value because it was imported using 'import type'.
export type Dog = { breeds: string[]; yearOfBirth: number };
export const createCatName = () => "fluffy";
 
// @filename: valid.ts
import type { Cat, Dog } from "./animal.js";
export type Animals = Cat | Dog;
 
// @filename: app.ts
import type { createCatName } from "./animal.js";
const name = createCatName();

• Inline type imports - TypeScript 4.5 also allows for individual imports to be prefixed with type to indicate that the imported reference is a type:

// @filename: app.ts
import { createCatName, type Cat, type Dog } from "./animal.js";
 
export type Animals = Cat | Dog;
const name = createCatName();

Together these allow a non-TypeScript transpiler like Babel, swc or esbuild to know what imports can be safely removed.

“TypeScript Specific ES Module Syntax” (typescriptlang.org). Retrieved May 26, 2023.