Import syntax variations in Typescript - Mini Project: Build & Apply

Import syntax variations

📖 Scenario: You are working on a TypeScript project that uses different ways to import modules. Understanding how to import correctly helps you organize your code and use external code easily.

🎯 Goal: You will create a small TypeScript program that imports functions and variables using different import styles and then uses them.

📋 What You'll Learn

Create a module file with named exports

Create a module file with a default export

Import named exports using curly braces

Import default export without curly braces

Use the imported items in simple console.log statements

💡 Why This Matters

🌍 Real World

Modules help organize code in large projects by splitting code into files and importing only what is needed.

💼 Career

Understanding import and export syntax is essential for working with modern TypeScript and JavaScript projects, especially in frameworks and libraries.

1

Create a module with named exports

Create a file called mathUtils.ts with two named exports: a function add that takes two numbers and returns their sum, and a constant PI with the value 3.14.

Typescript

// Your code here

Hint

Use export before the function and constant to make them available outside the file.

2

Create a module with a default export

Create a file called greet.ts with a default export of a function named greet that takes a string name and returns the greeting message `Hello, ${name}!`.

Typescript

// Your code here

Hint

Use export default before the function to export it as the default from the file.

3

Import named exports using curly braces

In a new file called app.ts, import the named exports add and PI from ./mathUtils using curly braces.

Typescript

// Your code here

Hint

Use curly braces to import named exports exactly by their names.

4

Import default export and use all imports

In app.ts, import the default export from ./greet as greet. Then use console.log to print the result of add(5, 7), the value of PI, and the result of greet('Alice').

Typescript

// Your code here

Hint

Default imports do not use curly braces. Use console.log to show the values.

Practice

1. Which import syntax correctly imports the default export from a module named utils?

easy

A. import utils from './utils';

B. import { utils } from './utils';

C. import * as utils from './utils';

D. import utils = require('./utils');

Solution

1. Step 1: Understand default export import syntax

   The default export is imported without curly braces using import name from 'module'.

2. Step 2: Analyze each option

   import utils from './utils'; uses the correct syntax for default import. import { utils } from './utils'; uses curly braces which is for named exports. import * as utils from './utils'; imports everything as an object, not default. import utils = require('./utils'); is CommonJS style, not ES module syntax.

3. Final Answer:

   import utils from './utils'; -> Option A

4. Quick Check:

   Default import = import name from 'module' [OK]

Hint: Default imports have no braces, named imports do [OK]

Common Mistakes:

• Using curly braces for default imports
• Confusing * as import with default import
• Mixing CommonJS require syntax with ES modules

2. Which of the following is the correct syntax to import only the named export calculate from a module mathUtils?

easy

A. import calculate from './mathUtils';

B. import { calculate } from './mathUtils';

C. import * as calculate from './mathUtils';

D. import calculate = require('./mathUtils');

Solution

1. Step 1: Identify named export import syntax

   Named exports are imported using curly braces: import { name } from 'module'.

2. Step 2: Check each option

   import { calculate } from './mathUtils'; correctly imports the named export calculate. import calculate from './mathUtils'; is for default imports. import * as calculate from './mathUtils'; imports all exports as an object, not a single named export. import calculate = require('./mathUtils'); uses CommonJS syntax, not ES modules.

3. Final Answer:

   import { calculate } from './mathUtils'; -> Option B

4. Quick Check:

   Named import = import { name } from 'module' [OK]

Hint: Use curly braces for named imports only [OK]

Common Mistakes:

• Omitting curly braces for named imports
• Using * as import when only one named export is needed
• Confusing default and named import syntax

3. Given the following code, what will be the output?

import * as helpers from './helpers';

console.log(typeof helpers);
console.log(typeof helpers.formatDate);

Assume helpers exports a function named formatDate.

medium

A. "object" and "object"

B. "function" and "undefined"

C. "object" and "function"

D. "undefined" and "function"

Solution

1. Step 1: Understand import * as syntax

   Using import * as helpers imports all exports as an object named helpers.

2. Step 2: Determine types of helpers and helpers.formatDate

   helpers is an object, so typeof helpers is "object". formatDate is a function exported inside helpers, so typeof helpers.formatDate is "function".

3. Final Answer:

   "object" and "function" -> Option C

4. Quick Check:

   import * as = object, function inside = function [OK]

Hint: import * as creates an object with exported members [OK]

Common Mistakes:

• Thinking import * as imports a function directly
• Confusing typeof results for functions and objects
• Assuming default export with import * as syntax

4. Identify the error in this import statement:

import { default as myFunc } from './module';

medium

A. You cannot rename the default import using curly braces.

B. The syntax is correct; no error.

C. You must use import myFunc from './module'; for default imports.

D. Default imports must be imported with * as syntax.

Solution

1. Step 1: Understand default import syntax

   Default imports are imported without curly braces and can be renamed directly: import myFunc from 'module'.

2. Step 2: Analyze the given syntax

   The syntax import { default as myFunc } tries to rename the default export inside curly braces, which is invalid in ES module syntax.

3. Final Answer:

   You cannot rename the default import using curly braces. -> Option A

4. Quick Check:

   Default import no braces, no rename inside braces [OK]

Hint: Default imports never use curly braces [OK]

Common Mistakes:

• Trying to rename default import inside curly braces
• Confusing named export renaming with default import
• Assuming default import can be destructured

5. You want to import a named export parseData from dataUtils but avoid naming conflicts by renaming it to parse. Which is the correct import statement?

hard

A. import parse from './dataUtils';

B. import { parse as parseData } from './dataUtils';

C. import * as parse from './dataUtils';

D. import { parseData as parse } from './dataUtils';

Solution

1. Step 1: Understand renaming named imports

   You can rename named imports using import { originalName as newName }.

2. Step 2: Check each option

   import { parseData as parse } from './dataUtils'; correctly renames parseData to parse. import parse from './dataUtils'; imports default export, not named. import * as parse from './dataUtils'; imports all exports as an object named parse. import { parse as parseData } from './dataUtils'; tries to rename parse to parseData, which is reversed.

3. Final Answer:

   import { parseData as parse } from './dataUtils'; -> Option D

4. Quick Check:

   Rename named import with 'as' inside braces [OK]

Hint: Use 'as' inside braces to rename named imports [OK]

Common Mistakes:

• Using default import syntax for named exports
• Confusing rename direction in 'as' syntax
• Using * as when only one function is needed